\ No newline at end of file
diff --git a/docs/badge/01-getting-started/installation.txt b/docs/badge/01-getting-started/installation.txt
new file mode 100644
index 0000000000..9f2e091789
--- /dev/null
+++ b/docs/badge/01-getting-started/installation.txt
@@ -0,0 +1,2746 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","01-getting-started/installation","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/installation","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Installation"}],["$","p",null,{"className":"MainContent_description__u2Cc4","children":"Welcome to the Flow documentation!"}],["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"}}]]
+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/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/01-getting-started/stylesheet.html b/docs/badge/01-getting-started/stylesheet.html
new file mode 100644
index 0000000000..05f0c67f2e
--- /dev/null
+++ b/docs/badge/01-getting-started/stylesheet.html
@@ -0,0 +1,77 @@
+Stylesheet
Flow – mittwald Design System
beta
Getting started
Stylesheet
The Flow Component libraries are styled by a shared stylesheet, that can also be
+used standalone. This might be useful if you want to use your own framework to
+build components following the mittwald styling guidelines.
+
On this page you can find information about how to install the stylesheet and
+how the classnames are structured.
+
Install the standalone stylesheet
+
At this point of development you can only get the stylesheet via NPM. The Flow
+Stylesheet Library can be installed using a package manager like npm or
+yarn.
+
yarn add @mittwald/flow-stylesheet
+
+
Import styles
+
You have to import the bundled stylesheet in order to get the correct component
+styles. Add this line to your project's entry point.
+
import "@mittwald/flow-stylesheet/css";
+
+
Using the stylesheet
+
If you want to get started, you should probably learn how the class names are
+structured. The class names provided in this stylesheet are following a
+consistent, component-based and easy to understand schema.
+
General class name notation
+
The class names are all in lowercase and using - to separate words and -- to
+separate logical sections.
+
The first logical section is always the flow namespace. Other sections might
+be:
Class Names used to specialize a basic component must always be used in
+addition to the basic class name. Here are some examples that illustrate
+this requirement.
<buttonclassName="flow--button flow--button--primary flow--button--size-s">
+ Small primary button
+</button>;
+
+
Components aligned in a composition
+
It is a common practice to compose larger components out of already existing
+smaller ones. Take the Inline Alert example. The Inline Alert is composed out of
+an icon, a heading and some optional content. These contained components must
+have their basic class name (flow--icon), to get their basic styling and the
+specialization class name (flow--inline-alert--status-icon) to get the Inline
+Alert specific styles.
+
importExampleSvgfrom"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg";
+
+<asideclassName="flow--inline-alert flow--inline-alert--info">
+<ExampleSvgclassName="flow--icon flow--inline-alert--status-icon"/>
+<h3className="flow--heading flow--inline-alert--heading">
+ Email address has been archived
+</h3>
+<divclassName="flow--inline-alert--content">
+ As your domain has been deleted, this email address has
+ been archived. To be able to send and receive emails,
+ you must rename the address.
+</div>
+</aside>;
+
\ No newline at end of file
diff --git a/docs/badge/01-getting-started/stylesheet.txt b/docs/badge/01-getting-started/stylesheet.txt
new file mode 100644
index 0000000000..e99b49acb6
--- /dev/null
+++ b/docs/badge/01-getting-started/stylesheet.txt
@@ -0,0 +1,2799 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","01-getting-started/stylesheet","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-getting-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-getting-started/stylesheet","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Stylesheet"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"}}]]
+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/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/actions/button.html b/docs/badge/02-components/actions/button.html
new file mode 100644
index 0000000000..f4f94f8185
--- /dev/null
+++ b/docs/badge/02-components/actions/button.html
@@ -0,0 +1,89 @@
+Button
Use the <Icon /> inside a <Button /> to display an icon.
+
Accessibility
+
The underlying SVG image automatically receives the aria-hidden=true
+attribute. Use the aria-label attribute at the Button to describe the
+associated action.
\ No newline at end of file
diff --git a/docs/badge/02-components/content/badge.txt b/docs/badge/02-components/content/badge.txt
new file mode 100644
index 0000000000..7abe82f72d
--- /dev/null
+++ b/docs/badge/02-components/content/badge.txt
@@ -0,0 +1,2713 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/content/badge","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/content/badge","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"badge\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/badge","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Badge"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Badge"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/content/heading.html b/docs/badge/02-components/content/heading.html
new file mode 100644
index 0000000000..d242bb08a0
--- /dev/null
+++ b/docs/badge/02-components/content/heading.html
@@ -0,0 +1,25 @@
+Heading
Flow – mittwald Design System
beta
Components
Heading
Example
+
This is a heading
importHeadingfrom"@mittwald/flow-react-components/Heading";
+
+<Heading>This is a heading</Heading>;
+
+
Levels
+
This is a level 1 heading
This is a level 2 heading
This is a level 3 heading
This is a level 4 heading
This is a level 5 heading
importHeadingfrom"@mittwald/flow-react-components/Heading";
+
+<>
+<Headinglevel={1}>This is a level 1 heading</Heading>
+<Headinglevel={2}>This is a level 2 heading</Heading>
+<Headinglevel={3}>This is a level 3 heading</Heading>
+<Headinglevel={4}>This is a level 4 heading</Heading>
+<Headinglevel={5}>This is a level 5 heading</Heading>
+</>;
+
+
With icon
+
Personal Information
importHeadingfrom"@mittwald/flow-react-components/Heading";
+import{IconMember}from"@mittwald/flow-react-components/Icons";
+
+<Heading>
+<IconMember/>
+ Personal Information
+</Heading>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/content/heading.txt b/docs/badge/02-components/content/heading.txt
new file mode 100644
index 0000000000..0ab3730a9a
--- /dev/null
+++ b/docs/badge/02-components/content/heading.txt
@@ -0,0 +1,2717 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/content/heading","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/heading","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Heading"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"}}]]
+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/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/content/icon.html b/docs/badge/02-components/content/icon.html
new file mode 100644
index 0000000000..67d70144a4
--- /dev/null
+++ b/docs/badge/02-components/content/icon.html
@@ -0,0 +1,57 @@
+Icon
\ No newline at end of file
diff --git a/docs/badge/02-components/content/image.txt b/docs/badge/02-components/content/image.txt
new file mode 100644
index 0000000000..f4fbaaf3a6
--- /dev/null
+++ b/docs/badge/02-components/content/image.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/content/image","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/image","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Image"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"}}]]
+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/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/content/inline-code.html b/docs/badge/02-components/content/inline-code.html
new file mode 100644
index 0000000000..ac76336c01
--- /dev/null
+++ b/docs/badge/02-components/content/inline-code.html
@@ -0,0 +1,9 @@
+Inline code
Flow – mittwald Design System
beta
Components
Inline code
Example
+
Enter yarn start to start your app.
importTextfrom"@mittwald/flow-react-components/Text";
+importInlineCodefrom"@mittwald/flow-react-components/InlineCode";
+
+<Text>
+ Enter <InlineCode>yarn start</InlineCode> to start your
+ app.
+</Text>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/content/inline-code.txt b/docs/badge/02-components/content/inline-code.txt
new file mode 100644
index 0000000000..ebce876e99
--- /dev/null
+++ b/docs/badge/02-components/content/inline-code.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/content/inline-code","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/inline-code","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Inline code"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Inline code"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/content/label.html b/docs/badge/02-components/content/label.html
new file mode 100644
index 0000000000..67f1202f99
--- /dev/null
+++ b/docs/badge/02-components/content/label.html
@@ -0,0 +1,5 @@
+Label
Flow – mittwald Design System
beta
Components
Label
Example
+
importLabelfrom"@mittwald/flow-react-components/Label";
+
+<Label>This is a label</Label>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/content/label.txt b/docs/badge/02-components/content/label.txt
new file mode 100644
index 0000000000..7641e3176d
--- /dev/null
+++ b/docs/badge/02-components/content/label.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/content/label","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/content/label","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Label"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"}}]]
+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/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/content/labeled-value.html b/docs/badge/02-components/content/labeled-value.html
new file mode 100644
index 0000000000..d9c226ba96
--- /dev/null
+++ b/docs/badge/02-components/content/labeled-value.html
@@ -0,0 +1,44 @@
+Labeled value
importLinkfrom"@mittwald/flow-react-components/Link";
+
+<Linkhref="#">This is a link</Link>;
+
+
Inline
+
Use the inline property if you want to use a link inside a text block. Links
+inside a <Text /> component will be rendered as inline links automatically.
\ No newline at end of file
diff --git a/docs/badge/02-components/overlays/tooltip.txt b/docs/badge/02-components/overlays/tooltip.txt
new file mode 100644
index 0000000000..b6392a53a6
--- /dev/null
+++ b/docs/badge/02-components/overlays/tooltip.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/overlays/tooltip","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"overlays\",\"tooltip\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/overlays/tooltip","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Tooltip"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Tooltip"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/status/inline-alert.html b/docs/badge/02-components/status/inline-alert.html
new file mode 100644
index 0000000000..8f81e4a03b
--- /dev/null
+++ b/docs/badge/02-components/status/inline-alert.html
@@ -0,0 +1,63 @@
+Inline alert
Flow – mittwald Design System
beta
Components
Inline alert
Example
+
importInlineAlertfrom"@mittwald/flow-react-components/InlineAlert";
+importHeadingfrom"@mittwald/flow-react-components/Heading";
+
+<InlineAlert>
+<Heading>Email address has been archived</Heading>
+</InlineAlert>;
+
+
With content
+
importInlineAlertfrom"@mittwald/flow-react-components/InlineAlert";
+importHeadingfrom"@mittwald/flow-react-components/Heading";
+importContentfrom"@mittwald/flow-react-components/Content";
+
+<InlineAlert>
+<Heading>Email address has been archived</Heading>
+<Content>
+ As your domain has been deleted, this email address has
+ been archived. To be able to send and receive emails,
+ you must rename the address.
+</Content>
+</InlineAlert>;
+
+
Status
+
importInlineAlertfrom"@mittwald/flow-react-components/InlineAlert";
+importHeadingfrom"@mittwald/flow-react-components/Heading";
+importContentfrom"@mittwald/flow-react-components/Content";
+
+<Row>
+<InlineAlertstatus="info">
+<Heading>Email address has been archived</Heading>
+<Content>
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+</Content>
+</InlineAlert>
+
+<InlineAlertstatus="warning">
+<Heading>Storage is almost exceeded</Heading>
+<Content>
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+</Content>
+</InlineAlert>
+
+<InlineAlertstatus="danger">
+<Heading>No SSL certificate could be issued</Heading>
+<Content>
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+</Content>
+</InlineAlert>
+
+<InlineAlertstatus="success">
+<Heading>Your app is up to date</Heading>
+<Content>
+ Your app has been updated to the current version.
+</Content>
+</InlineAlert>
+</Row>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/status/inline-alert.txt b/docs/badge/02-components/status/inline-alert.txt
new file mode 100644
index 0000000000..604655ef59
--- /dev/null
+++ b/docs/badge/02-components/status/inline-alert.txt
@@ -0,0 +1,2756 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/status/inline-alert","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"inline-alert\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/inline-alert","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e8:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+2:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Inline alert"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$e8","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Inline alert"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/status/status-badge.html b/docs/badge/02-components/status/status-badge.html
new file mode 100644
index 0000000000..6929cb0f2f
--- /dev/null
+++ b/docs/badge/02-components/status/status-badge.html
@@ -0,0 +1,15 @@
+Status badge
\ No newline at end of file
diff --git a/docs/badge/02-components/status/status-icon.txt b/docs/badge/02-components/status/status-icon.txt
new file mode 100644
index 0000000000..3d56fe96a4
--- /dev/null
+++ b/docs/badge/02-components/status/status-icon.txt
@@ -0,0 +1,2722 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/status/status-icon","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"status\",\"status-icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/status/status-icon","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Status icon"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Status icon"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/structure/layout-card.html b/docs/badge/02-components/structure/layout-card.html
new file mode 100644
index 0000000000..26c186ce86
--- /dev/null
+++ b/docs/badge/02-components/structure/layout-card.html
@@ -0,0 +1,8 @@
+Layout card
Flow – mittwald Design System
beta
Components
Layout card
Example
+
Layout Card is a structure element that can contain any content
importLayoutCardfrom"@mittwald/flow-react-components/LayoutCard";
+
+<LayoutCard>
+ Layout Card is a structure element that can contain any
+ content
+</LayoutCard>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/structure/layout-card.txt b/docs/badge/02-components/structure/layout-card.txt
new file mode 100644
index 0000000000..68f49d74f7
--- /dev/null
+++ b/docs/badge/02-components/structure/layout-card.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/structure/layout-card","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"layout-card\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/layout-card","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Layout card"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Layout card"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/structure/list.html b/docs/badge/02-components/structure/list.html
new file mode 100644
index 0000000000..4b68979b07
--- /dev/null
+++ b/docs/badge/02-components/structure/list.html
@@ -0,0 +1,22 @@
+List
\ No newline at end of file
diff --git a/docs/badge/02-components/structure/list.txt b/docs/badge/02-components/structure/list.txt
new file mode 100644
index 0000000000..b368511c2e
--- /dev/null
+++ b/docs/badge/02-components/structure/list.txt
@@ -0,0 +1,2709 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/structure/list","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"list\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/list","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"List"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"List"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/02-components/structure/section.html b/docs/badge/02-components/structure/section.html
new file mode 100644
index 0000000000..8e6fa78632
--- /dev/null
+++ b/docs/badge/02-components/structure/section.html
@@ -0,0 +1,88 @@
+Section
Flow – mittwald Design System
beta
Components
Section
Example
+
Newsletter
Upcoming releases, new features and tips about your hosting - we bring the most important information to inbox. Subscribe to our newsletter and stay up to date.Subscribe
importHeadingfrom"@mittwald/flow-react-components/Heading";
+importTextfrom"@mittwald/flow-react-components/Text";
+importLinkfrom"@mittwald/flow-react-components/Link";
+importSectionfrom"@mittwald/flow-react-components/Section";
+
+<Section>
+<Heading>Newsletter</Heading>
+<Text>
+ Upcoming releases, new features and tips about your
+ hosting - we bring the most important information to
+ inbox. Subscribe to our newsletter and stay up to date.
+</Text>
+<Linkhref="#">Subscribe</Link>
+</Section>;
+
+
Multiple Sections
+
Personal Information
Newsletter
Upcoming releases, new features and tips about your hosting - we bring you the most important information in your inbox. Subscribe to our newsletter and stay up to date.Subscribe
importHeadingfrom"@mittwald/flow-react-components/Heading";
+importTextfrom"@mittwald/flow-react-components/Text";
+importLinkfrom"@mittwald/flow-react-components/Link";
+importSectionfrom"@mittwald/flow-react-components/Section";
+importTextFieldfrom"@mittwald/flow-react-components/TextField";
+importLabelfrom"@mittwald/flow-react-components/Label";
+import{IconMember}from"@mittwald/flow-react-components/Icons";
+
+<>
+<Section>
+<Heading>
+<IconMember/>
+ Personal Information
+</Heading>
+<TextFieldisRequireddefaultValue="John">
+<Label>First name</Label>
+</TextField>
+<TextFieldisRequireddefaultValue="Doe">
+<Label>Last name</Label>
+</TextField>
+</Section>
+<Section>
+<Heading>Newsletter</Heading>
+<Text>
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+</Text>
+<Linkhref="#">Subscribe</Link>
+</Section>
+</>;
+
+
With status badge
+
Newsletter
Subscribed
Upcoming releases, new features and tips about your hosting - we bring the most important information to inbox. Subscribe to our newsletter and stay up to date.
importHeadingfrom"@mittwald/flow-react-components/Heading";
+importTextfrom"@mittwald/flow-react-components/Text";
+importSectionfrom"@mittwald/flow-react-components/Section";
+importStatusBadgefrom"@mittwald/flow-react-components/StatusBadge";
+importHeaderfrom"@mittwald/flow-react-components/Header";
+
+<Section>
+<Header>
+<Heading>Newsletter</Heading>
+<StatusBadge>Subscribed</StatusBadge>
+</Header>
+<Text>
+ Upcoming releases, new features and tips about your
+ hosting - we bring the most important information to
+ inbox. Subscribe to our newsletter and stay up to date.
+</Text>
+</Section>;
+
+
With switch
+
Newsletter
Upcoming releases, new features and tips about your hosting - we bring the most important information to inbox. Subscribe to our newsletter and stay up to date.
importHeadingfrom"@mittwald/flow-react-components/Heading";
+importHeaderfrom"@mittwald/flow-react-components/Header";
+importTextfrom"@mittwald/flow-react-components/Text";
+importSectionfrom"@mittwald/flow-react-components/Section";
+importSwitchfrom"@mittwald/flow-react-components/Switch";
+
+<Section>
+<Header>
+<Heading>Newsletter</Heading>
+<Switch>Subscription</Switch>
+</Header>
+<Text>
+ Upcoming releases, new features and tips about your
+ hosting - we bring the most important information to
+ inbox. Subscribe to our newsletter and stay up to date.
+</Text>
+</Section>;
+
\ No newline at end of file
diff --git a/docs/badge/02-components/structure/section.txt b/docs/badge/02-components/structure/section.txt
new file mode 100644
index 0000000000..4a3445591b
--- /dev/null
+++ b/docs/badge/02-components/structure/section.txt
@@ -0,0 +1,2753 @@
+3:I[94152,[],""]
+5:I[662855,[],""]
+4:["slug","02-components/structure/section","c"]
+0:["wG7dSsx2iQ5rsPcZLZ8xc",[[["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__?{\"slug\":[\"02-components\",\"structure\",\"section\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-components/structure/section","c"],{"children":["__PAGE__",{},["$L1","$L2",null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","$4","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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/badge/_next/static/css/b7476877dd2c8a04.css","precedence":"next","crossOrigin":""}]]}]]},[null,"$L6",null]],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/badge/_next/static/css/1de2f7839b9cf19e.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+8:I[433702,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+9:I[499656,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+a:I[414009,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+b:I[102652,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2d:I[371536,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+2e:I[489373,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","553","static/chunks/553-eec603ad851c1f3a.js","985","static/chunks/985-dc04f245b69b64b8.js","185","static/chunks/app/layout-ad5f8a570bb58345.js"],""]
+e6:I[127875,["384","static/chunks/3ceb1ae0-b38747a08ab44079.js","802","static/chunks/d709487a-0b33f1540d9dc41a.js","553","static/chunks/553-eec603ad851c1f3a.js","530","static/chunks/530-d26691cd436c7330.js","877","static/chunks/app/%5B...slug%5D/page-9b68a4d443ec09be.js"],""]
+c:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+12:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+13:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+14:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+15:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+16:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+17:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+18:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+19:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1b:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1d:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1e:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+1f:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+20:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+21:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+22:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+23:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+24:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+25:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+26:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+27:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+28:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+29:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2b:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+2c:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+30:Tb4f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ strong: "strong",
+ h2: "h2",
+ code: "code",
+ pre: "pre"
+ }, _provideComponents(), props.components), {InlineAlert, Heading, Content} = _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: "Early development & stability notice"
+ }), _jsx(Content, {
+ children: _jsxs(_components.p, {
+ children: ["This project is in ", _jsx(_components.strong, {
+ children: "early development"
+ }), " stage, and we do not offer any\nstability guarantees of any kind. We welcome you to give this project a try\nand we're looking forward for any feedback on this project in this stage of\ndevelopment. However, please do not rely on any inputs or outputs of this\nproject to remain stable."]
+ })
+ })]
+ }), "\n", _jsx(_components.h2, {
+ children: "Installing the Flow React Component Library"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The Flow React Component Library can be installed using a package manager like\n", _jsx(_components.code, {
+ children: "npm"
+ }), " or ", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-shell",
+ children: "yarn add @mittwald/flow-react-components\n"
+ })
+ }), "\n", _jsx(_components.p, {
+ children: "All components are available in this one package for ease of dependency\nmanagement."
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-react-components/styles\";\n"
+ })
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+31:{"description":"Welcome to the Flow documentation!"}
+32:{}
+2f:{"compiledSource":"$30","frontmatter":"$31","scope":"$32"}
+33:{}
+34:["01-getting-started","installation"]
+36:T1659,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ p: "p",
+ h2: "h2",
+ code: "code",
+ pre: "pre",
+ h3: "h3",
+ h4: "h4",
+ strong: "strong"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.p, {
+ children: "The Flow Component libraries are styled by a shared stylesheet, that can also be\nused standalone. This might be useful if you want to use your own framework to\nbuild components following the mittwald styling guidelines."
+ }), "\n", _jsx(_components.p, {
+ children: "On this page you can find information about how to install the stylesheet and\nhow the classnames are structured."
+ }), "\n", _jsx(_components.h2, {
+ children: "Install the standalone stylesheet"
+ }), "\n", _jsxs(_components.p, {
+ children: ["At this point of development you can only get the stylesheet via NPM. The Flow\nStylesheet Library can be installed using a package manager like ", _jsx(_components.code, {
+ children: "npm"
+ }), " or\n", _jsx(_components.code, {
+ children: "yarn"
+ }), "."]
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "yarn add @mittwald/flow-stylesheet\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Import styles"
+ }), "\n", _jsx(_components.p, {
+ children: "You have to import the bundled stylesheet in order to get the correct component\nstyles. Add this line to your project's entry point."
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: "import \"@mittwald/flow-stylesheet/css\";\n"
+ })
+ }), "\n", _jsx(_components.h2, {
+ children: "Using the stylesheet"
+ }), "\n", _jsx(_components.p, {
+ children: "If you want to get started, you should probably learn how the class names are\nstructured. The class names provided in this stylesheet are following a\nconsistent, component-based and easy to understand schema."
+ }), "\n", _jsx(_components.h3, {
+ children: "General class name notation"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The class names are all in lowercase and using ", _jsx(_components.code, {
+ children: "-"
+ }), " to separate words and ", _jsx(_components.code, {
+ children: "--"
+ }), " to\nseparate logical sections."]
+ }), "\n", _jsxs(_components.p, {
+ children: ["The first logical section is always the ", _jsx(_components.code, {
+ children: "flow"
+ }), " namespace. Other sections might\nbe:"]
+ }), "\n", _jsx(_components.h4, {
+ children: "Components"
+ }), "\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-Components"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--navigation\n.flow--navigation--navigation-item\n"
+ })
+ }), "\n", _jsx(_components.h4, {
+ children: "Specialization: different variants"
+ }), "\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: "Specialization: components aligned in a composition"
+ }), "\n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ children: ".flow--button--icon\n.flow--inline-alert--status-icon\n"
+ })
+ }), "\n", _jsx(_components.h3, {
+ children: "A note to specialization"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Class Names used to specialize a basic component must always be used in\n", _jsx(_components.strong, {
+ children: "addition to the basic class name"
+ }), ". Here are some examples that illustrate\nthis requirement."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Combined variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple-variants"
+ }), "\n", _jsx(_components.h4, {
+ children: "Components aligned in a composition"
+ }), "\n", _jsxs(_components.p, {
+ children: ["It is a common practice to compose larger components out of already existing\nsmaller ones. Take the Inline Alert example. The Inline Alert is composed out of\nan icon, a heading and some optional content. These contained components must\nhave their basic class name (", _jsx(_components.code, {
+ children: "flow--icon"
+ }), "), to get their basic styling and the\nspecialization class name (", _jsx(_components.code, {
+ children: "flow--inline-alert--status-icon"
+ }), ") to get the Inline\nAlert specific styles."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "composition"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+37:{}
+38:{}
+35:{"compiledSource":"$36","frontmatter":"$37","scope":"$38"}
+39:{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"}
+3a:["01-getting-started","stylesheet"]
+3c:Ta54,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code",
+ h3: "h3"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Different variants"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "variants"
+ }), "\n", _jsx(_components.h2, {
+ children: "Plain style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "plain"
+ }), "\n", _jsx(_components.h2, {
+ children: "Soft style"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "soft"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " inside a ", _jsx(_components.code, {
+ children: ""
+ }), " to display an icon."]
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The underlying SVG image automatically receives the ", _jsx(_components.code, {
+ children: "aria-hidden=true"
+ }), "\nattribute. Use the ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " attribute at the Button to describe the\nassociated action."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon and text"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "iconText"
+ }), "\n", _jsx(_components.h2, {
+ children: "Small variant"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "small"
+ }), "\n", _jsx(_components.h2, {
+ children: "States"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "states"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+3d:{"title":"Button","menuGroup":"Getting started"}
+3e:{}
+3b:{"compiledSource":"$3c","frontmatter":"$3d","scope":"$3e"}
+3f:{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"}
+40:["02-components","actions","button"]
+42:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+43:{}
+44:{}
+41:{"compiledSource":"$42","frontmatter":"$43","scope":"$44"}
+45:{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"}
+46:["02-components","actions","copy-button"]
+48:T5b1,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Danger"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "danger"
+ }), "\n", _jsx(_components.h2, {
+ children: "Info"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "info"
+ }), "\n", _jsx(_components.h2, {
+ children: "Additional secondary button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "additionalSecondary"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+49:{}
+4a:{}
+47:{"compiledSource":"$48","frontmatter":"$49","scope":"$4a"}
+4b:{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"}
+4c:["02-components","button-group"]
+4e:T96b,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ ul: "ul",
+ li: "li",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.p, {
+ children: "By default columns will be set like this:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[1, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[1, 1, 1]"
+ })]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Custom values"
+ }), "\n", _jsx(_components.p, {
+ children: "Larger sizes will inherit from smaller sizes, if they are not set:"
+ }), "\n", _jsxs(_components.ul, {
+ children: ["\n", _jsxs(_components.li, {
+ children: ["s: ", _jsx(_components.code, {
+ children: "[1]"
+ }), " (default)"]
+ }), "\n", _jsxs(_components.li, {
+ children: ["m: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ })]
+ }), "\n", _jsxs(_components.li, {
+ children: ["l: ", _jsx(_components.code, {
+ children: "[2, 1]"
+ }), " (inherited)"]
+ }), "\n"]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "custom-values"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+4f:{}
+50:{}
+4d:{"compiledSource":"$4e","frontmatter":"$4f","scope":"$50"}
+51:{"custom-values":"import ColumnLayout 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"}
+52:["02-components","column-layout"]
+54:T82a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "With initials"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Initials are automatically created from the text provided to the ", _jsx(_components.code, {
+ children: ""
+ }), "\ncomponent."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With image"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use an ", _jsx(_components.code, {
+ children: ""
+ }), " inside the ", _jsx(_components.code, {
+ children: ""
+ }), " to display a profile image."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "image"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ }), "\n", _jsx(_components.h2, {
+ children: "Color variants"
+ }), "\n", _jsx(_components.p, {
+ children: "The color depends on the components children. This adds some visual variance\nwhen displaying a list of avatars."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "colors"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+55:{}
+56:{}
+53:{"compiledSource":"$54","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:["02-components","content","avatar"]
+5a:T4a2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "button"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+5b:{}
+5c:{}
+59:{"compiledSource":"$5a","frontmatter":"$5b","scope":"$5c"}
+5d:{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"}
+5e:["02-components","content","badge"]
+60:T519,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Levels"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "levels"
+ }), "\n", _jsx(_components.h2, {
+ children: "With icon"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icon"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+61:{}
+62:{}
+5f:{"compiledSource":"$60","frontmatter":"$61","scope":"$62"}
+63:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"}
+64:["02-components","content","heading"]
+66:T72a,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icon from Tabler"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "tabler"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg"
+ }), "\n", _jsx(_components.h2, {
+ children: "With SVG string"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "svg-string"
+ }), "\n", _jsx(_components.h2, {
+ children: "Coloring"
+ }), "\n", _jsx(_components.p, {
+ children: "If the used SVG supports colors, the icon can be colored via CSS."
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "coloring"
+ }), "\n", _jsx(_components.h2, {
+ children: "Sizes"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "sizes"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+67:{}
+68:{}
+65:{"compiledSource":"$66","frontmatter":"$67","scope":"$68"}
+69:{"coloring":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","default":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n;\n","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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"}
+6a:["02-components","content","icon"]
+6c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+6d:{}
+6e:{}
+6b:{"compiledSource":"$6c","frontmatter":"$6d","scope":"$6e"}
+6f:{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"}
+70:["02-components","content","image"]
+72:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+73:{}
+74:{}
+71:{"compiledSource":"$72","frontmatter":"$73","scope":"$74"}
+75:{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"}
+76:["02-components","content","inline-code"]
+78:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+79:{}
+7a:{}
+77:{"compiledSource":"$78","frontmatter":"$79","scope":"$7a"}
+7b:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"}
+7c:["02-components","content","label"]
+7e:T5b2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With copy button"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "copy-button"
+ }), "\n", _jsx(_components.h2, {
+ children: "With link"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "link"
+ }), "\n", _jsx(_components.h2, {
+ children: "With inline code"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline-code"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+7f:{}
+80:{}
+7d:{"compiledSource":"$7e","frontmatter":"$7f","scope":"$80"}
+81:{"copy-button":"import LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Label 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"}
+82:["02-components","content","labeled-value"]
+84:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+85:{}
+86:{}
+83:{"compiledSource":"$84","frontmatter":"$85","scope":"$86"}
+87:{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"}
+88:["02-components","form-controls","checkbox"]
+8a:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+8b:{}
+8c:{}
+89:{"compiledSource":"$8a","frontmatter":"$8b","scope":"$8c"}
+8d:{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"}
+8e:["02-components","form-controls","number-field"]
+90:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+91:{}
+92:{}
+8f:{"compiledSource":"$90","frontmatter":"$91","scope":"$92"}
+93:{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"}
+94:["02-components","form-controls","radio-group"]
+96:T52f,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With leading label"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "leading-label"
+ }), "\n", _jsx(_components.h2, {
+ children: "Disabled"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "disabled"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+97:{}
+98:{}
+95:{"compiledSource":"$96","frontmatter":"$97","scope":"$98"}
+99:{"default":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\nAutoresponder;\n","disabled":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"}
+9a:["02-components","form-controls","switch"]
+9c:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+9d:{}
+9e:{}
+9b:{"compiledSource":"$9c","frontmatter":"$9d","scope":"$9e"}
+9f:{"default":"import Label 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"}
+a0:["02-components","form-controls","text-area"]
+a2:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a3:{}
+a4:{}
+a1:{"compiledSource":"$a2","frontmatter":"$a3","scope":"$a4"}
+a5:{"default":"import Label 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 Start with https://\n;\n"}
+a6:["02-components","form-controls","text-field"]
+a8:T647,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Inline"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: "inline"
+ }), " property if you want to use a link inside a text block. Links\ninside a ", _jsx(_components.code, {
+ children: ""
+ }), " component will be rendered as inline links automatically."]
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inline"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "inlineText"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+a9:{}
+aa:{}
+a7:{"compiledSource":"$a8","frontmatter":"$a9","scope":"$aa"}
+ab:{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"}
+ac:["02-components","navigation","link"]
+ae:T4a0,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With icons"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "icons"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+af:{}
+b0:{}
+ad:{"compiledSource":"$ae","frontmatter":"$af","scope":"$b0"}
+b1:{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"}
+b2:["02-components","navigation","navigation"]
+b4:T520,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsxs(_components.p, {
+ children: ["Use the ", _jsx(_components.code, {
+ children: ""
+ }), " component for your first / most important heading inside\nyour modal, for accessibility."]
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+b5:{}
+b6:{}
+b3:{"compiledSource":"$b4","frontmatter":"$b5","scope":"$b6"}
+b8:T4f0,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 ButtonGroup from "@mittwald/flow-react-components/ButtonGroup";
+import Button from "@mittwald/flow-react-components/Button";
+import Heading from "@mittwald/flow-react-components/Heading";
+
+
+
+
+ {({ close }) => (
+ <>
+ New Customer
+
+
+ Create a new customer to manage your projects,
+ members and payments.
+
+
+
+
+
+
+
+
+
+
+ )}
+
+;
+b7:{"default":"$b8"}
+b9:["02-components","overlays","modal"]
+bb:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+bc:{}
+bd:{}
+ba:{"compiledSource":"$bb","frontmatter":"$bc","scope":"$bd"}
+be:{"default":"import Tooltip, {\n TooltipTrigger,\n} 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 Save\n;\n"}
+bf:["02-components","overlays","tooltip"]
+c1:T524,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "With content"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "with-content"
+ }), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c2:{}
+c3:{}
+c0:{"compiledSource":"$c1","frontmatter":"$c2","scope":"$c3"}
+c5:T4c2,import InlineAlert from "@mittwald/flow-react-components/InlineAlert";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Content from "@mittwald/flow-react-components/Content";
+
+
+
+ Email address has been archived
+
+ As your domain has been deleted, this email address
+ has been archived. To be able to send and receive
+ emails, you must rename the address.
+
+
+
+
+ Storage is almost exceeded
+
+ Your storage space is over 80% utilized. We recommend
+ that you upgrade the storage space to avoid
+ disruptions during backups.
+
+
+
+
+ No SSL certificate could be issued
+
+ No SSL certificate could be issued for this domain
+ because the domain IP does not point to your server
+ IP.
+
+
+
+
+ Your app is up to date
+
+ Your app has been updated to the current version.
+
+
+;
+c4:{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$c5","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"}
+c6:["02-components","status","inline-alert"]
+c8:T49d,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+c9:{}
+ca:{}
+c7:{"compiledSource":"$c8","frontmatter":"$c9","scope":"$ca"}
+cb:{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"}
+cc:["02-components","status","status-badge"]
+ce:T5d2,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ code: "code"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(_components.h3, {
+ children: "Accessibility"
+ }), "\n", _jsxs(_components.p, {
+ children: ["The ", _jsx(_components.code, {
+ children: "aria-label"
+ }), " is pre-filled with a standard translation based on the variant."]
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Status"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+cf:{}
+d0:{}
+cd:{"compiledSource":"$ce","frontmatter":"$cf","scope":"$d0"}
+d1:{"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"}
+d2:["02-components","status","status-icon"]
+d4:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+d5:{}
+d6:{}
+d3:{"compiledSource":"$d4","frontmatter":"$d5","scope":"$d6"}
+d7:{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"}
+d8:["02-components","structure","layout-card"]
+da:T422,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {})]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+db:{}
+dc:{}
+d9:{"compiledSource":"$da","frontmatter":"$db","scope":"$dc"}
+dd:{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"}
+de:["02-components","structure","list"]
+e0:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e1:{}
+e2:{}
+df:{"compiledSource":"$e0","frontmatter":"$e1","scope":"$e2"}
+e4:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+e3:{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e4","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"}
+e5:["02-components","structure","section"]
+6:["$","html",null,{"lang":"en","children":["$","body",null,{"className":"flow layout_body__oiEIT","children":["$","$L8",null,{"children":[["$","header",null,{"className":"layout_header__ttTk7","children":[["$","$L9",null,{"level":1,"className":"layout_heading__marbT","children":["Flow – mittwald Design System"," ",["$","$La",null,{"className":"layout_betaBadge__Rtyuk","status":"warning","children":"beta"}]]}],["$","$Lb",null,{"docs":[{"mdxSource":{"compiledSource":"$c","frontmatter":{"description":"Welcome to the Flow documentation!"},"scope":{}},"examples":{},"slugs":["01-getting-started","installation"],"filename":"01-getting-started/installation/index.mdx"},{"mdxSource":{"compiledSource":"$d","frontmatter":{},"scope":{}},"examples":{"composition":"import ExampleSvg from \"@/content/01-getting-started/stylesheet/examples/components/ExampleSvg\";\n\n;\n","multiple-variants":";\n","variants":";\n"},"slugs":["01-getting-started","stylesheet"],"filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":{"compiledSource":"$e","frontmatter":{"title":"Button","menuGroup":"Getting started"},"scope":{}},"examples":{"default":"import Button from \"@mittwald/flow-react-components/Button\";\n\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","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","variants":"import Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n \n;\n"},"slugs":["02-components","actions","button"],"filename":"02-components/actions/button/index.mdx"},{"mdxSource":{"compiledSource":"$f","frontmatter":{},"scope":{}},"examples":{"default":"import { CopyButton } from \"@mittwald/flow-react-components/CopyButton\";\n\n;\n"},"slugs":["02-components","actions","copy-button"],"filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":{"compiledSource":"$10","frontmatter":{},"scope":{}},"examples":{"additionalSecondary":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n \n;\n","danger":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","default":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n \n;\n","info":"import ButtonGroup from \"@mittwald/flow-react-components/ButtonGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\n\n\n \n;\n"},"slugs":["02-components","button-group"],"filename":"02-components/button-group/index.mdx"},{"mdxSource":{"compiledSource":"$11","frontmatter":{},"scope":{}},"examples":{"custom-values":"import ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\n\n\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"},"slugs":["02-components","column-layout"],"filename":"02-components/column-layout/index.mdx"},{"mdxSource":{"compiledSource":"$12","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":["02-components","content","avatar"],"filename":"02-components/content/avatar/index.mdx"},{"mdxSource":{"compiledSource":"$13","frontmatter":{},"scope":{}},"examples":{"button":"import Badge from \"@mittwald/flow-react-components/Badge\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { IconClose } from \"@mittwald/flow-react-components/Icons\";\n\n\n Badge\n \n;\n","default":"import Badge from \"@mittwald/flow-react-components/Badge\";\n\nBadge;\n"},"slugs":["02-components","content","badge"],"filename":"02-components/content/badge/index.mdx"},{"mdxSource":{"compiledSource":"$14","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\nThis is a heading;\n","icon":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Personal Information\n;\n","levels":"import Heading from \"@mittwald/flow-react-components/Heading\";\n\n<>\n This is a level 1 heading\n This is a level 2 heading\n This is a level 3 heading\n This is a level 4 heading\n This is a level 5 heading\n;\n"},"slugs":["02-components","content","heading"],"filename":"02-components/content/heading/index.mdx"},{"mdxSource":{"compiledSource":"$15","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","sizes":"import { IconHome } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n \n;\n","svg-string":"import Icon from \"@mittwald/flow-react-components/Icon\";\n\n() => {\n const svgString = `\\\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":["02-components","content","icon"],"filename":"02-components/content/icon/index.mdx"},{"mdxSource":{"compiledSource":"$16","frontmatter":{},"scope":{}},"examples":{"default":"import Image from \"@mittwald/flow-react-components/Image\";\n\n;\n"},"slugs":["02-components","content","image"],"filename":"02-components/content/image/index.mdx"},{"mdxSource":{"compiledSource":"$17","frontmatter":{},"scope":{}},"examples":{"default":"import Text from \"@mittwald/flow-react-components/Text\";\nimport InlineCode from \"@mittwald/flow-react-components/InlineCode\";\n\n\n Enter yarn start to start your\n app.\n;\n"},"slugs":["02-components","content","inline-code"],"filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":{"compiledSource":"$18","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\n\n;\n"},"slugs":["02-components","content","label"],"filename":"02-components/content/label/index.mdx"},{"mdxSource":{"compiledSource":"$19","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":["02-components","content","labeled-value"],"filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":{"compiledSource":"$1a","frontmatter":{},"scope":{}},"examples":{"default":"import Checkbox from \"@mittwald/flow-react-components/Checkbox\";\n\nActivate spam protection;\n"},"slugs":["02-components","form-controls","checkbox"],"filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":{"compiledSource":"$1b","frontmatter":{},"scope":{}},"examples":{"default":"import NumberField from \"@mittwald/flow-react-components/NumberField\";\n\n;\n"},"slugs":["02-components","form-controls","number-field"],"filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":{"compiledSource":"$1c","frontmatter":{},"scope":{}},"examples":{"default":"import Label from \"@mittwald/flow-react-components/Label\";\nimport RadioGroup, {\n Radio,\n} from \"@mittwald/flow-react-components/RadioGroup\";\n\n\n \n Admin\n Member\n Accountant\n;\n"},"slugs":["02-components","form-controls","radio-group"],"filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":{"compiledSource":"$1d","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\n\n Autoresponder\n;\n","leading-label":"import Switch from \"@mittwald/flow-react-components/Switch\";\n\n\n Autoresponder\n;\n"},"slugs":["02-components","form-controls","switch"],"filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":{"compiledSource":"$1e","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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"},"slugs":["02-components","form-controls","text-area"],"filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":{"compiledSource":"$1f","frontmatter":{},"scope":{}},"examples":{"default":"import Label 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 Start with https://\n;\n"},"slugs":["02-components","form-controls","text-field"],"filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":{"compiledSource":"$20","frontmatter":{},"scope":{}},"examples":{"default":"import Link from \"@mittwald/flow-react-components/Link\";\n\nThis is a link;\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 Check our onboarding for more\n information.\n;\n"},"slugs":["02-components","navigation","link"],"filename":"02-components/navigation/link/index.mdx"},{"mdxSource":{"compiledSource":"$21","frontmatter":{},"scope":{}},"examples":{"default":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\n\n\n \n Apple\n \n \n mittwald\n \n \n Adobe\n \n \n Google\n \n;\n","icons":"import Navigation, {\n NavigationItem,\n} from \"@mittwald/flow-react-components/Navigation\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport {\n IconCustomer,\n IconProject,\n IconServer,\n} from \"@mittwald/flow-react-components/Icons\";\n\n\n \n \n Customer\n \n \n \n Server\n \n \n \n Project\n \n;\n"},"slugs":["02-components","navigation","navigation"],"filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":{"compiledSource":"$22","frontmatter":{},"scope":{}},"examples":{"default":"$23"},"slugs":["02-components","overlays","modal"],"filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":{"compiledSource":"$24","frontmatter":{},"scope":{}},"examples":{"default":"import Tooltip, {\n TooltipTrigger,\n} from \"@mittwald/flow-react-components/Tooltip\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { IconCopy } from \"@mittwald/flow-react-components/Icons\";\n\n\n \n Save\n;\n"},"slugs":["02-components","overlays","tooltip"],"filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":{"compiledSource":"$25","frontmatter":{},"scope":{}},"examples":{"default":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\n\n\n Email address has been archived\n;\n","status":"$26","with-content":"import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\n Email address has been archived\n \n As your domain has been deleted, this email address has\n been archived. To be able to send and receive emails,\n you must rename the address.\n \n;\n"},"slugs":["02-components","status","inline-alert"],"filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":{"compiledSource":"$27","frontmatter":{},"scope":{}},"examples":{"default":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\nInfo;\n","status":"import StatusBadge from \"@mittwald/flow-react-components/StatusBadge\";\n\n\n Info\n Success\n Warning\n Danger\n;\n"},"slugs":["02-components","status","status-badge"],"filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":{"compiledSource":"$28","frontmatter":{},"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":["02-components","status","status-icon"],"filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":{"compiledSource":"$29","frontmatter":{},"scope":{}},"examples":{"default":"import LayoutCard from \"@mittwald/flow-react-components/LayoutCard\";\n\n\n Layout Card is a structure element that can contain any\n content\n;\n"},"slugs":["02-components","structure","layout-card"],"filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":{"compiledSource":"$2a","frontmatter":{},"scope":{}},"examples":{"default":"import {\n List,\n ListItemView,\n ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n type User,\n users,\n} from \"@/content/02-components/structure/list/examples/userApi\";\n\n\n \n >\n {(user) => (\n <>\n {user.name.first} {user.name.last}\n \n )}\n \n;\n"},"slugs":["02-components","structure","list"],"filename":"02-components/structure/list/index.mdx"},{"mdxSource":{"compiledSource":"$2b","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$2c","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}]}]]}],["$","div",null,{"className":"layout_center__e1uqg","children":[["$","$L2d",null,{"className":"layout_nav__ZiJaj","children":["$","$L2e",null,{"docs":[{"mdxSource":"$2f","examples":"$33","slugs":"$34","filename":"01-getting-started/installation/index.mdx"},{"mdxSource":"$35","examples":"$39","slugs":"$3a","filename":"01-getting-started/stylesheet/index.mdx"},{"mdxSource":"$3b","examples":"$3f","slugs":"$40","filename":"02-components/actions/button/index.mdx"},{"mdxSource":"$41","examples":"$45","slugs":"$46","filename":"02-components/actions/copy-button/index.mdx"},{"mdxSource":"$47","examples":"$4b","slugs":"$4c","filename":"02-components/button-group/index.mdx"},{"mdxSource":"$4d","examples":"$51","slugs":"$52","filename":"02-components/column-layout/index.mdx"},{"mdxSource":"$53","examples":"$57","slugs":"$58","filename":"02-components/content/avatar/index.mdx"},{"mdxSource":"$59","examples":"$5d","slugs":"$5e","filename":"02-components/content/badge/index.mdx"},{"mdxSource":"$5f","examples":"$63","slugs":"$64","filename":"02-components/content/heading/index.mdx"},{"mdxSource":"$65","examples":"$69","slugs":"$6a","filename":"02-components/content/icon/index.mdx"},{"mdxSource":"$6b","examples":"$6f","slugs":"$70","filename":"02-components/content/image/index.mdx"},{"mdxSource":"$71","examples":"$75","slugs":"$76","filename":"02-components/content/inline-code/index.mdx"},{"mdxSource":"$77","examples":"$7b","slugs":"$7c","filename":"02-components/content/label/index.mdx"},{"mdxSource":"$7d","examples":"$81","slugs":"$82","filename":"02-components/content/labeled-value/index.mdx"},{"mdxSource":"$83","examples":"$87","slugs":"$88","filename":"02-components/form-controls/checkbox/index.mdx"},{"mdxSource":"$89","examples":"$8d","slugs":"$8e","filename":"02-components/form-controls/number-field/index.mdx"},{"mdxSource":"$8f","examples":"$93","slugs":"$94","filename":"02-components/form-controls/radio-group/index.mdx"},{"mdxSource":"$95","examples":"$99","slugs":"$9a","filename":"02-components/form-controls/switch/index.mdx"},{"mdxSource":"$9b","examples":"$9f","slugs":"$a0","filename":"02-components/form-controls/text-area/index.mdx"},{"mdxSource":"$a1","examples":"$a5","slugs":"$a6","filename":"02-components/form-controls/text-field/index.mdx"},{"mdxSource":"$a7","examples":"$ab","slugs":"$ac","filename":"02-components/navigation/link/index.mdx"},{"mdxSource":"$ad","examples":"$b1","slugs":"$b2","filename":"02-components/navigation/navigation/index.mdx"},{"mdxSource":"$b3","examples":"$b7","slugs":"$b9","filename":"02-components/overlays/modal/index.mdx"},{"mdxSource":"$ba","examples":"$be","slugs":"$bf","filename":"02-components/overlays/tooltip/index.mdx"},{"mdxSource":"$c0","examples":"$c4","slugs":"$c6","filename":"02-components/status/inline-alert/index.mdx"},{"mdxSource":"$c7","examples":"$cb","slugs":"$cc","filename":"02-components/status/status-badge/index.mdx"},{"mdxSource":"$cd","examples":"$d1","slugs":"$d2","filename":"02-components/status/status-icon/index.mdx"},{"mdxSource":"$d3","examples":"$d7","slugs":"$d8","filename":"02-components/structure/layout-card/index.mdx"},{"mdxSource":"$d9","examples":"$dd","slugs":"$de","filename":"02-components/structure/list/index.mdx"},{"mdxSource":"$df","examples":"$e3","slugs":"$e5","filename":"02-components/structure/section/index.mdx"}]}]}],["$","$L2d",null,{"elementType":"main","className":"layout_main__30FUz","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"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}]}]]}]]}]}]}]
+e7:T5b6,/*@jsxRuntime automatic @jsxImportSource react*/
+const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
+const {useMDXComponents: _provideComponents} = arguments[0];
+function _createMdxContent(props) {
+ const _components = Object.assign({
+ h2: "h2"
+ }, _provideComponents(), props.components), {LiveCodeEditor} = _components;
+ if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true);
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ children: "Example"
+ }), "\n", _jsx(LiveCodeEditor, {}), "\n", _jsx(_components.h2, {
+ children: "Multiple Sections"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "multiple"
+ }), "\n", _jsx(_components.h2, {
+ children: "With status badge"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "status-badge"
+ }), "\n", _jsx(_components.h2, {
+ children: "With switch"
+ }), "\n", _jsx(LiveCodeEditor, {
+ example: "switch"
+ })]
+ });
+}
+function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+ return MDXLayout ? _jsx(MDXLayout, Object.assign({}, 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.");
+}
+e8:T417,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";
+
+<>
+
+
+
+ Personal Information
+
+
+
+
+
+
+
+
+
+ Newsletter
+
+ Upcoming releases, new features and tips about your
+ hosting - we bring you the most important information
+ in your inbox. Subscribe to our newsletter and stay up
+ to date.
+
+ Subscribe
+
+;
+2:[["$","$L9",null,{"className":"MainContent_heading__Szef0","level":1,"children":"Section"}],"$undefined",["$","$Le6",null,{"mdxFile":{"mdxSource":{"compiledSource":"$e7","frontmatter":{},"scope":{}},"examples":{"default":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\n\n\n Newsletter\n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n Subscribe\n;\n","multiple":"$e8","status-badge":"import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Section 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 Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\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 Subscription\n \n \n Upcoming releases, new features and tips about your\n hosting - we bring the most important information to\n inbox. Subscribe to our newsletter and stay up to date.\n \n;\n"},"slugs":["02-components","structure","section"],"filename":"02-components/structure/section/index.mdx"}}]]
+7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Section"}],["$","link","3",{"rel":"icon","href":"/flow-previews/docs/badge/favicon.ico","type":"image/x-icon","sizes":"48x48"}]]
+1:null
diff --git a/docs/badge/404.html b/docs/badge/404.html
new file mode 100644
index 0000000000..86310bb875
--- /dev/null
+++ b/docs/badge/404.html
@@ -0,0 +1 @@
+404: This page could not be found.Flow – mittwald Design System
is wrapped in a . If you aren't using column resizing, you can set the width of a column with CSS.`);let c=e.props,{hoverProps:v,isHovered:p}=$dGqE5$useHover({isDisabled:!c.allowsSorting}),f=ep({...c,id:void 0,children:e.rendered,defaultClassName:"react-aria-Column",values:{isHovered:p,isFocused:l,isFocusVisible:o,allowsSorting:e.props.allowsSorting,sortDirection:(null===(t=a.sortDescriptor)||void 0===t?void 0:t.column)===e.key?a.sortDescriptor.direction:void 0,isResizing:u,startResize:()=>{if(d)d.startResize(e.key),a.setKeyboardNavigationDisabled(!0);else throw Error("Wrap your
in a to enable column resizing")},sort:t=>{a.sort(e.key,t)}}}),m=f.style;return d&&(m={...m,width:d.getColumnWidth(e.key)}),$dGqE5$react.createElement("th",{...$dGqE5$mergeProps($dGqE5$filterDOMProps(c),s,n,v),...f,style:m,colSpan:e.colspan,ref:r,"data-hovered":p||void 0,"data-focused":l||void 0,"data-focus-visible":o||void 0,"data-resizing":u||void 0,"data-allows-sorting":e.props.allowsSorting||void 0,"data-sort-direction":(null===(i=a.sortDescriptor)||void 0===i?void 0:i.column)===e.key?a.sortDescriptor.direction:void 0},$dGqE5$react.createElement(null.Provider,{value:{column:e,triggerRef:r}},f.children))}function tb({cell:e}){let t=$dGqE5$useObjectRef(e.props.ref),i=$dGqE5$useContext(null),{dragState:r}=$dGqE5$useContext(ez);e.column=i.collection.columns[e.index];let{gridCellProps:a,isPressed:s}=$dGqE5$useTableCell({node:e,shouldSelectOnPressUp:!!r},i,t),{isFocused:l,isFocusVisible:o,focusProps:n}=$dGqE5$useFocusRing(),{hoverProps:d,isHovered:u}=$dGqE5$useHover({}),c=e.props,v=ep({...c,id:void 0,defaultClassName:"react-aria-Cell",values:{isFocused:l,isFocusVisible:o,isPressed:s,isHovered:u}});return $dGqE5$react.createElement("td",{...$dGqE5$mergeProps($dGqE5$filterDOMProps(c),a,n,d),...v,ref:t,"data-focused":l||void 0,"data-focus-visible":o||void 0,"data-pressed":s||void 0},v.children)}let ty=(0,ea.createContext)({}),tE=e=>{let{onHoverStart:t,onHoverChange:i,onHoverEnd:r,...a}=e;return a},tg=(0,ea.forwardRef)(function(e,t){[e,t]=em(e,t,ty);let{hoverProps:i,isHovered:r}=(0,V.XI)(e),{isFocused:a,isFocusVisible:s,focusProps:l}=(0,B.Fx)({isTextInput:!0,autoFocus:e.autoFocus}),o=!!e["aria-invalid"]&&"false"!==e["aria-invalid"],n=ep({...e,values:{isHovered:r,isFocused:a,isFocusVisible:s,isDisabled:e.disabled||!1,isInvalid:o},defaultClassName:"react-aria-TextArea"});return ea.createElement("textarea",{...(0,Z.dG)(tE(e),l,i),...n,ref:t,"data-focused":a||void 0,"data-disabled":e.disabled||void 0,"data-hovered":r||void 0,"data-focus-visible":s||void 0,"data-invalid":o||void 0})}),t$=(0,ea.createContext)(null),tC=(0,ea.forwardRef)(function(e,t){var i;[e,t]=em(e,t,t$);let r=(0,ea.useRef)(null),[a,s]=eh(),[l,o]=(0,ea.useState)("input"),{labelProps:n,inputProps:d,descriptionProps:u,errorMessageProps:c,...v}=(0,J.E)({...eC(e),inputElementType:l,label:s,validationBehavior:null!==(i=e.validationBehavior)&&void 0!==i?i:"native"},r),p=(0,ea.useCallback)(e=>{r.current=e,e&&o(e instanceof HTMLTextAreaElement?"textarea":"input")},[]),f=ep({...e,values:{isDisabled:e.isDisabled||!1,isInvalid:v.isInvalid},defaultClassName:"react-aria-TextField"});return ea.createElement("div",{...(0,Z.zL)(e),...f,ref:t,slot:e.slot||void 0,"data-disabled":e.isDisabled||void 0,"data-invalid":v.isInvalid||void 0},ea.createElement(ev,{values:[[eM,{...n,ref:a}],[eL,{...d,ref:p}],[ty,{...d,ref:p}],[eN,{slots:{description:u,errorMessage:c}}],[eS,v]]},f.children))}),tx=(0,ea.createContext)(null),tP=(0,ea.createContext)(null);function tR(e){let t=(0,er.O)(e),i=(0,ea.useRef)(null),{triggerProps:r,tooltipProps:a}=(0,Q.Q)(e,t,i);return ea.createElement(ev,{values:[[tx,t],[tP,{...a,triggerRef:i}]]},ea.createElement(B.tB,{...r,ref:i},e.children))}let tD=(0,ea.forwardRef)(function({UNSTABLE_portalContainer:e,...t},i){[t,i]=em(t,i,tP);let r=(0,ea.useContext)(tx),a=(0,er.O)(t),s=null==t.isOpen&&null==t.defaultOpen&&r?r:a,l=ey(i,s.isOpen)||t.isExiting||!1;return s.isOpen||l?ea.createElement(z.Xj,{portalContainer:e},ea.createElement(tq,{...t,tooltipRef:i,isExiting:l})):null});function tq(e){let t=(0,ea.useContext)(tx),{overlayProps:i,arrowProps:r,placement:a}=(0,z.tN)({placement:e.placement||"top",targetRef:e.triggerRef,overlayRef:e.tooltipRef,offset:e.offset,crossOffset:e.crossOffset,isOpen:t.isOpen}),s=eb(e.tooltipRef,!!a)||e.isEntering||!1,l=ep({...e,defaultClassName:"react-aria-Tooltip",values:{placement:a,isEntering:s,isExiting:e.isExiting,state:t}});e=(0,Z.dG)(e,i);let{tooltipProps:o}=(0,Q.l)(e,t);return ea.createElement("div",{...o,ref:e.tooltipRef,...l,style:{...i.style,...l.style},"data-placement":a,"data-entering":s||void 0,"data-exiting":e.isExiting||void 0},ea.createElement(eQ.Provider,{value:{...r,placement:a}},l.children))}}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/402.5bee430b580b222f.js b/docs/badge/_next/static/chunks/402.5bee430b580b222f.js
new file mode 100644
index 0000000000..8bb9428be4
--- /dev/null
+++ b/docs/badge/_next/static/chunks/402.5bee430b580b222f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[402],{85402:function(e,t,n){n.r(t),n.d(t,{FieldDescription:function(){return s},default:function(){return s}});var l=n(20934),r=n(960886),i=n(563946);n(625464);var c=n(160941);let s=(0,n(317467).f)("FieldDescription",e=>{let{children:t,className:n,...s}=e,u=(0,r.Z)("flow--field-description",n);return l.createElement(i.C,null,l.createElement(c.T,{slot:"description",...s,className:u},t))})}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/430.7af2a4a8ff6379bb.js b/docs/badge/_next/static/chunks/430.7af2a4a8ff6379bb.js
new file mode 100644
index 0000000000..f29eafdf0b
--- /dev/null
+++ b/docs/badge/_next/static/chunks/430.7af2a4a8ff6379bb.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[430],{971410:function(e,l,r){r.d(l,{F:function(){return s}});var t=r(20934),n=r(166858),i=r(960886),a=r(563946);r(625464),r(520820);var o=r(317467),c=r(973470);let s=(0,o.f)("FieldError",e=>{let{children:l,className:r,...o}=e,s=(0,i.Z)("flow--field-error",r);return t.createElement(a.C,null,t.createElement(n.cp,{...o,className:s},e=>{let{validationErrors:r}=e;return t.createElement(t.Fragment,null,t.createElement(c.I,{size:"s"}),t.createElement("span",null,l||r.join(" ")))}))})},795062:function(e,l,r){r.d(l,{s:function(){return t}});let t={formField:"flow--form-field",label:"flow--form-field--label",fieldError:"flow--form-field--field-error",customFieldError:"flow--form-field--custom-field-error",fieldDescription:"flow--form-field--field-description"}},376430:function(e,l,r){r.r(l),r.d(l,{TextField:function(){return o},default:function(){return o}});var t=r(20934),n=r(166858),i=r(443104),a=r(563946);r(625464);let o=e=>{let{children:l,placeholder:r,...o}=e,c=t.createElement(n.II,{placeholder:r,className:"flow--text-field"});return t.createElement(a.C,null,t.createElement(i.T,{...o,input:c},l))}},443104:function(e,l,r){r.d(l,{T:function(){return f}});var t=r(20934),n=r(166858),i=r(795062),a=r(960886),o=r(563946),c=r(872690);r(625464);var s=r(971410);let f=e=>{let{children:l,className:r,input:f,...d}=e,u=(0,a.Z)(i.s.formField,r),m={Label:{className:i.s.label,optional:!e.isRequired},FieldDescription:{className:i.s.fieldDescription},FieldError:{className:i.s.customFieldError}};return t.createElement(o.C,null,t.createElement(n.nv,{...d,className:u},f,t.createElement(c.P,{props:m},l),t.createElement(s.F,{className:i.s.fieldError})))}}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/437.a68cfc16832c7e59.js b/docs/badge/_next/static/chunks/437.a68cfc16832c7e59.js
new file mode 100644
index 0000000000..b55c2e977c
--- /dev/null
+++ b/docs/badge/_next/static/chunks/437.a68cfc16832c7e59.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[437],{293437:function(a,t,e){e.r(t),e.d(t,{Avatar:function(){return f},default:function(){return f}});var r=e(20934),i=e(960886),l=e(563946),s=e(872690);e(625464);var n=e(542505),v=e(229350);let o={avatar:"flow--avatar",icon:"flow--avatar--icon",initials:"flow--avatar--initials","size-m":"flow--avatar--size-m","size-xs":"flow--avatar--size-xs","size-s":"flow--avatar--size-s","size-l":"flow--avatar--size-l","variant-1":"flow--avatar--variant-1","variant-2":"flow--avatar--variant-2","variant-3":"flow--avatar--variant-3","variant-4":"flow--avatar--variant-4"},c=a=>{let t=[];return(0,v.Z)(a,a=>{(0,r.isValidElement)(a)?t.push({props:a.props,type:a.type}):t.push(a)}),Math.abs((0,n.v)(t)%4)+1},f=a=>{let{children:t,className:e,size:n="m"}=a,v=(0,i.Z)("flow--avatar",o["size-".concat(n)],e,o["variant-".concat(c(t))]);return r.createElement(l.C,null,r.createElement("div",{className:v},r.createElement(s.P,{props:{Initials:{className:"flow--avatar--initials"},Icon:{className:"flow--avatar--icon"}}},t)))}}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/49.87ef728e2476b3fd.js b/docs/badge/_next/static/chunks/49.87ef728e2476b3fd.js
new file mode 100644
index 0000000000..dbdc4550fb
--- /dev/null
+++ b/docs/badge/_next/static/chunks/49.87ef728e2476b3fd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[49],{931049:function(n,u,t){t.r(u),t.d(u,{Button:function(){return e.B},default:function(){return e.B}});var e=t(285359)}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/50.e698b516ebdaddb8.js b/docs/badge/_next/static/chunks/50.e698b516ebdaddb8.js
new file mode 100644
index 0000000000..7309be4d3e
--- /dev/null
+++ b/docs/badge/_next/static/chunks/50.e698b516ebdaddb8.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50],{1284:function(e,r,n){n.d(r,{Z:function(){return t}});var t=(0,n(554558).Z)("minus","IconMinus",[["path",{d:"M5 12l14 0",key:"svg-0"}]])},57370:function(e,r,n){n.d(r,{Z:function(){return t}});var t=(0,n(554558).Z)("plus","IconPlus",[["path",{d:"M12 5l0 14",key:"svg-0"}],["path",{d:"M5 12l14 0",key:"svg-1"}]])},971410:function(e,r,n){n.d(r,{F:function(){return s}});var t=n(20934),l=n(166858),a=n(960886),c=n(563946);n(625464),n(520820);var o=n(317467),i=n(973470);let s=(0,o.f)("FieldError",e=>{let{children:r,className:n,...o}=e,s=(0,a.Z)("flow--field-error",n);return t.createElement(c.C,null,t.createElement(l.cp,{...o,className:s},e=>{let{validationErrors:n}=e;return t.createElement(t.Fragment,null,t.createElement(i.I,{size:"s"}),t.createElement("span",null,r||n.join(" ")))}))})},795062:function(e,r,n){n.d(r,{s:function(){return t}});let t={formField:"flow--form-field",label:"flow--form-field--label",fieldError:"flow--form-field--field-error",customFieldError:"flow--form-field--custom-field-error",fieldDescription:"flow--form-field--field-description"}},246848:function(e,r,n){n.d(r,{I:function(){return o},a:function(){return i}});var t=n(20934),l=n(1284),a=n(57370),c=n(552360);let o=e=>t.createElement(c.I,{...e},t.createElement(l.Z,null)),i=e=>t.createElement(c.I,{...e},t.createElement(a.Z,null))},245050:function(e,r,n){n.r(r),n.d(r,{NumberField:function(){return E},default:function(){return E}});var t=n(20934),l=n(166858),a=n(795062),c=n(960886),o=n(563946),i=n(872690);n(625464);var s=n(971410),u=n(285359);n(520820),n(915717);var m=n(315833),f=n(246848);let d={group:"flow--number-field--group",input:"flow--number-field--input",decrementButton:"flow--number-field--decrement-button",incrementButton:"flow--number-field--increment-button",coarsePointerIcon:"flow--number-field--coarse-pointer-icon"},E=e=>{let{children:r,className:n,...E}=e,p=(0,c.Z)(a.s.formField,n),N={Label:{className:a.s.label,optional:!e.isRequired},FieldDescription:{className:a.s.fieldDescription},FieldError:{className:a.s.customFieldError}};return t.createElement(o.C,null,t.createElement(l.Ki,{...E,className:p},t.createElement(l.ZA,{className:d.group},t.createElement(u.B,{slot:"decrement",className:d.decrementButton,size:"s",style:"plain",variant:"secondary"},t.createElement(m.I,null),t.createElement(f.I,{className:d.coarsePointerIcon})),t.createElement(l.II,{className:d.input}),t.createElement(u.B,{slot:"increment",className:d.incrementButton,size:"s",style:"plain",variant:"secondary"},t.createElement(m.a,null),t.createElement(f.a,{className:d.coarsePointerIcon}))),t.createElement(i.P,{props:N},r),t.createElement(s.F,{className:a.s.fieldError})))}}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/506.2fcf6ada4580fd96.js b/docs/badge/_next/static/chunks/506.2fcf6ada4580fd96.js
new file mode 100644
index 0000000000..ceb1e7f29b
--- /dev/null
+++ b/docs/badge/_next/static/chunks/506.2fcf6ada4580fd96.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[506],{270506:function(n,e,l){l.r(e),l.d(e,{Link:function(){return f},default:function(){return f}});var i=l(20934),r=l(166858),a=l(563946);l(625464);var t=l(960886),k=l(317467);let u={link:"flow--link",inline:"flow--link--inline",primary:"flow--link--primary",danger:"flow--link--danger"},f=(0,k.f)("Link",n=>{let{children:e,className:l,variant:k="default",inline:f,linkComponent:c=r.rU,...o}=n,s=(0,t.Z)(u.link,u[k],f&&u.inline,l);return i.createElement(a.C,null,i.createElement(c,{className:s,...o},e))})}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/521.f245ade3a5f76722.js b/docs/badge/_next/static/chunks/521.f245ade3a5f76722.js
new file mode 100644
index 0000000000..a4f2db1278
--- /dev/null
+++ b/docs/badge/_next/static/chunks/521.f245ade3a5f76722.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[521],{971410:function(e,r,l){l.d(r,{F:function(){return s}});var t=l(20934),a=l(166858),o=l(960886),n=l(563946);l(625464),l(520820);var i=l(317467),c=l(973470);let s=(0,i.f)("FieldError",e=>{let{children:r,className:l,...i}=e,s=(0,o.Z)("flow--field-error",l);return t.createElement(n.C,null,t.createElement(a.cp,{...i,className:s},e=>{let{validationErrors:l}=e;return t.createElement(t.Fragment,null,t.createElement(c.I,{size:"s"}),t.createElement("span",null,r||l.join(" ")))}))})},795062:function(e,r,l){l.d(r,{s:function(){return t}});let t={formField:"flow--form-field",label:"flow--form-field--label",fieldError:"flow--form-field--field-error",customFieldError:"flow--form-field--custom-field-error",fieldDescription:"flow--form-field--field-description"}},649374:function(e,r,l){l.d(r,{I:function(){return n}});var t=l(20934),a=l(719546),o=l(552360);let n=e=>t.createElement(o.I,{...e},t.createElement(a.Z,null))},523521:function(e,r,l){l.r(r),l.d(r,{Radio:function(){return m},RadioGroup:function(){return f},default:function(){return f}});var t=l(20934),a=l(166858),o=l(960886);l(625464);var n=l(872690),i=l(971410),c=l(915717),s=l(795062);l(520820);var d=l(649374);let f=e=>{let{children:r,className:l,...d}=e,f=(0,o.Z)("flow--radio-group",s.s.formField,l),m={Label:{className:s.s.label,tunnelId:"label"},FieldDescription:{className:s.s.fieldDescription,tunnelId:"fieldDescription"},FieldError:{className:s.s.customFieldError,tunnelId:"fieldError"}};return t.createElement(a.Ee,{...d,className:f},t.createElement(n.P,{props:m},t.createElement(c.NN,null,t.createElement(c.Rz,{id:"label"}),t.createElement("div",{className:"flow--radio-group--radio-options"},r),t.createElement(c.Rz,{id:"fieldDescription"}),t.createElement(c.Rz,{id:"fieldError"}))),t.createElement(i.F,{className:s.s.fieldError}))},m=e=>{let{children:r,className:l,...i}=e,c=(0,o.Z)("flow--radio-group--radio",l);return t.createElement(a.Y8,{...i,className:c},t.createElement(n.P,{props:{Icon:{className:"flow--radio-group--radio--icon"},Text:{className:"flow--radio-group--radio--label"},Content:{className:"flow--radio-group--radio--content"}}},r),t.createElement(d.I,{className:"flow--radio-group--radio--checkmark"}))}}}]);
\ No newline at end of file
diff --git a/docs/badge/_next/static/chunks/530-d26691cd436c7330.js b/docs/badge/_next/static/chunks/530-d26691cd436c7330.js
new file mode 100644
index 0000000000..289307e3bb
--- /dev/null
+++ b/docs/badge/_next/static/chunks/530-d26691cd436c7330.js
@@ -0,0 +1,131 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[530],{719546:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("check","IconCheck",[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]])},197976:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("chevron-down","IconChevronDown",[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]])},574405:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("chevron-up","IconChevronUp",[["path",{d:"M6 15l6 -6l6 6",key:"svg-0"}]])},794579:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]])},64300:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("loader-2","IconLoader2",[["path",{d:"M12 3a9 9 0 1 0 9 9",key:"svg-0"}]])},406773:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(554558).Z)("x","IconX",[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]])},301365:function(e,t,n){"use strict";var r,s;e.exports=(null==(r=n.g.process)?void 0:r.env)&&"object"==typeof(null==(s=n.g.process)?void 0:s.env)?n.g.process:n(744065)},657223:function(e){!function(){var t={675:function(e,t){"use strict";t.byteLength=function(e){var t=l(e),n=t[0],r=t[1];return(n+r)*3/4-r},t.toByteArray=function(e){var t,n,i=l(e),o=i[0],a=i[1],u=new s((o+a)*3/4-a),c=0,h=a>0?o-4:o;for(n=0;n>16&255,u[c++]=t>>8&255,u[c++]=255&t;return 2===a&&(t=r[e.charCodeAt(n)]<<2|r[e.charCodeAt(n+1)]>>4,u[c++]=255&t),1===a&&(t=r[e.charCodeAt(n)]<<10|r[e.charCodeAt(n+1)]<<4|r[e.charCodeAt(n+2)]>>2,u[c++]=t>>8&255,u[c++]=255&t),u},t.fromByteArray=function(e){for(var t,r=e.length,s=r%3,i=[],o=0,a=r-s;o>18&63]+n[s>>12&63]+n[s>>6&63]+n[63&s]);return i.join("")}(e,o,o+16383>a?a:o+16383));return 1===s?i.push(n[(t=e[r-1])>>2]+n[t<<4&63]+"=="):2===s&&i.push(n[(t=(e[r-2]<<8)+e[r-1])>>10]+n[t>>4&63]+n[t<<2&63]+"="),i.join("")};for(var n=[],r=[],s="undefined"!=typeof Uint8Array?Uint8Array:Array,i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o=0,a=i.length;o0)throw Error("Invalid string. Length must be a multiple of 4");var n=e.indexOf("=");-1===n&&(n=t);var r=n===t?0:4-n%4;return[n,r]}r["-".charCodeAt(0)]=62,r["_".charCodeAt(0)]=63},72:function(e,t,n){"use strict";/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author Feross Aboukhadijeh
+ * @license MIT
+ */var r=n(675),s=n(783),i="function"==typeof Symbol&&"function"==typeof Symbol.for?Symbol.for("nodejs.util.inspect.custom"):null;function o(e){if(e>2147483647)throw RangeError('The value "'+e+'" is invalid for option "size"');var t=new Uint8Array(e);return Object.setPrototypeOf(t,a.prototype),t}function a(e,t,n){if("number"==typeof e){if("string"==typeof t)throw TypeError('The "string" argument must be of type string. Received type number');return c(e)}return l(e,t,n)}function l(e,t,n){if("string"==typeof e)return function(e,t){if(("string"!=typeof t||""===t)&&(t="utf8"),!a.isEncoding(t))throw TypeError("Unknown encoding: "+t);var n=0|d(e,t),r=o(n),s=r.write(e,t);return s!==n&&(r=r.slice(0,s)),r}(e,t);if(ArrayBuffer.isView(e))return h(e);if(null==e)throw TypeError("The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type "+typeof e);if(I(e,ArrayBuffer)||e&&I(e.buffer,ArrayBuffer)||"undefined"!=typeof SharedArrayBuffer&&(I(e,SharedArrayBuffer)||e&&I(e.buffer,SharedArrayBuffer)))return function(e,t,n){var r;if(t<0||e.byteLength=2147483647)throw RangeError("Attempt to allocate Buffer larger than maximum size: 0x7fffffff bytes");return 0|e}function d(e,t){if(a.isBuffer(e))return e.length;if(ArrayBuffer.isView(e)||I(e,ArrayBuffer))return e.byteLength;if("string"!=typeof e)throw TypeError('The "string" argument must be one of type string, Buffer, or ArrayBuffer. Received type '+typeof e);var n=e.length,r=arguments.length>2&&!0===arguments[2];if(!r&&0===n)return 0;for(var s=!1;;)switch(t){case"ascii":case"latin1":case"binary":return n;case"utf8":case"utf-8":return E(e).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*n;case"hex":return n>>>1;case"base64":return C(e).length;default:if(s)return r?-1:E(e).length;t=(""+t).toLowerCase(),s=!0}}function f(e,t,n){var s,i,o=!1;if((void 0===t||t<0)&&(t=0),t>this.length||((void 0===n||n>this.length)&&(n=this.length),n<=0||(n>>>=0)<=(t>>>=0)))return"";for(e||(e="utf8");;)switch(e){case"hex":return function(e,t,n){var r=e.length;(!t||t<0)&&(t=0),(!n||n<0||n>r)&&(n=r);for(var s="",i=t;i2147483647?n=2147483647:n<-2147483648&&(n=-2147483648),(i=n=+n)!=i&&(n=s?0:e.length-1),n<0&&(n=e.length+n),n>=e.length){if(s)return -1;n=e.length-1}else if(n<0){if(!s)return -1;n=0}if("string"==typeof t&&(t=a.from(t,r)),a.isBuffer(t))return 0===t.length?-1:y(e,t,n,r,s);if("number"==typeof t)return(t&=255,"function"==typeof Uint8Array.prototype.indexOf)?s?Uint8Array.prototype.indexOf.call(e,t,n):Uint8Array.prototype.lastIndexOf.call(e,t,n):y(e,[t],n,r,s);throw TypeError("val must be string, number or Buffer")}function y(e,t,n,r,s){var i,o=1,a=e.length,l=t.length;if(void 0!==r&&("ucs2"===(r=String(r).toLowerCase())||"ucs-2"===r||"utf16le"===r||"utf-16le"===r)){if(e.length<2||t.length<2)return -1;o=2,a/=2,l/=2,n/=2}function u(e,t){return 1===o?e[t]:e.readUInt16BE(t*o)}if(s){var c=-1;for(i=n;ia&&(n=a-l),i=n;i>=0;i--){for(var h=!0,p=0;p239?4:u>223?3:u>191?2:1;if(s+h<=n)switch(h){case 1:u<128&&(c=u);break;case 2:(192&(i=e[s+1]))==128&&(l=(31&u)<<6|63&i)>127&&(c=l);break;case 3:i=e[s+1],o=e[s+2],(192&i)==128&&(192&o)==128&&(l=(15&u)<<12|(63&i)<<6|63&o)>2047&&(l<55296||l>57343)&&(c=l);break;case 4:i=e[s+1],o=e[s+2],a=e[s+3],(192&i)==128&&(192&o)==128&&(192&a)==128&&(l=(15&u)<<18|(63&i)<<12|(63&o)<<6|63&a)>65535&&l<1114112&&(c=l)}null===c?(c=65533,h=1):c>65535&&(c-=65536,r.push(c>>>10&1023|55296),c=56320|1023&c),r.push(c),s+=h}return function(e){var t=e.length;if(t<=4096)return String.fromCharCode.apply(String,e);for(var n="",r=0;rn)throw RangeError("Trying to access beyond buffer length")}function v(e,t,n,r,s,i){if(!a.isBuffer(e))throw TypeError('"buffer" argument must be a Buffer instance');if(t>s||te.length)throw RangeError("Index out of range")}function T(e,t,n,r,s,i){if(n+r>e.length||n<0)throw RangeError("Index out of range")}function x(e,t,n,r,i){return t=+t,n>>>=0,i||T(e,t,n,4,34028234663852886e22,-34028234663852886e22),s.write(e,t,n,r,23,4),n+4}function w(e,t,n,r,i){return t=+t,n>>>=0,i||T(e,t,n,8,17976931348623157e292,-17976931348623157e292),s.write(e,t,n,r,52,8),n+8}t.Buffer=a,t.SlowBuffer=function(e){return+e!=e&&(e=0),a.alloc(+e)},t.INSPECT_MAX_BYTES=50,t.kMaxLength=2147483647,a.TYPED_ARRAY_SUPPORT=function(){try{var e=new Uint8Array(1),t={foo:function(){return 42}};return Object.setPrototypeOf(t,Uint8Array.prototype),Object.setPrototypeOf(e,t),42===e.foo()}catch(e){return!1}}(),a.TYPED_ARRAY_SUPPORT||"undefined"==typeof console||"function"!=typeof console.error||console.error("This browser lacks typed array (Uint8Array) support which is required by `buffer` v5.x. Use `buffer` v4.x if you require old browser support."),Object.defineProperty(a.prototype,"parent",{enumerable:!0,get:function(){if(a.isBuffer(this))return this.buffer}}),Object.defineProperty(a.prototype,"offset",{enumerable:!0,get:function(){if(a.isBuffer(this))return this.byteOffset}}),a.poolSize=8192,a.from=function(e,t,n){return l(e,t,n)},Object.setPrototypeOf(a.prototype,Uint8Array.prototype),Object.setPrototypeOf(a,Uint8Array),a.alloc=function(e,t,n){return(u(e),e<=0)?o(e):void 0!==t?"string"==typeof n?o(e).fill(t,n):o(e).fill(t):o(e)},a.allocUnsafe=function(e){return c(e)},a.allocUnsafeSlow=function(e){return c(e)},a.isBuffer=function(e){return null!=e&&!0===e._isBuffer&&e!==a.prototype},a.compare=function(e,t){if(I(e,Uint8Array)&&(e=a.from(e,e.offset,e.byteLength)),I(t,Uint8Array)&&(t=a.from(t,t.offset,t.byteLength)),!a.isBuffer(e)||!a.isBuffer(t))throw TypeError('The "buf1", "buf2" arguments must be one of type Buffer or Uint8Array');if(e===t)return 0;for(var n=e.length,r=t.length,s=0,i=Math.min(n,r);sn&&(e+=" ... "),""},i&&(a.prototype[i]=a.prototype.inspect),a.prototype.compare=function(e,t,n,r,s){if(I(e,Uint8Array)&&(e=a.from(e,e.offset,e.byteLength)),!a.isBuffer(e))throw TypeError('The "target" argument must be one of type Buffer or Uint8Array. Received type '+typeof e);if(void 0===t&&(t=0),void 0===n&&(n=e?e.length:0),void 0===r&&(r=0),void 0===s&&(s=this.length),t<0||n>e.length||r<0||s>this.length)throw RangeError("out of range index");if(r>=s&&t>=n)return 0;if(r>=s)return -1;if(t>=n)return 1;if(t>>>=0,n>>>=0,r>>>=0,s>>>=0,this===e)return 0;for(var i=s-r,o=n-t,l=Math.min(i,o),u=this.slice(r,s),c=e.slice(t,n),h=0;h>>=0,isFinite(n)?(n>>>=0,void 0===r&&(r="utf8")):(r=n,n=void 0);else throw Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");var s,i,o,a,l,u,c,h,p,d,f,m,g=this.length-t;if((void 0===n||n>g)&&(n=g),e.length>0&&(n<0||t<0)||t>this.length)throw RangeError("Attempt to write outside buffer bounds");r||(r="utf8");for(var y=!1;;)switch(r){case"hex":return function(e,t,n,r){n=Number(n)||0;var s=e.length-n;r?(r=Number(r))>s&&(r=s):r=s;var i=t.length;r>i/2&&(r=i/2);for(var o=0;o>8,s.push(n%256),s.push(r);return s}(e,this.length-f),this,f,m);default:if(y)throw TypeError("Unknown encoding: "+r);r=(""+r).toLowerCase(),y=!0}},a.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}},a.prototype.slice=function(e,t){var n=this.length;e=~~e,t=void 0===t?n:~~t,e<0?(e+=n)<0&&(e=0):e>n&&(e=n),t<0?(t+=n)<0&&(t=0):t>n&&(t=n),t>>=0,t>>>=0,n||k(e,t,this.length);for(var r=this[e],s=1,i=0;++i>>=0,t>>>=0,n||k(e,t,this.length);for(var r=this[e+--t],s=1;t>0&&(s*=256);)r+=this[e+--t]*s;return r},a.prototype.readUInt8=function(e,t){return e>>>=0,t||k(e,1,this.length),this[e]},a.prototype.readUInt16LE=function(e,t){return e>>>=0,t||k(e,2,this.length),this[e]|this[e+1]<<8},a.prototype.readUInt16BE=function(e,t){return e>>>=0,t||k(e,2,this.length),this[e]<<8|this[e+1]},a.prototype.readUInt32LE=function(e,t){return e>>>=0,t||k(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},a.prototype.readUInt32BE=function(e,t){return e>>>=0,t||k(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},a.prototype.readIntLE=function(e,t,n){e>>>=0,t>>>=0,n||k(e,t,this.length);for(var r=this[e],s=1,i=0;++i=(s*=128)&&(r-=Math.pow(2,8*t)),r},a.prototype.readIntBE=function(e,t,n){e>>>=0,t>>>=0,n||k(e,t,this.length);for(var r=t,s=1,i=this[e+--r];r>0&&(s*=256);)i+=this[e+--r]*s;return i>=(s*=128)&&(i-=Math.pow(2,8*t)),i},a.prototype.readInt8=function(e,t){return(e>>>=0,t||k(e,1,this.length),128&this[e])?-((255-this[e]+1)*1):this[e]},a.prototype.readInt16LE=function(e,t){e>>>=0,t||k(e,2,this.length);var n=this[e]|this[e+1]<<8;return 32768&n?4294901760|n:n},a.prototype.readInt16BE=function(e,t){e>>>=0,t||k(e,2,this.length);var n=this[e+1]|this[e]<<8;return 32768&n?4294901760|n:n},a.prototype.readInt32LE=function(e,t){return e>>>=0,t||k(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},a.prototype.readInt32BE=function(e,t){return e>>>=0,t||k(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},a.prototype.readFloatLE=function(e,t){return e>>>=0,t||k(e,4,this.length),s.read(this,e,!0,23,4)},a.prototype.readFloatBE=function(e,t){return e>>>=0,t||k(e,4,this.length),s.read(this,e,!1,23,4)},a.prototype.readDoubleLE=function(e,t){return e>>>=0,t||k(e,8,this.length),s.read(this,e,!0,52,8)},a.prototype.readDoubleBE=function(e,t){return e>>>=0,t||k(e,8,this.length),s.read(this,e,!1,52,8)},a.prototype.writeUIntLE=function(e,t,n,r){if(e=+e,t>>>=0,n>>>=0,!r){var s=Math.pow(2,8*n)-1;v(this,e,t,n,s,0)}var i=1,o=0;for(this[t]=255&e;++o>>=0,n>>>=0,!r){var s=Math.pow(2,8*n)-1;v(this,e,t,n,s,0)}var i=n-1,o=1;for(this[t+i]=255&e;--i>=0&&(o*=256);)this[t+i]=e/o&255;return t+n},a.prototype.writeUInt8=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,1,255,0),this[t]=255&e,t+1},a.prototype.writeUInt16LE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,2,65535,0),this[t]=255&e,this[t+1]=e>>>8,t+2},a.prototype.writeUInt16BE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,2,65535,0),this[t]=e>>>8,this[t+1]=255&e,t+2},a.prototype.writeUInt32LE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,4,4294967295,0),this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e,t+4},a.prototype.writeUInt32BE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,4,4294967295,0),this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},a.prototype.writeIntLE=function(e,t,n,r){if(e=+e,t>>>=0,!r){var s=Math.pow(2,8*n-1);v(this,e,t,n,s-1,-s)}var i=0,o=1,a=0;for(this[t]=255&e;++i>0)-a&255;return t+n},a.prototype.writeIntBE=function(e,t,n,r){if(e=+e,t>>>=0,!r){var s=Math.pow(2,8*n-1);v(this,e,t,n,s-1,-s)}var i=n-1,o=1,a=0;for(this[t+i]=255&e;--i>=0&&(o*=256);)e<0&&0===a&&0!==this[t+i+1]&&(a=1),this[t+i]=(e/o>>0)-a&255;return t+n},a.prototype.writeInt8=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,1,127,-128),e<0&&(e=255+e+1),this[t]=255&e,t+1},a.prototype.writeInt16LE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,2,32767,-32768),this[t]=255&e,this[t+1]=e>>>8,t+2},a.prototype.writeInt16BE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,2,32767,-32768),this[t]=e>>>8,this[t+1]=255&e,t+2},a.prototype.writeInt32LE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,4,2147483647,-2147483648),this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24,t+4},a.prototype.writeInt32BE=function(e,t,n){return e=+e,t>>>=0,n||v(this,e,t,4,2147483647,-2147483648),e<0&&(e=4294967295+e+1),this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e,t+4},a.prototype.writeFloatLE=function(e,t,n){return x(this,e,t,!0,n)},a.prototype.writeFloatBE=function(e,t,n){return x(this,e,t,!1,n)},a.prototype.writeDoubleLE=function(e,t,n){return w(this,e,t,!0,n)},a.prototype.writeDoubleBE=function(e,t,n){return w(this,e,t,!1,n)},a.prototype.copy=function(e,t,n,r){if(!a.isBuffer(e))throw TypeError("argument should be a Buffer");if(n||(n=0),r||0===r||(r=this.length),t>=e.length&&(t=e.length),t||(t=0),r>0&&r=this.length)throw RangeError("Index out of range");if(r<0)throw RangeError("sourceEnd out of bounds");r>this.length&&(r=this.length),e.length-t=0;--i)e[i+t]=this[i+n];else Uint8Array.prototype.set.call(e,this.subarray(n,r),t);return s},a.prototype.fill=function(e,t,n,r){if("string"==typeof e){if("string"==typeof t?(r=t,t=0,n=this.length):"string"==typeof n&&(r=n,n=this.length),void 0!==r&&"string"!=typeof r)throw TypeError("encoding must be a string");if("string"==typeof r&&!a.isEncoding(r))throw TypeError("Unknown encoding: "+r);if(1===e.length){var s,i=e.charCodeAt(0);("utf8"===r&&i<128||"latin1"===r)&&(e=i)}}else"number"==typeof e?e&=255:"boolean"==typeof e&&(e=Number(e));if(t<0||this.length>>=0,n=void 0===n?this.length:n>>>0,e||(e=0),"number"==typeof e)for(s=t;s55295&&n<57344){if(!s){if(n>56319||o+1===r){(t-=3)>-1&&i.push(239,191,189);continue}s=n;continue}if(n<56320){(t-=3)>-1&&i.push(239,191,189),s=n;continue}n=(s-55296<<10|n-56320)+65536}else s&&(t-=3)>-1&&i.push(239,191,189);if(s=null,n<128){if((t-=1)<0)break;i.push(n)}else if(n<2048){if((t-=2)<0)break;i.push(n>>6|192,63&n|128)}else if(n<65536){if((t-=3)<0)break;i.push(n>>12|224,n>>6&63|128,63&n|128)}else if(n<1114112){if((t-=4)<0)break;i.push(n>>18|240,n>>12&63|128,n>>6&63|128,63&n|128)}else throw Error("Invalid code point")}return i}function _(e){for(var t=[],n=0;n=t.length)&&!(s>=e.length);++s)t[s+n]=e[s];return s}function I(e,t){return e instanceof t||null!=e&&null!=e.constructor&&null!=e.constructor.name&&e.constructor.name===t.name}var P=function(){for(var e="0123456789abcdef",t=Array(256),n=0;n<16;++n)for(var r=16*n,s=0;s<16;++s)t[r+s]=e[n]+e[s];return t}()},783:function(e,t){/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh */t.read=function(e,t,n,r,s){var i,o,a=8*s-r-1,l=(1<>1,c=-7,h=n?s-1:0,p=n?-1:1,d=e[t+h];for(h+=p,i=d&(1<<-c)-1,d>>=-c,c+=a;c>0;i=256*i+e[t+h],h+=p,c-=8);for(o=i&(1<<-c)-1,i>>=-c,c+=r;c>0;o=256*o+e[t+h],h+=p,c-=8);if(0===i)i=1-u;else{if(i===l)return o?NaN:1/0*(d?-1:1);o+=Math.pow(2,r),i-=u}return(d?-1:1)*o*Math.pow(2,i-r)},t.write=function(e,t,n,r,s,i){var o,a,l,u=8*i-s-1,c=(1<>1,p=23===s?5960464477539062e-23:0,d=r?0:i-1,f=r?1:-1,m=t<0||0===t&&1/t<0?1:0;for(isNaN(t=Math.abs(t))||t===1/0?(a=isNaN(t)?1:0,o=c):(o=Math.floor(Math.log(t)/Math.LN2),t*(l=Math.pow(2,-o))<1&&(o--,l*=2),o+h>=1?t+=p/l:t+=p*Math.pow(2,1-h),t*l>=2&&(o++,l/=2),o+h>=c?(a=0,o=c):o+h>=1?(a=(t*l-1)*Math.pow(2,s),o+=h):(a=t*Math.pow(2,h-1)*Math.pow(2,s),o=0));s>=8;e[n+d]=255&a,d+=f,a/=256,s-=8);for(o=o<0;e[n+d]=255&o,d+=f,o/=256,u-=8);e[n+d-f]|=128*m}}},n={};function r(e){var s=n[e];if(void 0!==s)return s.exports;var i=n[e]={exports:{}},o=!0;try{t[e](i,i.exports,r),o=!1}finally{o&&delete n[e]}return i.exports}r.ab="//";var s=r(72);e.exports=s}()},744065:function(e){!function(){var t={229:function(e){var t,n,r,s=e.exports={};function i(){throw Error("setTimeout has not been defined")}function o(){throw Error("clearTimeout has not been defined")}function a(e){if(t===setTimeout)return setTimeout(e,0);if((t===i||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:i}catch(e){t=i}try{n="function"==typeof clearTimeout?clearTimeout:o}catch(e){n=o}}();var l=[],u=!1,c=-1;function h(){u&&r&&(u=!1,r.length?l=r.concat(l):c=-1,l.length&&p())}function p(){if(!u){var e=a(h);u=!0;for(var t=l.length;t;){for(r=l,l=[];++c1)for(var n=1;nt;n--)e[n]=e[n-1];e[t]=n}function a(e,n){for(let r=0;rs(!1,e,t,n,r,i,o,a,l),e.maybeAddSegment=(e,t,n,r,i,o,a,l)=>s(!0,e,t,n,r,i,o,a,l),e.addMapping=(e,t)=>l(!1,e,t),e.maybeAddMapping=(e,t)=>l(!0,e,t),e.setSourceContent=(e,n,r)=>{let{_sources:s,_sourcesContent:i}=e;i[t.put(s,n)]=r},e.toDecodedMap=e=>{let{file:t,sourceRoot:n,_mappings:r,_sources:s,_sourcesContent:i,_names:o}=e;return function(e){let{length:t}=e,n=t;for(let t=n-1;t>=0&&!(e[t].length>0);n=t,t--);n{let r=e.toDecodedMap(t);return Object.assign(Object.assign({},r),{mappings:n.encode(r.mappings)})},e.allMappings=e=>{let t=[],{_mappings:n,_sources:r,_names:s}=e;for(let e=0;e{let t=new r.TraceMap(e),n=new i({file:t.file,sourceRoot:t.sourceRoot});return a(n._names,t.names),a(n._sources,t.sources),n._sourcesContent=t.sourcesContent||t.sources.map(()=>null),n._mappings=r.decodedMappings(t),n},s=(e,n,r,s,i,a,l,u,c)=>{let{_mappings:h,_sources:p,_sourcesContent:d,_names:f}=n,m=function(e,t){for(let n=e.length;n<=t;n++)e[n]=[];return e[t]}(h,r),g=function(e,t){let n=e.length;for(let r=n-1;r>=0&&!(t>=e[r][0]);n=r--);return n}(m,s);if(!i){if(e&&(0===g||1===m[g-1].length))return;return o(m,g,[s])}let y=t.put(p,i),b=u?t.put(f,u):-1;if(y===d.length&&(d[y]=null!=c?c:null),!(e&&function(e,t,n,r,s,i){if(0===t)return!1;let o=e[t-1];return 1!==o.length&&n===o[1]&&r===o[2]&&s===o[3]&&i===(5===o.length?o[4]:-1)}(m,g,y,a,l,b)))return o(m,g,u?[s,y,a,l,b]:[s,y,a,l])},e.GenMapping=i,Object.defineProperty(e,"__esModule",{value:!0})}(t,n(505576),n(993236),n(608523))},744342:function(e){e.exports=function(){"use strict";var e,t;let n=/^[\w+.-]+:\/\//,r=/^([\w+.-]+:)\/\/([^@/#?]*@)?([^:/#?]*)(:\d+)?(\/[^#?]*)?(\?[^#]*)?(#.*)?/,s=/^file:(?:\/\/((?![a-z]:)[^/#?]*)?)?(\/?[^#?]*)(\?[^#]*)?(#.*)?/i;function i(e){return e.startsWith("/")}function o(e){return/^[.?#]/.test(e)}function a(e){let t=r.exec(e);return l(t[1],t[2]||"",t[3],t[4]||"",t[5]||"/",t[6]||"",t[7]||"")}function l(t,n,r,s,i,o,a){return{scheme:t,user:n,host:r,port:s,path:i,query:o,hash:a,type:e.Absolute}}function u(t){if(t.startsWith("//")){let n=a("http:"+t);return n.scheme="",n.type=e.SchemeRelative,n}if(i(t)){let n=a("http://foo.com"+t);return n.scheme="",n.host="",n.type=e.AbsolutePath,n}if(t.startsWith("file:"))return function(e){let t=s.exec(e),n=t[2];return l("file:","",t[1]||"","",i(n)?n:"/"+n,t[3]||"",t[4]||"")}(t);if(n.test(t))return a(t);let r=a("http://foo.com/"+t);return r.scheme="",r.host="",r.type=t?t.startsWith("?")?e.Query:t.startsWith("#")?e.Hash:e.RelativePath:e.Empty,r}function c(t,n){let r=n<=e.RelativePath,s=t.path.split("/"),i=1,o=0,a=!1;for(let e=1;es&&(s=i)}c(r,s);let i=r.query+r.hash;switch(s){case e.Hash:case e.Query:return i;case e.RelativePath:{let e=r.path.slice(1);if(!e)return i||".";if(o(n||t)&&!o(e))return"./"+e+i;return e+i}case e.AbsolutePath:return r.path+i;default:return r.scheme+"//"+r.user+r.host+r.port+r.path+i}}}()},505576:function(e,t){!function(e){"use strict";e.get=void 0,e.put=void 0,e.pop=void 0;class t{constructor(){this._indexes={__proto__:null},this.array=[]}}e.get=(e,t)=>e._indexes[t],e.put=(t,n)=>{let r=e.get(t,n);if(void 0!==r)return r;let{array:s,_indexes:i}=t;return i[n]=s.push(n)-1},e.pop=e=>{let{array:t,_indexes:n}=e;0!==t.length&&(n[t.pop()]=void 0)},e.SetArray=t,Object.defineProperty(e,"__esModule",{value:!0})}(t)},993236:function(e,t,n){var r=n(657223).Buffer;!function(e){"use strict";let t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n=new Uint8Array(64),s=new Uint8Array(128);for(let e=0;er.from(e.buffer,e.byteOffset,e.byteLength).toString()}:{decode(e){let t="";for(let n=0;n>>=1,l&&(i=-2147483648|-i),n[r]+=i,t}function a(e,t,n){return!(t>=n)&&44!==e.charCodeAt(t)}function l(e,t){return e[0]-t[0]}function u(e,t,r,s,i){let o=s[i],a=o-r[i];r[i]=o,a=a<0?-a<<1|1:a<<1;do{let r=31&a;(a>>>=5)>0&&(r|=32),e[t++]=n[r]}while(a>0);return t}e.decode=function(e){let t=new Int32Array(5),n=[],r=0;do{let s=function(e,t){let n=e.indexOf(";",t);return -1===n?e.length:n}(e,r),i=[],u=!0,c=0;t[0]=0;for(let n=r;n0&&(16384===s&&(o+=i.decode(n),s=0),n[s++]=59),0!==l.length){t[0]=0;for(let e=0;e16348&&(o+=i.decode(r),n.copyWithin(0,16348,s),s-=16348),e>0&&(n[s++]=44),s=u(n,s,t,a,0),1!==a.length&&(s=u(n,s,t,a,1),s=u(n,s,t,a,2),s=u(n,s,t,a,3),4!==a.length&&(s=u(n,s,t,a,4)))}}}return o+i.decode(n.subarray(0,s))},Object.defineProperty(e,"__esModule",{value:!0})}(t)},608523:function(e,t,n){!function(e,t,n){"use strict";var r=n&&"object"==typeof n&&"default"in n?n:{default:n};function s(e,t){return t&&!t.endsWith("/")&&(t+="/"),r.default(e,t)}function i(e,t){for(let n=t;n=0&&e[r][0]===t;n=r--);return n}function c(){return{lastKey:-1,lastNeedle:-1,lastIndex:-1}}function h(e,t,n,r){let{lastKey:s,lastNeedle:i,lastIndex:o}=n,l=0,u=e.length-1;if(r===s){if(t===i)return a=-1!==o&&e[o][0]===t,o;t>=i?l=-1===o?0:o:u=o}return n.lastKey=r,n.lastNeedle=t,n.lastIndex=function(e,t,n,r){for(;n<=r;){let s=n+(r-n>>1),i=e[s][0]-t;if(0===i)return a=!0,s;i<0?n=s+1:r=s-1}return a=!1,n-1}(e,t,l,u)}function p(){return{__proto__:null}}function d(e,t){for(let n=0;ns(e||"",f));let{mappings:m}=r;"string"==typeof m?(this._encoded=m,this._decoded=void 0):(this._encoded=void 0,this._decoded=function(e,t){let n=i(e,0);if(n===e.length)return e;t||(e=e.slice());for(let s=n;s{function n(t,n,r,s,i,o){if(--r<0)throw Error(f);if(s<0)throw Error(m);let{sources:d,resolvedSources:g}=t,y=d.indexOf(n);if(-1===y&&(y=g.indexOf(n)),-1===y)return o?[]:k(null,null);let b=(t._bySources||(t._bySources=function(e,t){let n=t.map(p);for(let r=0;rt;n--)e[n]=e[n-1];e[t]=n})(p,d.lastIndex=f+1,[u,r,i[0]])}}return n}(e.decodedMappings(t),t._bySourceMemos=d.map(c))))[y][r];if(null==b)return o?[]:k(null,null);let T=t._bySourceMemos[y];if(o)return function(e,t,n,r,s){let i=v(e,t,n,r,1);if(!a&&-1===s&&i++,-1===i||i===e.length)return[];let o=a?r:e[i][0];a||(i=u(e,o,i));let c=l(e,o,i),h=[];for(;i<=c;i++){let t=e[i];h.push(k(t[1]+1,t[2]))}return h}(b,T,r,s,i);let x=v(b,T,r,s,i);if(-1===x)return k(null,null);let w=b[x];return k(w[1]+1,w[2])}e.encodedMappings=e=>{var n;return null!==(n=e._encoded)&&void 0!==n?n:e._encoded=t.encode(e._decoded)},e.decodedMappings=e=>e._decoded||(e._decoded=t.decode(e._encoded)),e.traceSegment=(t,n,r)=>{let s=e.decodedMappings(t);if(n>=s.length)return null;let i=s[n],o=v(i,t._decodedMemo,n,r,1);return -1===o?null:i[o]},e.originalPositionFor=(t,{line:n,column:r,bias:s})=>{if(--n<0)throw Error(f);if(r<0)throw Error(m);let i=e.decodedMappings(t);if(n>=i.length)return b(null,null,null,null);let o=i[n],a=v(o,t._decodedMemo,n,r,s||1);if(-1===a)return b(null,null,null,null);let l=o[a];if(1===l.length)return b(null,null,null,null);let{names:u,resolvedSources:c}=t;return b(c[l[1]],l[2]+1,l[3],5===l.length?u[l[4]]:null)},e.allGeneratedPositionsFor=(e,{source:t,line:r,column:s,bias:i})=>n(e,t,r,s,i||-1,!0),e.generatedPositionFor=(e,{source:t,line:r,column:s,bias:i})=>n(e,t,r,s,i||1,!1),e.eachMapping=(t,n)=>{let r=e.decodedMappings(t),{names:s,resolvedSources:i}=t;for(let e=0;e{let{sources:n,resolvedSources:r,sourcesContent:s}=e;if(null==s)return null;let i=n.indexOf(t);return -1===i&&(i=r.indexOf(t)),-1===i?null:s[i]},e.presortedDecodedMap=(e,t)=>{let n=new g(y(e,[]),t);return n._decoded=e.mappings,n},e.decodedMap=t=>y(t,e.decodedMappings(t)),e.encodedMap=t=>y(t,e.encodedMappings(t))})(),e.AnyMap=function(t,n){let r="string"==typeof t?JSON.parse(t):t;if(!("sections"in r))return new g(r,n);let s=[],i=[],o=[],a=[];(function t(n,r,s,i,o,a,l,u,c,h){let{sections:p}=n;for(let n=0;nc)return;let n=function(e,t){for(let n=e.length;n<=t;n++)e[n]=[];return e[t]}(s,t),r=0===e?u:0,i=y[e];for(let e=0;e=h)return;if(1===s.length){n.push([o]);continue}let a=f+s[1],l=s[2],u=s[3];n.push(4===s.length?[o,a,l,u]:[o,a,l,u,m+s[4]])}}})(f,r,s,i,o,a,l+m.line,u+m.column,y,b)}})(r,n,s,i,o,a,0,0,1/0,1/0);let l={version:3,file:r.file,names:a,sources:i,sourcesContent:o,mappings:s};return e.presortedDecodedMap(l)},e.GREATEST_LOWER_BOUND=1,e.LEAST_UPPER_BOUND=-1,e.TraceMap=g,Object.defineProperty(e,"__esModule",{value:!0})}(t,n(993236),n(744342))},212782:function(e){"use strict";function t(e,t,s){e instanceof RegExp&&(e=n(e,s)),t instanceof RegExp&&(t=n(t,s));var i=r(e,t,s);return i&&{start:i[0],end:i[1],pre:s.slice(0,i[0]),body:s.slice(i[0]+e.length,i[1]),post:s.slice(i[1]+t.length)}}function n(e,t){var n=t.match(e);return n?n[0]:null}function r(e,t,n){var r,s,i,o,a,l=n.indexOf(e),u=n.indexOf(t,l+1),c=l;if(l>=0&&u>0){if(e===t)return[l,u];for(r=[],i=n.length;c>=0&&!a;)c==l?(r.push(c),l=n.indexOf(e,c+1)):1==r.length?a=[r.pop(),u]:((s=r.pop())=0?l:u;r.length&&(a=[i,o])}return a}e.exports=t,t.range=r},987480:function(e,t,n){var r=n(212782);e.exports=function(e){return e?("{}"===e.substr(0,2)&&(e="\\{\\}"+e.substr(2)),(function e(t,n){var s=[],i=r("{","}",t);if(!i)return[t];var a=i.pre,l=i.post.length?e(i.post,!1):[""];if(/\$$/.test(i.pre))for(var c=0;c=0;if(!b&&!k)return i.post.match(/,.*\}/)?e(t=i.pre+"{"+i.body+o+i.post):[t];if(b)v=i.body.split(/\.\./);else if(1===(v=function e(t){if(!t)return[""];var n=[],s=r("{","}",t);if(!s)return t.split(",");var i=s.pre,o=s.body,a=s.post,l=i.split(",");l[l.length-1]+="{"+o+"}";var u=e(a);return a.length&&(l[l.length-1]+=u.shift(),l.push.apply(l,u)),n.push.apply(n,l),n}(i.body)).length&&1===(v=e(v[0],!1).map(h)).length)return l.map(function(e){return i.pre+v[0]+e});if(b){var v,T,x,w=u(v[0]),S=u(v[1]),E=Math.max(v[0].length,v[1].length),_=3==v.length?Math.abs(u(v[2])):1,C=d;S0){var N=Array(P+1).join("0");x=I<0?"-"+N+x.slice(1):N+x}}T.push(x)}}else{T=[];for(var R=0;R=t}},90872:function(e,t,n){"use strict";var r=n(420246),s={"text/plain":"Text","text/html":"Url",default:"Text"};e.exports=function(e,t){var n,i,o,a,l,u,c,h,p=!1;t||(t={}),o=t.debug||!1;try{if(l=r(),u=document.createRange(),c=document.getSelection(),(h=document.createElement("span")).textContent=e,h.ariaHidden="true",h.style.all="unset",h.style.position="fixed",h.style.top=0,h.style.clip="rect(0, 0, 0, 0)",h.style.whiteSpace="pre",h.style.webkitUserSelect="text",h.style.MozUserSelect="text",h.style.msUserSelect="text",h.style.userSelect="text",h.addEventListener("copy",function(n){if(n.stopPropagation(),t.format){if(n.preventDefault(),void 0===n.clipboardData){o&&console.warn("unable to use e.clipboardData"),o&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var r=s[t.format]||s.default;window.clipboardData.setData(r,e)}else n.clipboardData.clearData(),n.clipboardData.setData(t.format,e)}t.onCopy&&(n.preventDefault(),t.onCopy(n.clipboardData))}),document.body.appendChild(h),u.selectNodeContents(h),c.addRange(u),!document.execCommand("copy"))throw Error("copy command was unsuccessful");p=!0}catch(r){o&&console.error("unable to copy using execCommand: ",r),o&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),p=!0}catch(r){o&&console.error("unable to copy using clipboardData: ",r),o&&console.error("falling back to prompt"),n="message"in t?t.message:"Copy to clipboard: #{key}, Enter",i=(/mac os x/i.test(navigator.userAgent)?"⌘":"Ctrl")+"+C",a=n.replace(/#{\s*key\s*}/g,i),window.prompt(a,e)}}finally{c&&("function"==typeof c.removeRange?c.removeRange(u):c.removeAllRanges()),h&&document.body.removeChild(h),l()}return p}},341248:function(e,t){"use strict";!function(){function e(e){this.string=e;for(var t=[0],n=0;nthis.string.length)return null;for(var t=0,n=this.offsets;n[t+1]<=e;)t++;var r=e-n[t];return{line:t,column:r}},e.prototype.indexForLocation=function(e){var t=e.line,n=e.column;return t<0||t>=this.offsets.length||n<0||n>this.lengthOfLine(t)?null:this.offsets[t]+n},e.prototype.lengthOfLine=function(e){var t=this.offsets[e];return(e===this.offsets.length-1?this.string.length:this.offsets[e+1])-t}}()},579777:function(e,t,n){"use strict";n.d(t,{D:function(){return s}});var r=n(934584);function s(){return(0,r.$)(i,arguments)}function i(e,t){if(e<0)throw RangeError("n must be a non-negative number");for(var n=[],r=0;r0&&r.push(s+" more"),n._failMsg="is none of "+r.join(", ")):n._failMsg="is none of "+s+" types",n}return i(t,e),t.prototype.getChecker=function(e,t){var n=this,r=this.ttypes.map(function(n){return n.getChecker(e,t)});return function(e,t){for(var s=t.unionResolver(),i=0;i=r._score)&&(r=o)}r&&r._score>0&&((t=this._propNames).push.apply(t,r._propNames),(n=this._messages).push.apply(n,r._messages))},e.prototype.getError=function(e){for(var t=[],n=this._propNames.length-1;n>=0;n--){var r=this._propNames[n];e+="number"==typeof r?"["+r+"]":r?"."+r:"";var i=this._messages[n];i&&t.push(e+" "+i)}return new s(e,t.join("; "))},e.prototype.getErrorDetail=function(e){for(var t=[],n=this._propNames.length-1;n>=0;n--){var r=this._propNames[n];e+="number"==typeof r?"["+r+"]":r?"."+r:"";var s=this._messages[n];s&&t.push({path:e,message:s})}for(var i=null,n=t.length-1;n>=0;n--)i&&(t[n].nested=[i]),i=t[n];return i},e}();t.DetailContext=o;var a=function(){function e(){this.contexts=[]}return e.prototype.createContext=function(){var e=new o;return this.contexts.push(e),e},e}()},775970:function(e,t,n){e.exports.jsxRuntime=n(751858)},297466:function(e,t,n){"use strict";let r,s,i,o,a,l;n.d(t,{uz:function(){return sS},IF:function(){return sE},i5:function(){return s_},nu:function(){return sw}});var u,c,h,p,d,f,m,g,y,b,k,v,T,x,w,S,E,_,C,A,I,P,N,R,L,O,M,F,D,B,j=n(20934),H=n(960886),V=Object.create,$=Object.defineProperty,U=Object.defineProperties,q=Object.getOwnPropertyDescriptor,G=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertyNames,W=Object.getOwnPropertySymbols,Z=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,Y=(e,t,n)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,J=(e,t)=>{for(var n in t||(t={}))K.call(t,n)&&Y(e,n,t[n]);if(W)for(var n of W(t))X.call(t,n)&&Y(e,n,t[n]);return e},Q=(e,t)=>U(e,G(t)),ee=(e,t)=>{var n={};for(var r in e)K.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&W)for(var r of W(e))0>t.indexOf(r)&&X.call(e,r)&&(n[r]=e[r]);return n},et=(f=null!=(d=(h={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof s?new s(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=c.reach));x+=T.value.length,T=T.next){var w,S=T.value;if(n.length>t.length)return;if(!(S instanceof s)){var E=1;if(y){if(!(w=i(v,x,t,g))||w.index>=t.length)break;var _=w.index,C=w.index+w[0].length,A=x;for(A+=T.value.length;_>=A;)A+=(T=T.next).value.length;if(A-=T.value.length,x=A,T.value instanceof s)continue;for(var I=T;I!==n.tail&&(Ac.reach&&(c.reach=L);var O=T.prev;if(N&&(O=a(n,O,N),x+=N.length),function(e,t,n){for(var r=t.next,s=0;s1){var M={cause:h+","+d,reach:L};e(t,n,o,T.prev,x,M),c&&M.reach>c.reach&&(c.reach=M.reach)}}}}}}(e,u,t,u.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(u)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var s,i=0;s=n[i++];)s(t)}},Token:s};function s(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length}function i(e,t,n,r){e.lastIndex=t;var s=e.exec(n);if(s&&r&&s[1]){var i=s[1].length;s.index+=i,s[0]=s[0].slice(i)}return s}function o(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function a(e,t,n){var r=t.next,s={value:n,prev:t,next:r};return t.next=s,r.prev=s,e.length++,s}return s.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var s="";return t.forEach(function(t){s+=e(t,n)}),s}var i={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},o=t.alias;o&&(Array.isArray(o)?Array.prototype.push.apply(i.classes,o):i.classes.push(o)),r.hooks.run("wrap",i);var a="";for(var l in i.attributes)a+=" "+l+'="'+(i.attributes[l]||"").replace(/"/g,""")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+a+">"+i.content+""},r}();t.exports=n,n.default=n}},function(){return p||(0,h[z(h)[0]])((p={exports:{}}).exports,p),p.exports})())?V(Z(d)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of z(t))K.call(e,n)||void 0===n||$(e,n,{get:()=>t[n],enumerable:!(r=q(t,n))||r.enumerable});return e})(d&&d.__esModule?f:$(f,"default",{value:d,enumerable:!0}),d));et.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},et.languages.markup.tag.inside["attr-value"].inside.entity=et.languages.markup.entity,et.languages.markup.doctype.inside["internal-subset"].inside=et.languages.markup,et.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Object.defineProperty(et.languages.markup.tag,"addInlined",{value:function(e,t){var n={},n=(n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:et.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}),t=(n["language-"+t]={pattern:/[\s\S]+/,inside:et.languages[t]},{});t[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,function(){return e}),"i"),lookbehind:!0,greedy:!0,inside:n},et.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(et.languages.markup.tag,"addAttribute",{value:function(e,t){et.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:et.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),et.languages.html=et.languages.markup,et.languages.mathml=et.languages.markup,et.languages.svg=et.languages.markup,et.languages.xml=et.languages.extend("markup",{}),et.languages.ssml=et.languages.xml,et.languages.atom=et.languages.xml,et.languages.rss=et.languages.xml,m={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},y=RegExp((y="(?:[^\\\\-]|"+(g=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")")+"-"+y),b={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},et.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:y,inside:{escape:g,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":m,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:g}},"special-escape":m,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":b}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:g,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},et.languages.javascript=et.languages.extend("clike",{"class-name":[et.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),et.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,et.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:et.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:et.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:et.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:et.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:et.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),et.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:et.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),et.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),et.languages.markup&&(et.languages.markup.tag.addInlined("script","javascript"),et.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),et.languages.js=et.languages.javascript,et.languages.actionscript=et.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),et.languages.actionscript["class-name"].alias="function",delete et.languages.actionscript.parameter,delete et.languages.actionscript["literal-property"],et.languages.markup&&et.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:et.languages.markup}}),k=/#(?!\{).+/,v={pattern:/#\{[^}]+\}/,alias:"variable"},et.languages.coffeescript=et.languages.extend("javascript",{comment:k,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:v}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),et.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:k,interpolation:v}}}),et.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:et.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:v}}]}),et.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete et.languages.coffeescript["template-string"],et.languages.coffee=et.languages.coffeescript,Object.defineProperty(T=et.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/},"addSupport",{value:function(e,t){(e="string"==typeof e?[e]:e).forEach(function(e){var n=function(e){e.inside||(e.inside={}),e.inside.rest=t},r="doc-comment";if(s=et.languages[e]){var s,i=s[r];if((i=i||(s=et.languages.insertBefore(e,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[r])instanceof RegExp&&(i=s[r]={pattern:i}),Array.isArray(i))for(var o=0,a=i.length;o|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(et),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ ]+"+t.source+")?|"+t.source+"(?:[ ]+"+n.source+")?)",s=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source}),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function o(e,t){return t=(t||"").replace(/m/g,"")+"m",RegExp(/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,function(){return r}).replace(/<>/g,function(){return e}),t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,function(){return r})),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,function(){return r}).replace(/<>/g,function(){return"(?:"+s+"|"+i+")"})),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:o(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:o(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:o(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:o(i),lookbehind:!0,greedy:!0},number:{pattern:o(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(et),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,function(){return t}),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,s=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,function(){return r}),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,o=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+s+i+"(?:"+s+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+s+i+")(?:"+s+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+s+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+s+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach(function(t){["url","bold","italic","strike","code-snippet"].forEach(function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])})}),e.hooks.add("after-tokenize",function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(et),et.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:et.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},et.hooks.add("after-tokenize",function(e){if("graphql"===e.language)for(var t=e.tokens.filter(function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type}),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,s=r.inside["interpolation-punctuation"],i=r.pattern.source;function o(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function a(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}e.languages.javascript["template-string"]=[o("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),o("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),o("svg",/\bsvg/.source),o("markdown",/\b(?:markdown|md)/.source),o("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),o("sql",/\bsql/.source),t].filter(Boolean);var l={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};e.hooks.add("after-tokenize",function(t){t.language in l&&function t(n){for(var o=0,l=n.length;o=h.length)return;var o,l,p,d,f,m,g,y=n[i];"string"==typeof y||"string"==typeof y.content?(o=h[u],-1!==(g=(m="string"==typeof y?y:y.content).indexOf(o))&&(++u,l=m.substring(0,g),f=c[o],p=void 0,(d={})["interpolation-punctuation"]=s,3===(d=e.tokenize(f,d)).length&&((p=[1,1]).push.apply(p,a(d[1],e.languages.javascript,"javascript")),d.splice.apply(d,p)),p=new e.Token("interpolation",d,r.alias,f),d=m.substring(g+o.length),f=[],l&&f.push(l),f.push(p),d&&(t(m=[d]),f.push.apply(f,m)),"string"==typeof y?(n.splice.apply(n,[i,1].concat(f)),i+=f.length-1):y.content=f)):Array.isArray(g=y.content)?t(g):t([g])}}(l),new e.Token(o,l,"language-"+o,t)}(c,h,p))):t(u):"string"!=typeof u&&t([u]))}}(t.tokens)})}(et),et.languages.typescript=et.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),et.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete et.languages.typescript.parameter,delete et.languages.typescript["literal-property"],w=et.languages.extend("typescript",{}),delete w["class-name"],et.languages.typescript["class-name"].inside=w,et.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:w}}}}),et.languages.ts=et.languages.typescript,S=et.languages.javascript,_="(@(?:arg|argument|param|property)\\s+(?:"+(E=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source)+"\\s+)?)",et.languages.jsdoc=et.languages.extend("javadoclike",{parameter:{pattern:RegExp(_+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),et.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(_+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:S,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,function(){return E})),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+E),lookbehind:!0,inside:{string:S.string,number:S.number,boolean:S.boolean,keyword:et.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:S,alias:"language-javascript"}}}}),et.languages.javadoclike.addSupport("javascript",et.languages.jsdoc),et.languages.flow=et.languages.extend("javascript",{}),et.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),et.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete et.languages.flow.parameter,et.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(et.languages.flow.keyword)||(et.languages.flow.keyword=[et.languages.flow.keyword]),et.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0}),et.languages.n4js=et.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),et.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),et.languages.n4jsd=et.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source}),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function i(e,t){return RegExp(e=e.replace(//g,function(){return n}).replace(//g,function(){return r}).replace(//g,function(){return s}),t)}s=i(s).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=i(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var o=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(o).join(""):""};e.hooks.add("after-tokenize",function(t){"jsx"!==t.language&&"tsx"!==t.language||function t(n){for(var r=[],s=0;s"!==i.content[i.content.length-1].content&&r.push({tagName:o(i.content[0].content[1]),openedBraces:0}):0]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},et.languages.swift["string-literal"].forEach(function(e){e.inside.interpolation.inside=et.languages.swift}),et.languages.kotlin=et.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete et.languages.kotlin["class-name"],A={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:et.languages.kotlin}},et.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:A},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:A},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete et.languages.kotlin.string,et.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),et.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),et.languages.kt=et.languages.kotlin,et.languages.kts=et.languages.kotlin,et.languages.c=et.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),et.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),et.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},et.languages.c.string],char:et.languages.c.char,comment:et.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:et.languages.c}}}}),et.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete et.languages.c.boolean,et.languages.objectivec=et.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete et.languages.objectivec["class-name"],et.languages.objc=et.languages.objectivec,et.languages.reason=et.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),et.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete et.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,function(){return t});t=t.replace(//g,function(){return/[^\s\S]/.source}),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(et),et.languages.go=et.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),et.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete et.languages.go["class-name"],I=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,P=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,function(){return I.source}),et.languages.cpp=et.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,function(){return I.source})),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:I,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),et.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,function(){return P})+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),et.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:et.languages.cpp}}}}),et.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),et.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:et.languages.extend("cpp",{})}}),et.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},et.languages.cpp["base-clause"]),et.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern://,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},et.languages.python["string-interpolation"].inside.interpolation.inside.rest=et.languages.python,et.languages.py=et.languages.python;var en={};((e,t)=>{for(var n in t)$(e,n,{get:t[n],enumerable:!0})})(en,{dracula:()=>er,duotoneDark:()=>es,duotoneLight:()=>ei,github:()=>eo,jettwaveDark:()=>eb,jettwaveLight:()=>ek,nightOwl:()=>ea,nightOwlLight:()=>el,oceanicNext:()=>ec,okaidia:()=>eh,oneDark:()=>ev,oneLight:()=>eT,palenight:()=>ep,shadesOfPurple:()=>ed,synthwave84:()=>ef,ultramin:()=>em,vsDark:()=>eg,vsLight:()=>ey});var er={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},es={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},ei={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},eo={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},ea={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},el={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},eu={char:"#D8DEE9",comment:"#999999",keyword:"#c5a5c5",primitive:"#5a9bcf",string:"#8dc891",variable:"#d7deea",boolean:"#ff8b50",tag:"#fc929e",function:"#79b6f2",className:"#FAC863"},ec={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:eu.keyword}},{types:["attr-value"],style:{color:eu.string}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:eu.comment}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:eu.primitive}},{types:["boolean"],style:{color:eu.boolean}},{types:["tag"],style:{color:eu.tag}},{types:["string"],style:{color:eu.string}},{types:["punctuation"],style:{color:eu.string}},{types:["selector","char","builtin","inserted"],style:{color:eu.char}},{types:["function"],style:{color:eu.function}},{types:["operator","entity","url","variable"],style:{color:eu.variable}},{types:["keyword"],style:{color:eu.keyword}},{types:["atrule","class-name"],style:{color:eu.className}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},eh={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},ep={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},ed={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},ef={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},em={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},eg={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},ey={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},eb={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},ek={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},ev={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},eT={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},ex=(e,t)=>{let{plain:n}=e,r=e.styles.reduce((e,n)=>{let{languages:r,style:s}=n;return r&&!r.includes(t)||n.types.forEach(t=>{let n=J(J({},e[t]),s);e[t]=n}),e},{});return r.root=n,r.plain=Q(J({},n),{backgroundColor:void 0}),r},ew=(e,t)=>{let[n,r]=(0,j.useState)(ex(t,e)),s=(0,j.useRef)(),i=(0,j.useRef)();return(0,j.useEffect)(()=>{(t!==s.current||e!==i.current)&&(s.current=t,i.current=e,r(ex(t,e)))},[e,t]),n},eS=e=>(0,j.useCallback)(t=>{var{className:n,style:r,line:s}=t;let i=Q(J({},ee(t,["className","style","line"])),{className:(0,H.Z)("token-line",n)});return"object"==typeof e&&"plain"in e&&(i.style=e.plain),"object"==typeof r&&(i.style=J(J({},i.style||{}),r)),i},[e]),eE=e=>{let t=(0,j.useCallback)(({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map(t=>e[t]))},[e]);return(0,j.useCallback)(e=>{var{token:n,className:r,style:s}=e;let i=Q(J({},ee(e,["token","className","style"])),{className:(0,H.Z)("token",...n.types,r),children:n.content,style:t(n)});return null!=s&&(i.style=J(J({},i.style||{}),s)),i},[t])},e_=/\r\n|\r|\n/,eC=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},eA=(e,t)=>{let n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},eI=e=>{let t=[[]],n=[e],r=[0],s=[e.length],i=0,o=0,a=[],l=[a];for(;o>-1;){for(;(i=r[o]++)0?u:["plain"],e=c):(u=eA(u,c.type),c.alias&&(u=eA(u,c.alias)),e=c.content),"string"!=typeof e){o++,t.push(u),n.push(e),r.push(0),s.push(e.length);continue}let h=e.split(e_),p=h.length;a.push({types:u,content:h[0]});for(let e=1;e{let s=(0,j.useRef)(e);return(0,j.useMemo)(()=>{if(null==n)return eI([t]);let e={code:t,grammar:n,language:r,tokens:[]};return s.current.hooks.run("before-tokenize",e),e.tokens=s.current.tokenize(t,n),s.current.hooks.run("after-tokenize",e),eI(e.tokens)},[t,n,r])},eN=({children:e,language:t,code:n,theme:r,prism:s})=>{let i=t.toLowerCase(),o=ew(i,r),a=eS(o),l=eE(o),u=s.languages[i];return e({tokens:eP({prism:s,language:i,code:n,grammar:u}),className:`prism-code language-${i}`,style:null!=o?o.root:{},getLineProps:a,getTokenProps:l})},eR=e=>(0,j.createElement)(eN,Q(J({},e),{prism:e.prism||et,theme:e.theme||eg,code:e.code,language:e.language})),eL={characterData:!0,characterDataOldValue:!0,childList:!0,subtree:!0};function eO(e){var t=window.getSelection();t.empty(),t.addRange(e)}function eM(e){return(e.metaKey||e.ctrlKey)&&!e.altKey&&"KeyZ"===e.code}function eF(e){e=[e.firstChild];for(var t,n="";t=e.pop();)t.nodeType===Node.TEXT_NODE?n+=t.textContent:t.nodeType===Node.ELEMENT_NODE&&"BR"===t.nodeName&&(n+="\n"),t.nextSibling&&e.push(t.nextSibling),t.firstChild&&e.push(t.firstChild);return"\n"!==n[n.length-1]&&(n+="\n"),n}function eD(e){var t=window.getSelection().getRangeAt(0),n=t.collapsed?0:t.toString().length,r=document.createRange();return r.setStart(e,0),r.setEnd(t.startContainer,t.startOffset),{position:e=(r=r.toString()).length,extent:n,content:r=(r=r.split("\n"))[t=r.length-1],line:t}}function eB(e,t,n){0>=t&&(t=0),(!n||0>n)&&(n=t);var r=document.createRange();e=[e.firstChild];for(var s,i=0,o=t;s=e[e.length-1];){if(s.nodeType===Node.TEXT_NODE){if(i+s.textContent.length>=o){var a=o-i;if(o===t){if(o=r,a=o){if(o===t){if(a=r,0";case O.template:return"template";case O.ellipsis:return"...";case O.backQuote:return"`";case O.dollarBraceL:return"${";case O.at:return"@";case O.hash:return"#";case O.eq:return"=";case O.assign:return"_=";case O.preIncDec:case O.postIncDec:return"++/--";case O.bang:return"!";case O.tilde:return"~";case O.pipeline:return"|>";case O.nullishCoalescing:return"??";case O.logicalOR:return"||";case O.logicalAND:return"&&";case O.bitwiseOR:return"|";case O.bitwiseXOR:return"^";case O.bitwiseAND:return"&";case O.equality:return"==/!=";case O.lessThan:return"<";case O.greaterThan:return">";case O.relationalOrEqual:return"<=/>=";case O.bitShiftL:return"<<";case O.bitShiftR:return">>/>>>";case O.plus:return"+";case O.minus:return"-";case O.modulo:return"%";case O.star:return"*";case O.slash:return"/";case O.exponent:return"**";case O.jsxName:return"jsxName";case O.jsxText:return"jsxText";case O.jsxEmptyText:return"jsxEmptyText";case O.jsxTagStart:return"jsxTagStart";case O.jsxTagEnd:return"jsxTagEnd";case O.typeParameterStart:return"typeParameterStart";case O.nonNullAssertion:return"nonNullAssertion";case O._break:return"break";case O._case:return"case";case O._catch:return"catch";case O._continue:return"continue";case O._debugger:return"debugger";case O._default:return"default";case O._do:return"do";case O._else:return"else";case O._finally:return"finally";case O._for:return"for";case O._function:return"function";case O._if:return"if";case O._return:return"return";case O._switch:return"switch";case O._throw:return"throw";case O._try:return"try";case O._var:return"var";case O._let:return"let";case O._const:return"const";case O._while:return"while";case O._with:return"with";case O._new:return"new";case O._this:return"this";case O._super:return"super";case O._class:return"class";case O._extends:return"extends";case O._export:return"export";case O._import:return"import";case O._yield:return"yield";case O._null:return"null";case O._true:return"true";case O._false:return"false";case O._in:return"in";case O._instanceof:return"instanceof";case O._typeof:return"typeof";case O._void:return"void";case O._delete:return"delete";case O._async:return"async";case O._get:return"get";case O._set:return"set";case O._declare:return"declare";case O._readonly:return"readonly";case O._abstract:return"abstract";case O._static:return"static";case O._public:return"public";case O._private:return"private";case O._protected:return"protected";case O._override:return"override";case O._as:return"as";case O._enum:return"enum";case O._type:return"type";case O._implements:return"implements";default:return""}}(e)}"`)}function e1(e="Unexpected token",t=o.start){if(o.error)return;let n=SyntaxError(e);n.pos=t,o.error=n,o.pos=a.length,tg(O.eof)}let e0=[9,11,12,M.space,M.nonBreakingSpace,M.oghamSpaceMark,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279],e2=/(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g,e3=new Uint8Array(65536);for(let e of e0)e3[e]=1;let e6=new Uint8Array(65536);for(let e=0;e<128;e++)e6[e]=!function(e){if(e<48)return 36===e;if(e<58)return!0;if(e<65)return!1;if(e<91)return!0;if(e<97)return 95===e;if(e<123)return!0;if(e<128)return!1;throw Error("Should not be called with non-ASCII char code.")}(e)?0:1;for(let e=128;e<65536;e++)e6[e]=1;for(let e of e0)e6[e]=0;e6[8232]=0,e6[8233]=0;let e8=e6.slice();for(let e=M.digit0;e<=M.digit9;e++)e8[e]=0;let e5=new Int32Array([-1,27,783,918,1755,2376,2862,3483,-1,3699,-1,4617,4752,4833,5130,5508,5940,-1,6480,6939,7749,8181,8451,8613,-1,8829,-1,-1,-1,54,243,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,432,-1,-1,-1,675,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,81,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,108,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,135,-1,-1,-1,-1,-1,-1,-1,-1,-1,162,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,189,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,216,-1,-1,-1,-1,-1,-1,L._abstract<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,270,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,297,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,324,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,351,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,378,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,405,-1,-1,-1,-1,-1,-1,-1,-1,L._accessor<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._as<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,459,-1,-1,-1,-1,-1,594,-1,-1,-1,-1,-1,-1,486,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,513,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,540,-1,-1,-1,-1,-1,-1,L._assert<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,567,-1,-1,-1,-1,-1,-1,-1,L._asserts<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,621,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,648,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._async<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,702,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,729,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,756,-1,-1,-1,-1,-1,-1,L._await<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,810,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,837,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,864,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,891,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._break<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,945,-1,-1,-1,-1,-1,-1,1107,-1,-1,-1,1242,-1,-1,1350,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,972,1026,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,999,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._case<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1053,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1080,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._catch<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1134,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1161,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1188,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1215,-1,-1,-1,-1,-1,-1,-1,L._checks<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1269,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1296,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1323,-1,-1,-1,-1,-1,-1,-1,(O._class<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1377,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1404,1620,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1431,-1,-1,-1,-1,-1,-1,(O._const<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1458,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1485,-1,-1,-1,-1,-1,-1,-1,-1,1512,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1539,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1566,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1593,-1,-1,-1,-1,-1,-1,-1,-1,L._constructor<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1647,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1674,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1701,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1728,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._continue<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1782,-1,-1,-1,-1,-1,-1,-1,-1,-1,2349,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1809,1971,-1,-1,2106,-1,-1,-1,-1,-1,2241,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1836,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1863,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1890,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1917,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1944,-1,-1,-1,-1,-1,-1,-1,-1,(O._debugger<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1998,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2025,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2052,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2079,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._declare<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2133,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2160,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2187,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2214,-1,-1,-1,-1,-1,-1,(O._default<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2268,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2295,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2322,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._delete<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._do<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2403,-1,2484,-1,-1,-1,-1,-1,-1,-1,-1,-1,2565,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2430,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2457,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._else<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2511,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2538,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._enum<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2592,-1,-1,-1,2727,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2619,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2646,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2673,-1,-1,-1,-1,-1,-1,(O._export<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2700,-1,-1,-1,-1,-1,-1,-1,L._exports<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2754,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2781,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2808,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2835,-1,-1,-1,-1,-1,-1,-1,(O._extends<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2889,-1,-1,-1,-1,-1,-1,-1,2997,-1,-1,-1,-1,-1,3159,-1,-1,3213,-1,-1,3294,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2916,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2943,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,2970,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._false<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3024,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3051,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3078,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3105,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3132,-1,(O._finally<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3186,-1,-1,-1,-1,-1,-1,-1,-1,(O._for<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3240,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3267,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._from<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3321,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3348,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3375,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3402,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3429,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3456,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._function<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3510,-1,-1,-1,-1,-1,-1,3564,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3537,-1,-1,-1,-1,-1,-1,L._get<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3591,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3618,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3645,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3672,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._global<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3726,-1,-1,-1,-1,-1,-1,3753,4077,-1,-1,-1,-1,4590,-1,-1,-1,-1,-1,-1,-1,(O._if<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3780,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3807,-1,-1,3996,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3834,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3861,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3888,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3915,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3942,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,3969,-1,-1,-1,-1,-1,-1,-1,L._implements<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4023,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4050,-1,-1,-1,-1,-1,-1,(O._import<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._in<<1)+1,-1,-1,-1,-1,-1,4104,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4185,4401,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4131,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4158,-1,-1,-1,-1,-1,-1,-1,-1,L._infer<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4212,-1,-1,-1,-1,-1,-1,-1,4239,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4266,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4293,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4320,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4347,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4374,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._instanceof<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4428,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4455,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4482,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4509,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4536,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4563,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._interface<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._is<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4644,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4671,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4698,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4725,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._keyof<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4779,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4806,-1,-1,-1,-1,-1,-1,(O._let<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4860,-1,-1,-1,-1,-1,4995,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4887,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4914,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4941,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,4968,-1,-1,-1,-1,-1,-1,-1,L._mixins<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5022,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5049,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5076,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5103,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._module<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5157,-1,-1,-1,5373,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5427,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5184,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5211,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5238,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5265,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5292,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5319,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5346,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._namespace<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5400,-1,-1,-1,(O._new<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5454,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5481,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._null<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5535,-1,-1,-1,-1,-1,-1,-1,-1,-1,5562,-1,-1,-1,-1,5697,5751,-1,-1,-1,-1,L._of<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5589,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5616,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5643,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5670,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._opaque<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5724,-1,-1,-1,-1,-1,-1,L._out<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5778,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5805,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5832,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5859,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5886,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5913,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._override<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5967,-1,-1,6345,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,5994,-1,-1,-1,-1,-1,6129,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6021,-1,-1,-1,-1,-1,6048,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6075,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6102,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._private<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6156,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6183,-1,-1,-1,-1,-1,-1,-1,-1,-1,6318,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6210,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6237,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6264,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6291,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._protected<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._proto<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6372,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6399,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6426,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6453,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._public<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6507,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6534,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6696,-1,-1,6831,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6561,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6588,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6615,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6642,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6669,-1,L._readonly<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6723,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6750,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6777,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6804,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._require<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6858,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6885,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6912,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._return<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6966,-1,-1,-1,7182,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7236,7371,-1,7479,-1,7614,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,6993,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7020,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7047,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7074,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7101,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7128,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7155,-1,-1,-1,-1,-1,-1,-1,L._satisfies<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7209,-1,-1,-1,-1,-1,-1,L._set<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7263,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7290,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7317,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7344,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._static<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7398,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7425,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7452,-1,-1,-1,-1,-1,-1,-1,-1,(O._super<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7506,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7533,-1,-1,-1,-1,-1,-1,-1,-1,-1,7560,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7587,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._switch<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7641,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7668,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7695,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7722,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._symbol<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7776,-1,-1,-1,-1,-1,-1,-1,-1,-1,7938,-1,-1,-1,-1,-1,-1,8046,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7803,-1,-1,-1,-1,-1,-1,-1,-1,7857,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7830,-1,-1,-1,-1,-1,-1,-1,(O._this<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7884,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7911,-1,-1,-1,(O._throw<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,7965,-1,-1,-1,8019,-1,-1,-1,-1,-1,-1,7992,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._true<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._try<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8073,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8100,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._type<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8127,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8154,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._typeof<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8208,-1,-1,-1,-1,8343,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8235,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8262,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8289,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8316,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._unique<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8370,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8397,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8424,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,L._using<<1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8478,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8532,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8505,-1,-1,-1,-1,-1,-1,-1,-1,(O._var<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8559,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8586,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._void<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8640,8748,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8667,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8694,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8721,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._while<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8775,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8802,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._with<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8856,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8883,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8910,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,8937,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,(O._yield<<1)+1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]);function e4(e){let t=e.identifierRole;return t===F.TopLevelDeclaration||t===F.FunctionScopedDeclaration||t===F.BlockScopedDeclaration||t===F.ObjectShorthandTopLevelDeclaration||t===F.ObjectShorthandFunctionScopedDeclaration||t===F.ObjectShorthandBlockScopedDeclaration}function e9(e){let t=e.identifierRole;return t===F.TopLevelDeclaration||t===F.ObjectShorthandTopLevelDeclaration||t===F.ImportDeclaration}!function(e){e[e.Access=0]="Access",e[e.ExportAccess=1]="ExportAccess";e[e.TopLevelDeclaration=2]="TopLevelDeclaration";let t=3;e[e.FunctionScopedDeclaration=t]="FunctionScopedDeclaration";let n=t+1;e[e.BlockScopedDeclaration=n]="BlockScopedDeclaration";let r=n+1;e[e.ObjectShorthandTopLevelDeclaration=r]="ObjectShorthandTopLevelDeclaration";let s=r+1;e[e.ObjectShorthandFunctionScopedDeclaration=s]="ObjectShorthandFunctionScopedDeclaration";let i=s+1;e[e.ObjectShorthandBlockScopedDeclaration=i]="ObjectShorthandBlockScopedDeclaration";let o=i+1;e[e.ObjectShorthand=o]="ObjectShorthand";let a=o+1;e[e.ImportDeclaration=a]="ImportDeclaration";let l=a+1;e[e.ObjectKey=l]="ObjectKey";let u=l+1;e[e.ImportAccess=u]="ImportAccess"}(F||(F={})),(u=D||(D={}))[u.NoChildren=0]="NoChildren",u[u.OneChild=1]="OneChild",u[u.StaticChildren=2]="StaticChildren",u[u.KeyAfterPropSpread=3]="KeyAfterPropSpread";class e7{constructor(){this.type=o.type,this.contextualKeyword=o.contextualKeyword,this.start=o.start,this.end=o.end,this.scopeDepth=o.scopeDepth,this.isType=o.isType,this.identifierRole=null,this.jsxRole=null,this.shadowsGlobal=!1,this.isAsyncOperation=!1,this.contextId=null,this.rhsEndIndex=null,this.isExpression=!1,this.numNullishCoalesceStarts=0,this.numNullishCoalesceEnds=0,this.isOptionalChainStart=!1,this.isOptionalChainEnd=!1,this.subscriptStartIndex=null,this.nullishStartIndex=null}}function te(){o.tokens.push(new e7),td()}function tt(){o.tokens.push(new e7),o.start=o.pos,function(){for(;;){if(o.pos>=a.length){e1("Unterminated template");return}let e=a.charCodeAt(o.pos);if(e===M.graveAccent||e===M.dollarSign&&a.charCodeAt(o.pos+1)===M.leftCurlyBrace){if(o.pos===o.start&&to(O.template)){if(e===M.dollarSign){o.pos+=2,tg(O.dollarBraceL);return}++o.pos,tg(O.backQuote);return}tg(O.template);return}e===M.backslash&&o.pos++,o.pos++}}()}function tn(e){for(let t=o.tokens.length-e;t=a.length){let e=o.tokens;e.length>=2&&e[e.length-1].start>=a.length&&e[e.length-2].start>=a.length&&e1("Unexpectedly reached the end of input."),tg(O.eof);return}e8[e=a.charCodeAt(o.pos)]||e===M.backslash||e===M.atSign&&a.charCodeAt(o.pos+1)===M.atSign?function(){let e=0,t=0,n=o.pos;for(;nM.lowercaseZ);){let r=e5[e+(t-M.lowercaseA)+1];if(-1===r)break;e=r,n++}let r=e5[e];if(r>-1&&!e6[t]){o.pos=n,1&r?tg(r>>>1):tg(O.name,r>>>1);return}for(;na.length){e1("Unterminated comment",o.pos-2);return}o.pos+=2}();break;case M.slash:tf(2);break;default:return}break;default:if(!e3[e])return;++o.pos}}}function tg(e,t=L.NONE){o.end=o.pos,o.type=e,o.contextualKeyword=t}function ty(){if(o.isType){tv(O.greaterThan,1);return}let e=a.charCodeAt(o.pos+1);if(e===M.greaterThan){let e=a.charCodeAt(o.pos+2)===M.greaterThan?3:2;if(a.charCodeAt(o.pos+e)===M.equalsTo){tv(O.assign,e+1);return}tv(O.bitShiftR,e);return}e===M.equalsTo?tv(O.relationalOrEqual,2):tv(O.greaterThan,1)}function tb(){o.type===O.greaterThan&&(o.pos-=1,ty())}function tk(e){switch(e){case M.numberSign:++o.pos,tg(O.hash);return;case M.dot:!function(){let e=a.charCodeAt(o.pos+1);if(e>=M.digit0&&e<=M.digit9){tx(!0);return}e===M.dot&&a.charCodeAt(o.pos+2)===M.dot?(o.pos+=3,tg(O.ellipsis)):(++o.pos,tg(O.dot))}();return;case M.leftParenthesis:++o.pos,tg(O.parenL);return;case M.rightParenthesis:++o.pos,tg(O.parenR);return;case M.semicolon:++o.pos,tg(O.semi);return;case M.comma:++o.pos,tg(O.comma);return;case M.leftSquareBracket:++o.pos,tg(O.bracketL);return;case M.rightSquareBracket:++o.pos,tg(O.bracketR);return;case M.leftCurlyBrace:i&&a.charCodeAt(o.pos+1)===M.verticalBar?tv(O.braceBarL,2):(++o.pos,tg(O.braceL));return;case M.rightCurlyBrace:++o.pos,tg(O.braceR);return;case M.colon:a.charCodeAt(o.pos+1)===M.colon?tv(O.doubleColon,2):(++o.pos,tg(O.colon));return;case M.questionMark:!function(){let e=a.charCodeAt(o.pos+1),t=a.charCodeAt(o.pos+2);e!==M.questionMark||i&&o.isType?e!==M.dot||t>=M.digit0&&t<=M.digit9?(++o.pos,tg(O.question)):(o.pos+=2,tg(O.questionDot)):t===M.equalsTo?tv(O.assign,3):tv(O.nullishCoalescing,2)}();return;case M.atSign:++o.pos,tg(O.at);return;case M.graveAccent:++o.pos,tg(O.backQuote);return;case M.digit0:{let e=a.charCodeAt(o.pos+1);if(e===M.lowercaseX||e===M.uppercaseX||e===M.lowercaseO||e===M.uppercaseO||e===M.lowercaseB||e===M.uppercaseB){!function(){for(o.pos+=2;;){let e=a.charCodeAt(o.pos);if(e>=M.digit0&&e<=M.digit9||e>=M.lowercaseA&&e<=M.lowercaseF||e>=M.uppercaseA&&e<=M.uppercaseF||e===M.underscore)o.pos++;else break}a.charCodeAt(o.pos)===M.lowercaseN?(++o.pos,tg(O.bigint)):tg(O.num)}();return}}case M.digit1:case M.digit2:case M.digit3:case M.digit4:case M.digit5:case M.digit6:case M.digit7:case M.digit8:case M.digit9:tx(!1);return;case M.quotationMark:case M.apostrophe:!function(e){for(o.pos++;;){if(o.pos>=a.length){e1("Unterminated string constant");return}let t=a.charCodeAt(o.pos);if(t===M.backslash)o.pos++;else if(t===e)break;o.pos++}o.pos++,tg(O.string)}(e);return;case M.slash:a.charCodeAt(o.pos+1)===M.equalsTo?tv(O.assign,2):tv(O.slash,1);return;case M.percentSign:case M.asterisk:let t,n,r;t=e===M.asterisk?O.star:O.modulo,n=1,r=a.charCodeAt(o.pos+1),e===M.asterisk&&r===M.asterisk&&(n++,r=a.charCodeAt(o.pos+2),t=O.exponent),r===M.equalsTo&&a.charCodeAt(o.pos+2)!==M.greaterThan&&(n++,t=O.assign),tv(t,n);return;case M.verticalBar:case M.ampersand:!function(e){let t=a.charCodeAt(o.pos+1);if(t===e){a.charCodeAt(o.pos+2)===M.equalsTo?tv(O.assign,3):tv(e===M.verticalBar?O.logicalOR:O.logicalAND,2);return}if(e===M.verticalBar){if(t===M.greaterThan){tv(O.pipeline,2);return}if(t===M.rightCurlyBrace&&i){tv(O.braceBarR,2);return}}if(t===M.equalsTo){tv(O.assign,2);return}tv(e===M.verticalBar?O.bitwiseOR:O.bitwiseAND,1)}(e);return;case M.caret:a.charCodeAt(o.pos+1)===M.equalsTo?tv(O.assign,2):tv(O.bitwiseXOR,1);return;case M.plusSign:case M.dash:!function(e){let t=a.charCodeAt(o.pos+1);if(t===e){tv(O.preIncDec,2);return}t===M.equalsTo?tv(O.assign,2):e===M.plusSign?tv(O.plus,1):tv(O.minus,1)}(e);return;case M.lessThan:!function(){let e=a.charCodeAt(o.pos+1);if(e===M.lessThan){if(a.charCodeAt(o.pos+2)===M.equalsTo){tv(O.assign,3);return}o.isType?tv(O.lessThan,1):tv(O.bitShiftL,2);return}e===M.equalsTo?tv(O.relationalOrEqual,2):tv(O.lessThan,1)}();return;case M.greaterThan:ty();return;case M.equalsTo:case M.exclamationMark:!function(e){let t=a.charCodeAt(o.pos+1);if(t===M.equalsTo){tv(O.equality,a.charCodeAt(o.pos+2)===M.equalsTo?3:2);return}if(e===M.equalsTo&&t===M.greaterThan){o.pos+=2,tg(O.arrow);return}tv(e===M.equalsTo?O.eq:O.bang,1)}(e);return;case M.tilde:tv(O.tilde,1);return}e1(`Unexpected character '${String.fromCharCode(e)}'`,o.pos)}function tv(e,t){o.pos+=t,tg(e)}function tT(){for(;;){let e=a.charCodeAt(o.pos);if(e>=M.digit0&&e<=M.digit9||e===M.underscore)o.pos++;else break}}function tx(e){let t=!1,n=!1;e||tT();let r=a.charCodeAt(o.pos);if(r===M.dot&&(++o.pos,tT(),r=a.charCodeAt(o.pos)),(r===M.uppercaseE||r===M.lowercaseE)&&(((r=a.charCodeAt(++o.pos))===M.plusSign||r===M.dash)&&++o.pos,tT(),r=a.charCodeAt(o.pos)),r===M.lowercaseN?(++o.pos,t=!0):r===M.lowercaseM&&(++o.pos,n=!0),t){tg(O.bigint);return}if(n){tg(O.decimal);return}tg(O.num)}function tw(e,t=e.currentIndex()){let n=t+1;if(tS(e,n)){let r=e.identifierNameAtIndex(t);return{isType:!1,leftName:r,rightName:r,endIndex:n}}if(tS(e,++n))return{isType:!0,leftName:null,rightName:null,endIndex:n};if(tS(e,++n))return{isType:!1,leftName:e.identifierNameAtIndex(t),rightName:e.identifierNameAtIndex(t+2),endIndex:n};if(tS(e,++n))return{isType:!0,leftName:null,rightName:null,endIndex:n};throw Error(`Unexpected import/export specifier at ${t}`)}function tS(e,t){let n=e.tokens[t];return n.type===O.braceR||n.type===O.comma}var tE=new Map([["quot",'"'],["amp","&"],["apos","'"],["lt","<"],["gt",">"],["nbsp","\xa0"],["iexcl","\xa1"],["cent","\xa2"],["pound","\xa3"],["curren","\xa4"],["yen","\xa5"],["brvbar","\xa6"],["sect","\xa7"],["uml","\xa8"],["copy","\xa9"],["ordf","\xaa"],["laquo","\xab"],["not","\xac"],["shy","\xad"],["reg","\xae"],["macr","\xaf"],["deg","\xb0"],["plusmn","\xb1"],["sup2","\xb2"],["sup3","\xb3"],["acute","\xb4"],["micro","\xb5"],["para","\xb6"],["middot","\xb7"],["cedil","\xb8"],["sup1","\xb9"],["ordm","\xba"],["raquo","\xbb"],["frac14","\xbc"],["frac12","\xbd"],["frac34","\xbe"],["iquest","\xbf"],["Agrave","\xc0"],["Aacute","\xc1"],["Acirc","\xc2"],["Atilde","\xc3"],["Auml","\xc4"],["Aring","\xc5"],["AElig","\xc6"],["Ccedil","\xc7"],["Egrave","\xc8"],["Eacute","\xc9"],["Ecirc","\xca"],["Euml","\xcb"],["Igrave","\xcc"],["Iacute","\xcd"],["Icirc","\xce"],["Iuml","\xcf"],["ETH","\xd0"],["Ntilde","\xd1"],["Ograve","\xd2"],["Oacute","\xd3"],["Ocirc","\xd4"],["Otilde","\xd5"],["Ouml","\xd6"],["times","\xd7"],["Oslash","\xd8"],["Ugrave","\xd9"],["Uacute","\xda"],["Ucirc","\xdb"],["Uuml","\xdc"],["Yacute","\xdd"],["THORN","\xde"],["szlig","\xdf"],["agrave","\xe0"],["aacute","\xe1"],["acirc","\xe2"],["atilde","\xe3"],["auml","\xe4"],["aring","\xe5"],["aelig","\xe6"],["ccedil","\xe7"],["egrave","\xe8"],["eacute","\xe9"],["ecirc","\xea"],["euml","\xeb"],["igrave","\xec"],["iacute","\xed"],["icirc","\xee"],["iuml","\xef"],["eth","\xf0"],["ntilde","\xf1"],["ograve","\xf2"],["oacute","\xf3"],["ocirc","\xf4"],["otilde","\xf5"],["ouml","\xf6"],["divide","\xf7"],["oslash","\xf8"],["ugrave","\xf9"],["uacute","\xfa"],["ucirc","\xfb"],["uuml","\xfc"],["yacute","\xfd"],["thorn","\xfe"],["yuml","\xff"],["OElig","Œ"],["oelig","œ"],["Scaron","Š"],["scaron","š"],["Yuml","Ÿ"],["fnof","ƒ"],["circ","ˆ"],["tilde","˜"],["Alpha","Α"],["Beta","Β"],["Gamma","Γ"],["Delta","Δ"],["Epsilon","Ε"],["Zeta","Ζ"],["Eta","Η"],["Theta","Θ"],["Iota","Ι"],["Kappa","Κ"],["Lambda","Λ"],["Mu","Μ"],["Nu","Ν"],["Xi","Ξ"],["Omicron","Ο"],["Pi","Π"],["Rho","Ρ"],["Sigma","Σ"],["Tau","Τ"],["Upsilon","Υ"],["Phi","Φ"],["Chi","Χ"],["Psi","Ψ"],["Omega","Ω"],["alpha","α"],["beta","β"],["gamma","γ"],["delta","δ"],["epsilon","ε"],["zeta","ζ"],["eta","η"],["theta","θ"],["iota","ι"],["kappa","κ"],["lambda","λ"],["mu","μ"],["nu","ν"],["xi","ξ"],["omicron","ο"],["pi","π"],["rho","ρ"],["sigmaf","ς"],["sigma","σ"],["tau","τ"],["upsilon","υ"],["phi","φ"],["chi","χ"],["psi","ψ"],["omega","ω"],["thetasym","ϑ"],["upsih","ϒ"],["piv","ϖ"],["ensp"," "],["emsp"," "],["thinsp"," "],["zwnj",""],["zwj",""],["lrm",""],["rlm",""],["ndash","–"],["mdash","—"],["lsquo","‘"],["rsquo","’"],["sbquo","‚"],["ldquo","“"],["rdquo","”"],["bdquo","„"],["dagger","†"],["Dagger","‡"],["bull","•"],["hellip","…"],["permil","‰"],["prime","′"],["Prime","″"],["lsaquo","‹"],["rsaquo","›"],["oline","‾"],["frasl","⁄"],["euro","€"],["image","ℑ"],["weierp","℘"],["real","ℜ"],["trade","™"],["alefsym","ℵ"],["larr","←"],["uarr","↑"],["rarr","→"],["darr","↓"],["harr","↔"],["crarr","↵"],["lArr","⇐"],["uArr","⇑"],["rArr","⇒"],["dArr","⇓"],["hArr","⇔"],["forall","∀"],["part","∂"],["exist","∃"],["empty","∅"],["nabla","∇"],["isin","∈"],["notin","∉"],["ni","∋"],["prod","∏"],["sum","∑"],["minus","−"],["lowast","∗"],["radic","√"],["prop","∝"],["infin","∞"],["ang","∠"],["and","∧"],["or","∨"],["cap","∩"],["cup","∪"],["int","∫"],["there4","∴"],["sim","∼"],["cong","≅"],["asymp","≈"],["ne","≠"],["equiv","≡"],["le","≤"],["ge","≥"],["sub","⊂"],["sup","⊃"],["nsub","⊄"],["sube","⊆"],["supe","⊇"],["oplus","⊕"],["otimes","⊗"],["perp","⊥"],["sdot","⋅"],["lceil","⌈"],["rceil","⌉"],["lfloor","⌊"],["rfloor","⌋"],["lang","〈"],["rang","〉"],["loz","◊"],["spades","♠"],["clubs","♣"],["hearts","♥"],["diams","♦"]]);function t_(e){let[t,n]=tC(e.jsxPragma||"React.createElement"),[r,s]=tC(e.jsxFragmentPragma||"React.Fragment");return{base:t,suffix:n,fragmentBase:r,fragmentSuffix:s}}function tC(e){let t=e.indexOf(".");return -1===t&&(t=e.length),[e.slice(0,t),e.slice(t)]}class tA{getPrefixCode(){return""}getHoistedCode(){return""}getSuffixCode(){return""}}class tI extends tA{__init(){this.lastLineNumber=1}__init2(){this.lastIndex=0}__init3(){this.filenameVarName=null}__init4(){this.esmAutomaticImportNameResolutions={}}__init5(){this.cjsAutomaticModuleNameResolutions={}}constructor(e,t,n,r,s){super(),this.rootTransformer=e,this.tokens=t,this.importProcessor=n,this.nameManager=r,this.options=s,tI.prototype.__init.call(this),tI.prototype.__init2.call(this),tI.prototype.__init3.call(this),tI.prototype.__init4.call(this),tI.prototype.__init5.call(this),this.jsxPragmaInfo=t_(s),this.isAutomaticRuntime="automatic"===s.jsxRuntime,this.jsxImportSource=s.jsxImportSource||"react"}process(){return!!this.tokens.matches1(O.jsxTagStart)&&(this.processJSXTag(),!0)}getPrefixCode(){let e="";if(this.filenameVarName&&(e+=`const ${this.filenameVarName} = ${JSON.stringify(this.options.filePath||"")};`),this.isAutomaticRuntime){if(this.importProcessor)for(let[t,n]of Object.entries(this.cjsAutomaticModuleNameResolutions))e+=`var ${n} = require("${t}");`;else{let{createElement:t,...n}=this.esmAutomaticImportNameResolutions;t&&(e+=`import {createElement as ${t}} from "${this.jsxImportSource}";`);let r=Object.entries(n).map(([e,t])=>`${e} as ${t}`).join(", ");if(r){let t=this.jsxImportSource+(this.options.production?"/jsx-runtime":"/jsx-dev-runtime");e+=`import {${r}} from "${t}";`}}}return e}processJSXTag(){let{jsxRole:e,start:t}=this.tokens.currentToken(),n=this.options.production?null:this.getElementLocationCode(t);this.isAutomaticRuntime&&e!==D.KeyAfterPropSpread?this.transformTagToJSXFunc(n,e):this.transformTagToCreateElement(n)}getElementLocationCode(e){let t=this.getLineNumberForIndex(e);return`lineNumber: ${t}`}getLineNumberForIndex(e){let t=this.tokens.code;for(;this.lastIndex or > at the end of the tag.");r&&this.tokens.appendCode(`, ${r}`)}for(this.options.production||(null===r&&this.tokens.appendCode(", void 0"),this.tokens.appendCode(`, ${n}, ${this.getDevSource(e)}, this`)),this.tokens.removeInitialToken();!this.tokens.matches1(O.jsxTagEnd);)this.tokens.removeToken();this.tokens.replaceToken(")")}transformTagToCreateElement(e){if(this.tokens.replaceToken(this.getCreateElementInvocationCode()),this.tokens.matches1(O.jsxTagEnd))this.tokens.replaceToken(`${this.getFragmentCode()}, null`),this.processChildren(!0);else if(this.processTagIntro(),this.processPropsObjectWithDevInfo(e),this.tokens.matches2(O.slash,O.jsxTagEnd));else if(this.tokens.matches1(O.jsxTagEnd))this.tokens.removeToken(),this.processChildren(!0);else throw Error("Expected either /> or > at the end of the tag.");for(this.tokens.removeInitialToken();!this.tokens.matches1(O.jsxTagEnd);)this.tokens.removeToken();this.tokens.replaceToken(")")}getJSXFuncInvocationCode(e){return this.options.production?e?this.claimAutoImportedFuncInvocation("jsxs","/jsx-runtime"):this.claimAutoImportedFuncInvocation("jsx","/jsx-runtime"):this.claimAutoImportedFuncInvocation("jsxDEV","/jsx-dev-runtime")}getCreateElementInvocationCode(){if(this.isAutomaticRuntime)return this.claimAutoImportedFuncInvocation("createElement","");{let{jsxPragmaInfo:e}=this,t=this.importProcessor&&this.importProcessor.getIdentifierReplacement(e.base)||e.base;return`${t}${e.suffix}(`}}getFragmentCode(){if(this.isAutomaticRuntime)return this.claimAutoImportedName("Fragment",this.options.production?"/jsx-runtime":"/jsx-dev-runtime");{let{jsxPragmaInfo:e}=this;return(this.importProcessor&&this.importProcessor.getIdentifierReplacement(e.fragmentBase)||e.fragmentBase)+e.fragmentSuffix}}claimAutoImportedFuncInvocation(e,t){let n=this.claimAutoImportedName(e,t);return this.importProcessor?`${n}.call(void 0, `:`${n}(`}claimAutoImportedName(e,t){if(!this.importProcessor)return this.esmAutomaticImportNameResolutions[e]||(this.esmAutomaticImportNameResolutions[e]=this.nameManager.claimFreeName(`_${e}`)),this.esmAutomaticImportNameResolutions[e];{let n=this.jsxImportSource+t;return this.cjsAutomaticModuleNameResolutions[n]||(this.cjsAutomaticModuleNameResolutions[n]=this.importProcessor.getFreeIdentifierForPath(n)),`${this.cjsAutomaticModuleNameResolutions[n]}.${e}`}}processTagIntro(){let e=this.tokens.currentIndex()+1;for(;this.tokens.tokens[e].isType||!this.tokens.matches2AtIndex(e-1,O.jsxName,O.jsxName)&&!this.tokens.matches2AtIndex(e-1,O.greaterThan,O.jsxName)&&!this.tokens.matches1AtIndex(e,O.braceL)&&!this.tokens.matches1AtIndex(e,O.jsxTagEnd)&&!this.tokens.matches2AtIndex(e,O.slash,O.jsxTagEnd);)e++;if(e===this.tokens.currentIndex()+1){let e=this.tokens.identifierName();tP(e)&&this.tokens.replaceToken(`'${e}'`)}for(;this.tokens.currentIndex()=M.lowercaseA&&t<=M.lowercaseZ}function tN(e){let t=0,n=0;for(let r of e)"\n"===r?(t++,n=0):" "===r&&n++;return"\n".repeat(t)+" ".repeat(n)}function tR(e,t){let n,r="",s=0,i=t;if("#"===e[i]){var o,a;let t,r=10;if("x"===e[++i])for(r=16,t=++i;i=M.digit0&&o<=M.digit9||o>=M.lowercaseA&&o<=M.lowercaseF||o>=M.uppercaseA&&o<=M.uppercaseF);)i++;else for(t=i;i=M.digit0&&a<=M.digit9;)i++;if(";"===e[i]){let s=e.slice(t,i);s&&(i++,n=String.fromCodePoint(parseInt(s,r)))}}else for(;i0)&&!(t.namedExports.length>0)&&[...t.defaultNames,...t.wildcardNames,...t.namedImports.map(({localName:e})=>e)].every(e=>this.shouldAutomaticallyElideImportedName(e)))||this.importsToReplace.set(e,"")}shouldAutomaticallyElideImportedName(e){return this.isTypeScriptTransformEnabled&&!this.keepUnusedImports&&!this.nonTypeIdentifiers.has(e)}generateImportReplacements(){for(let[e,t]of this.importInfoByPath.entries()){let n;let{defaultNames:r,wildcardNames:s,namedImports:i,namedExports:o,exportStarNames:a,hasStarExport:l}=t;if(0===r.length&&0===s.length&&0===i.length&&0===o.length&&0===a.length&&!l){this.importsToReplace.set(e,`require('${e}');`);continue}let u=this.getFreeIdentifierForPath(e);n=this.enableLegacyTypeScriptModuleInterop?u:s.length>0?s[0]:this.getFreeIdentifierForPath(e);let c=`var ${u} = require('${e}');`;if(s.length>0)for(let e of s){let t=this.enableLegacyTypeScriptModuleInterop?u:`${this.helperManager.getHelperName("interopRequireWildcard")}(${u})`;c+=` var ${e} = ${t};`}else a.length>0&&n!==u?c+=` var ${n} = ${this.helperManager.getHelperName("interopRequireWildcard")}(${u});`:r.length>0&&n!==u&&(c+=` var ${n} = ${this.helperManager.getHelperName("interopRequireDefault")}(${u});`);for(let{importedName:e,localName:t}of o)c+=` ${this.helperManager.getHelperName("createNamedExportFrom")}(${u}, '${t}', '${e}');`;for(let e of a)c+=` exports.${e} = ${n};`;for(let t of(l&&(c+=` ${this.helperManager.getHelperName("createStarExport")}(${u});`),this.importsToReplace.set(e,c),r))this.identifierReplacements.set(t,`${n}.default`);for(let{importedName:e,localName:t}of i)this.identifierReplacements.set(t,`${u}.${e}`)}}getFreeIdentifierForPath(e){let t=e.split("/"),n=t[t.length-1].replace(/\W/g,"");return this.nameManager.claimFreeName(`_${n}`)}preprocessImportAtIndex(e){let t=[],n=[],r=[];if(e++,(this.tokens.matchesContextualAtIndex(e,L._type)||this.tokens.matches1AtIndex(e,O._typeof))&&!this.tokens.matches1AtIndex(e+1,O.comma)&&!this.tokens.matchesContextualAtIndex(e+1,L._from)||this.tokens.matches1AtIndex(e,O.parenL))return;if(this.tokens.matches1AtIndex(e,O.name)&&(t.push(this.tokens.identifierNameAtIndex(e)),e++,this.tokens.matches1AtIndex(e,O.comma)&&e++),this.tokens.matches1AtIndex(e,O.star)&&(e+=2,n.push(this.tokens.identifierNameAtIndex(e)),e++),this.tokens.matches1AtIndex(e,O.braceL)){let n=this.getNamedImports(e+1);for(let s of(e=n.newIndex,n.namedImports))"default"===s.importedName?t.push(s.localName):r.push(s)}if(this.tokens.matchesContextualAtIndex(e,L._from)&&e++,!this.tokens.matches1AtIndex(e,O.string))throw Error("Expected string token at the end of import statement.");let s=this.tokens.stringValueAtIndex(e),i=this.getImportInfo(s);i.defaultNames.push(...t),i.wildcardNames.push(...n),i.namedImports.push(...r),0===t.length&&0===n.length&&0===r.length&&(i.hasBareImport=!0)}preprocessExportAtIndex(e){if(this.tokens.matches2AtIndex(e,O._export,O._var)||this.tokens.matches2AtIndex(e,O._export,O._let)||this.tokens.matches2AtIndex(e,O._export,O._const))this.preprocessVarExportAtIndex(e);else if(this.tokens.matches2AtIndex(e,O._export,O._function)||this.tokens.matches2AtIndex(e,O._export,O._class)){let t=this.tokens.identifierNameAtIndex(e+2);this.addExportBinding(t,t)}else if(this.tokens.matches3AtIndex(e,O._export,O.name,O._function)){let t=this.tokens.identifierNameAtIndex(e+3);this.addExportBinding(t,t)}else this.tokens.matches2AtIndex(e,O._export,O.braceL)?this.preprocessNamedExportAtIndex(e):this.tokens.matches2AtIndex(e,O._export,O.star)&&this.preprocessExportStarAtIndex(e)}preprocessVarExportAtIndex(e){let t=0;for(let n=e+2;;n++)if(this.tokens.matches1AtIndex(n,O.braceL)||this.tokens.matches1AtIndex(n,O.dollarBraceL)||this.tokens.matches1AtIndex(n,O.bracketL))t++;else if(this.tokens.matches1AtIndex(n,O.braceR)||this.tokens.matches1AtIndex(n,O.bracketR))t--;else if(0!==t||this.tokens.matches1AtIndex(n,O.name)){if(this.tokens.matches1AtIndex(1,O.eq)){let e=this.tokens.currentToken().rhsEndIndex;if(null==e)throw Error("Expected = token with an end index.");n=e-1}else if(e4(this.tokens.tokens[n])){let e=this.tokens.identifierNameAtIndex(n);this.identifierReplacements.set(e,`exports.${e}`)}}else break}preprocessNamedExportAtIndex(e){e+=2;let{newIndex:t,namedImports:n}=this.getNamedImports(e);if(e=t,this.tokens.matchesContextualAtIndex(e,L._from))e++;else{for(let{importedName:e,localName:t}of n)this.addExportBinding(e,t);return}if(!this.tokens.matches1AtIndex(e,O.string))throw Error("Expected string token at the end of import statement.");let r=this.tokens.stringValueAtIndex(e);this.getImportInfo(r).namedExports.push(...n)}preprocessExportStarAtIndex(e){let t=null;if(this.tokens.matches3AtIndex(e,O._export,O.star,O._as)?(e+=3,t=this.tokens.identifierNameAtIndex(e),e+=2):e+=3,!this.tokens.matches1AtIndex(e,O.string))throw Error("Expected string token at the end of star export statement.");let n=this.tokens.stringValueAtIndex(e),r=this.getImportInfo(n);null!==t?r.exportStarNames.push(t):r.hasStarExport=!0}getNamedImports(e){let t=[];for(;;){if(this.tokens.matches1AtIndex(e,O.braceR)){e++;break}let n=tw(this.tokens,e);if(e=n.endIndex,n.isType||t.push({importedName:n.leftName,localName:n.rightName}),this.tokens.matches2AtIndex(e,O.comma,O.braceR)){e+=2;break}if(this.tokens.matches1AtIndex(e,O.braceR)){e++;break}if(this.tokens.matches1AtIndex(e,O.comma))e++;else throw Error(`Unexpected token: ${JSON.stringify(this.tokens.tokens[e])}`)}return{newIndex:e,namedImports:t}}getImportInfo(e){let t=this.importInfoByPath.get(e);if(t)return t;let n={defaultNames:[],wildcardNames:[],namedImports:[],namedExports:[],hasBareImport:!1,exportStarNames:[],hasStarExport:!1};return this.importInfoByPath.set(e,n),n}addExportBinding(e,t){this.exportBindingsByLocalName.has(e)||this.exportBindingsByLocalName.set(e,[]),this.exportBindingsByLocalName.get(e).push(t)}claimImportCode(e){let t=this.importsToReplace.get(e);return this.importsToReplace.set(e,""),t||""}getIdentifierReplacement(e){return this.identifierReplacements.get(e)||null}resolveExportBinding(e){let t=this.exportBindingsByLocalName.get(e);return t&&0!==t.length?t.map(e=>`exports.${e}`).join(" = "):null}getGlobalNames(){return new Set([...this.identifierReplacements.keys(),...this.exportBindingsByLocalName.keys()])}}var tM=n(912858);let tF={require:`
+ import {createRequire as CREATE_REQUIRE_NAME} from "module";
+ const require = CREATE_REQUIRE_NAME(import.meta.url);
+ `,interopRequireWildcard:`
+ function interopRequireWildcard(obj) {
+ if (obj && obj.__esModule) {
+ return obj;
+ } else {
+ var newObj = {};
+ if (obj != null) {
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ newObj[key] = obj[key];
+ }
+ }
+ }
+ newObj.default = obj;
+ return newObj;
+ }
+ }
+ `,interopRequireDefault:`
+ function interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+ }
+ `,createNamedExportFrom:`
+ function createNamedExportFrom(obj, localName, importedName) {
+ Object.defineProperty(exports, localName, {enumerable: true, configurable: true, get: () => obj[importedName]});
+ }
+ `,createStarExport:`
+ function createStarExport(obj) {
+ Object.keys(obj)
+ .filter((key) => key !== "default" && key !== "__esModule")
+ .forEach((key) => {
+ if (exports.hasOwnProperty(key)) {
+ return;
+ }
+ Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]});
+ });
+ }
+ `,nullishCoalesce:`
+ function nullishCoalesce(lhs, rhsFn) {
+ if (lhs != null) {
+ return lhs;
+ } else {
+ return rhsFn();
+ }
+ }
+ `,asyncNullishCoalesce:`
+ async function asyncNullishCoalesce(lhs, rhsFn) {
+ if (lhs != null) {
+ return lhs;
+ } else {
+ return await rhsFn();
+ }
+ }
+ `,optionalChain:`
+ function optionalChain(ops) {
+ let lastAccessLHS = undefined;
+ let value = ops[0];
+ let i = 1;
+ while (i < ops.length) {
+ const op = ops[i];
+ const fn = ops[i + 1];
+ i += 2;
+ if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+ return undefined;
+ }
+ if (op === 'access' || op === 'optionalAccess') {
+ lastAccessLHS = value;
+ value = fn(value);
+ } else if (op === 'call' || op === 'optionalCall') {
+ value = fn((...args) => value.call(lastAccessLHS, ...args));
+ lastAccessLHS = undefined;
+ }
+ }
+ return value;
+ }
+ `,asyncOptionalChain:`
+ async function asyncOptionalChain(ops) {
+ let lastAccessLHS = undefined;
+ let value = ops[0];
+ let i = 1;
+ while (i < ops.length) {
+ const op = ops[i];
+ const fn = ops[i + 1];
+ i += 2;
+ if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+ return undefined;
+ }
+ if (op === 'access' || op === 'optionalAccess') {
+ lastAccessLHS = value;
+ value = await fn(value);
+ } else if (op === 'call' || op === 'optionalCall') {
+ value = await fn((...args) => value.call(lastAccessLHS, ...args));
+ lastAccessLHS = undefined;
+ }
+ }
+ return value;
+ }
+ `,optionalChainDelete:`
+ function optionalChainDelete(ops) {
+ const result = OPTIONAL_CHAIN_NAME(ops);
+ return result == null ? true : result;
+ }
+ `,asyncOptionalChainDelete:`
+ async function asyncOptionalChainDelete(ops) {
+ const result = await ASYNC_OPTIONAL_CHAIN_NAME(ops);
+ return result == null ? true : result;
+ }
+ `};class tD{__init(){this.helperNames={}}__init2(){this.createRequireName=null}constructor(e){this.nameManager=e,tD.prototype.__init.call(this),tD.prototype.__init2.call(this)}getHelperName(e){let t=this.helperNames[e];return t||(t=this.nameManager.claimFreeName(`_${e}`),this.helperNames[e]=t),t}emitHelpers(){let e="";for(let[t,n]of(this.helperNames.optionalChainDelete&&this.getHelperName("optionalChain"),this.helperNames.asyncOptionalChainDelete&&this.getHelperName("asyncOptionalChain"),Object.entries(tF))){let r=this.helperNames[t],s=n;"optionalChainDelete"===t?s=s.replace("OPTIONAL_CHAIN_NAME",this.helperNames.optionalChain):"asyncOptionalChainDelete"===t?s=s.replace("ASYNC_OPTIONAL_CHAIN_NAME",this.helperNames.asyncOptionalChain):"require"===t&&(null===this.createRequireName&&(this.createRequireName=this.nameManager.claimFreeName("_createRequire")),s=s.replace(/CREATE_REQUIRE_NAME/g,this.createRequireName)),r&&(e+=" "+s.replace(t,r).replace(/\s+/g," ").trim())}return e}}function tB(e,t,n){(function(e,t){for(let n of e.tokens)if(n.type===O.name&&!n.isType&&function(e){let t=e.identifierRole;return t===F.FunctionScopedDeclaration||t===F.BlockScopedDeclaration||t===F.ObjectShorthandFunctionScopedDeclaration||t===F.ObjectShorthandBlockScopedDeclaration}(n)&&t.has(e.identifierNameForToken(n)))return!0;return!1})(e,n)&&function(e,t,n){let r=[],s=t.length-1;for(let i=e.tokens.length-1;;i--){for(;r.length>0&&r[r.length-1].startTokenIndex===i+1;)r.pop();for(;s>=0&&t[s].endTokenIndex===i+1;)r.push(t[s]),s--;if(i<0)break;let o=e.tokens[i],a=e.identifierNameForToken(o);if(r.length>1&&!o.isType&&o.type===O.name&&n.has(a)){if(function(e){let t=e.identifierRole;return t===F.TopLevelDeclaration||t===F.BlockScopedDeclaration||t===F.ObjectShorthandTopLevelDeclaration||t===F.ObjectShorthandBlockScopedDeclaration}(o))tj(r[r.length-1],e,a);else if(function(e){let t=e.identifierRole;return t===F.FunctionScopedDeclaration||t===F.ObjectShorthandFunctionScopedDeclaration}(o)){let t=r.length-1;for(;t>0&&!r[t].isFunctionScope;)t--;if(t<0)throw Error("Did not find parent function scope.");tj(r[t],e,a)}}}if(r.length>0)throw Error("Expected empty scope stack after processing file.")}(e,t,n)}function tj(e,t,n){for(let r=e.startTokenIndex;r0&&!o.error;)to(O.braceL)||to(O.bracketL)?e++:(to(O.braceR)||to(O.bracketR))&&e--,te();return!0}return!1}()&&(to(O.colon)||to(O.comma)||to(O.question)||to(O.eq)||to(O.parenR)&&(te(),to(O.arrow)))));return o.restoreFromSnapshot(e),t}()){nr(B.TSFunctionType);return}if(to(O._new)){nr(B.TSConstructorType);return}if(eq(L._abstract)&&ta()===O._new){nr(B.TSAbstractConstructorType);return}!function(){if(ts(O.bitwiseOR),ni(),to(O.bitwiseOR))for(;ts(O.bitwiseOR);)ni()}()}function nh(){for(;!to(O.braceL)&&!o.error;)t3(),to(O.lessThan)&&nT(),ts(O.comma)}function np(){for(tz(!1),eQ(O.braceL);!ts(O.braceR)&&!o.error;)!function(){if(to(O.string)?te():n1(),ts(O.eq)){let e=o.tokens.length-1;nI(),o.tokens[e].rhsEndIndex=o.tokens.length}}(),ts(O.comma)}function nd(){eQ(O.braceL),rb(O.braceR)}function nf(){tz(!1),ts(O.dot)?nf():nd()}function nm(){eq(L._global)?n1():to(O.string)?nH():e1(),to(O.braceL)?nd():eJ()}function ng(){tW(),eQ(O.eq),eq(L._require)&&ta()===O.parenL?(eW(L._require),eQ(O.parenL),to(O.string)||e1(),te(),eQ(O.parenR)):t3(),eJ()}function ny(){return nb(o.contextualKeyword,!0)}function nb(e,t){switch(e){case L._abstract:if(nk(t)&&to(O._class))return o.tokens[o.tokens.length-1].type=O._abstract,rS(!0,!1),!0;break;case L._enum:if(nk(t)&&to(O.name))return o.tokens[o.tokens.length-1].type=O._enum,np(),!0;break;case L._interface:if(nk(t)&&to(O.name)){let e=tn(t?2:1);return tz(!1),t8(),ts(O._extends)&&nh(),nn(),tr(e),!0}break;case L._module:if(nk(t)){if(to(O.string)){let e=tn(t?2:1);return nm(),tr(e),!0}if(to(O.name)){let e=tn(t?2:1);return nf(),tr(e),!0}}break;case L._namespace:if(nk(t)&&to(O.name)){let e=tn(t?2:1);return nf(),tr(e),!0}break;case L._type:if(nk(t)&&to(O.name)){let e=tn(t?2:1);return tz(!1),t8(),eQ(O.eq),nu(),eJ(),tr(e),!0}}return!1}function nk(e){return e?(te(),!0):!eY()}function nv(){o.type===O.bitShiftL&&(o.pos-=1,tg(O.lessThan)),nT()}function nT(){let e=tn(0);for(eQ(O.lessThan);!to(O.greaterThan)&&!o.error;)nu(),ts(O.comma);e?(eQ(O.greaterThan),tr(e)):(tr(e),tb(),eQ(O.greaterThan),o.tokens[o.tokens.length-1].isType=!0)}function nx(){if(to(O.name))switch(o.contextualKeyword){case L._abstract:case L._declare:case L._enum:case L._interface:case L._module:case L._namespace:case L._type:return!0}return!1}function nw(e){if(nE(),!ts(O.colon)){o.tokens[o.tokens.length-1].identifierRole=e;return}nE()}function nS(){let e=o.tokens.length;nw(F.Access);let t=!1;for(;to(O.dot);)t=!0,nE(),nE();if(!t){let t=o.tokens[e],n=a.charCodeAt(t.start);n>=M.lowercaseA&&n<=M.lowercaseZ&&(t.identifierRole=null)}}function nE(){o.tokens.push(new e7),tm(),o.start=o.pos;let e=a.charCodeAt(o.pos);if(e8[e])!function(){let e;do{if(o.pos>a.length){e1("Unexpectedly reached the end of input.");return}e=a.charCodeAt(++o.pos)}while(e6[e]||e===M.dash);tg(O.jsxName)}();else if(e===M.quotationMark||e===M.apostrophe)!function(e){for(o.pos++;;){if(o.pos>=a.length){e1("Unterminated string constant");return}if(a.charCodeAt(o.pos)===e){o.pos++;break}o.pos++}tg(O.string)}(e);else switch(++o.pos,e){case M.greaterThan:tg(O.jsxTagEnd);break;case M.lessThan:tg(O.jsxTagStart);break;case M.slash:tg(O.slash);break;case M.equalsTo:tg(O.eq);break;case M.leftCurlyBrace:tg(O.braceL);break;case M.dot:tg(O.dot);break;case M.colon:tg(O.colon);break;default:e1()}}function n_(){o.tokens.push(new e7),o.start=o.pos,function(){let e=!1,t=!1;for(;;){if(o.pos>=a.length){e1("Unterminated JSX contents");return}let n=a.charCodeAt(o.pos);if(n===M.lessThan||n===M.leftCurlyBrace){if(o.pos===o.start){if(n===M.lessThan){o.pos++,tg(O.jsxTagStart);return}tk(n);return}e&&!t?tg(O.jsxEmptyText):tg(O.jsxText);return}n===M.lineFeed?e=!0:n!==M.space&&n!==M.carriageReturn&&n!==M.tab&&(t=!0),o.pos++}}()}(c=B||(B={}))[c.TSFunctionType=0]="TSFunctionType",c[c.TSConstructorType=1]="TSConstructorType",c[c.TSAbstractConstructorType=2]="TSAbstractConstructorType";class nC{constructor(e){this.stop=e}}function nA(e=!1){if(nI(e),to(O.comma))for(;ts(O.comma);)nI(e)}function nI(e=!1,t=!1){return s?r?function(e,t){if(!to(O.lessThan))return nP(e,t);let n=o.snapshot(),r=nP(e,t);return o.error&&(o.restoreFromSnapshot(n),o.type=O.typeParameterStart,t5(),(r=nP(e,t))||e1()),r}(e,t):function(e,t){if(!to(O.lessThan))return nP(e,t);let n=o.snapshot();t5();let r=nP(e,t);return(r||e1(),o.error)?(o.restoreFromSnapshot(n),nP(e,t)):r}(e,t):i?function(e,t){if(to(O.lessThan)){let n=o.snapshot(),r=nP(e,t);if(!o.error)return r;o.restoreFromSnapshot(n),o.type=O.typeParameterStart;let s=tn(0);if(n9(),tr(s),r=nP(e,t))return!0;e1()}return nP(e,t)}(e,t):nP(e,t)}function nP(e,t){if(to(O._yield))return te(),to(O.semi)||eZ()||(ts(O.star),nI()),!1;(to(O.parenL)||to(O.name)||to(O._yield))&&(o.potentialArrowAt=o.start);let n=!!function(e){let t=o.tokens.length;return!!nR()||(function e(t,n,r){if(s&&(O._in&O.PRECEDENCE_MASK)>n&&!eK()&&(ez(L._as)||ez(L._satisfies))){let s=tn(1);nu(),tr(s),tb(),e(t,n,r);return}let i=o.type&O.PRECEDENCE_MASK;if(i>0&&(!r||!to(O._in))&&i>n){let s=o.type;te(),s===O.nullishCoalescing&&(o.tokens[o.tokens.length-1].nullishStartIndex=t);let a=o.tokens.length;nR(),e(a,s&O.IS_RIGHT_ASSOCIATIVE?i-1:i,r),s===O.nullishCoalescing&&(o.tokens[t].numNullishCoalesceStarts++,o.tokens[o.tokens.length-1].numNullishCoalesceEnds++),e(t,n,r)}}(t,-1,e),!1)}(e)||(s||i?function(e){if(to(O.question)){let e=ta();if(e===O.colon||e===O.comma||e===O.parenR)return}nN(e)}(e):nN(e),!1);return(t&&nq(),o.type&O.IS_ASSIGN)?(te(),nI(e),!1):n}function nN(e){ts(O.question)&&(nI(),eQ(O.colon),nI(e))}function nR(){if(s&&!r&&ts(O.lessThan))return!function(){let e=tn(1);nu(),eQ(O.greaterThan),tr(e),nR()}(),!1;if(eq(L._module)&&tp()===M.leftCurlyBrace&&!eX())return eW(L._module),eQ(O.braceL),rb(O.braceR),!1;if(o.type&O.IS_PREFIX)return te(),nR(),!1;if(nL())return!0;for(;o.type&O.IS_POSTFIX&&!eZ();)o.type===O.preIncDec&&(o.type=O.postIncDec),te();return!1}function nL(){let e=o.tokens.length;return!!nH()||(nO(e),o.tokens.length>e&&o.tokens[e].isOptionalChainStart&&(o.tokens[o.tokens.length-1].isOptionalChainEnd=!0),!1)}function nO(e,t=!1){i?function(e,t=!1){if(o.tokens[o.tokens.length-1].contextualKeyword===L._async&&to(O.lessThan)){let e=o.snapshot();if(function(){o.scopeDepth++;let e=o.tokens.length;return rw(),!!nU()&&(nK(e),!0)}()&&!o.error)return;o.restoreFromSnapshot(e)}nM(e,t)}(e,t):nM(e,t)}function nM(e,t=!1){let n=new nC(!1);do s?function(e,t,n){if(!eK()&&ts(O.bang)){o.tokens[o.tokens.length-1].type=O.nonNullAssertion;return}if(to(O.lessThan)||to(O.bitShiftL)){let n=o.snapshot();if(!t&&nD()&&function(){let e=o.snapshot();return(t5(),rw(),to(O.colon)&&no(O.colon),eQ(O.arrow),o.error)?(o.restoreFromSnapshot(e),!1):(nY(!0),!0)}()||(nv(),!t&&ts(O.parenL)?(o.tokens[o.tokens.length-1].subscriptStartIndex=e,nB()):to(O.backQuote)?nG():(o.type===O.greaterThan||o.type!==O.parenL&&o.type&O.IS_EXPRESSION_START&&!eK())&&e1(),!o.error))return;o.restoreFromSnapshot(n)}else!t&&to(O.questionDot)&&ta()===O.lessThan&&(te(),o.tokens[e].isOptionalChainStart=!0,o.tokens[o.tokens.length-1].subscriptStartIndex=e,nT(),eQ(O.parenL),nB());nF(e,t,n)}(e,t,n):i?function(e,t,n){if(to(O.questionDot)&&ta()===O.lessThan){if(t){n.stop=!0;return}te(),n7(),eQ(O.parenL),nB();return}if(!t&&to(O.lessThan)){let e=o.snapshot();if(n7(),eQ(O.parenL),nB(),!o.error)return;o.restoreFromSnapshot(e)}nF(e,t,n)}(e,t,n):nF(e,t,n);while(!n.stop&&!o.error)}function nF(e,t,n){if(!t&&ts(O.doubleColon))nj(),n.stop=!0,nO(e,t);else if(to(O.questionDot)){if(o.tokens[e].isOptionalChainStart=!0,t&&ta()===O.parenL){n.stop=!0;return}te(),o.tokens[o.tokens.length-1].subscriptStartIndex=e,ts(O.bracketL)?(nA(),eQ(O.bracketR)):ts(O.parenL)?nB():nV()}else if(ts(O.dot))o.tokens[o.tokens.length-1].subscriptStartIndex=e,nV();else if(ts(O.bracketL))o.tokens[o.tokens.length-1].subscriptStartIndex=e,nA(),eQ(O.bracketR);else if(!t&&to(O.parenL)){if(nD()){let t=o.snapshot(),r=o.tokens.length;te(),o.tokens[o.tokens.length-1].subscriptStartIndex=e;let a=l++;o.tokens[o.tokens.length-1].contextId=a,nB(),o.tokens[o.tokens.length-1].contextId=a,(to(O.colon)||to(O.arrow))&&(o.restoreFromSnapshot(t),n.stop=!0,o.scopeDepth++,rw(),s?to(O.colon)&&nl():i&&function(){if(to(O.colon)){let e=o.noAnonFunctionType;o.noAnonFunctionType=!0,n0(),o.noAnonFunctionType=e}}(),eQ(O.arrow),nK(r))}else{te(),o.tokens[o.tokens.length-1].subscriptStartIndex=e;let t=l++;o.tokens[o.tokens.length-1].contextId=t,nB(),o.tokens[o.tokens.length-1].contextId=t}}else to(O.backQuote)?nG():n.stop=!0}function nD(){return o.tokens[o.tokens.length-1].contextualKeyword===L._async&&!eZ()}function nB(){let e=!0;for(;!ts(O.parenR)&&!o.error;){if(e)e=!1;else if(eQ(O.comma),ts(O.parenR))break;nQ(!1)}}function nj(){let e=o.tokens.length;nH(),nO(e,!0)}function nH(){if(ts(O.modulo))return n1(),!1;if(to(O.jsxText)||to(O.jsxEmptyText))return te(),!1;if(to(O.lessThan)&&r)return o.type=O.jsxTagStart,function e(){nE(),function t(){let n=o.tokens.length-1;o.tokens[n].jsxRole=D.NoChildren;let r=0;if(!function(t){if(to(O.jsxTagEnd))return!1;nS(),s&&function(){if(ts(O.jsxTagStart)){o.tokens[o.tokens.length-1].type=O.typeParameterStart;let e=tn(1);for(;!to(O.greaterThan)&&!o.error;)nu(),ts(O.comma);nE(),tr(e)}}();let n=!1;for(;!to(O.slash)&&!to(O.jsxTagEnd)&&!o.error;){if(ts(O.braceL)){n=!0,eQ(O.ellipsis),nI(),nE();continue}n&&o.end-o.start==3&&a.charCodeAt(o.start)===M.lowercaseK&&a.charCodeAt(o.start+1)===M.lowercaseE&&a.charCodeAt(o.start+2)===M.lowercaseY&&(o.tokens[t].jsxRole=D.KeyAfterPropSpread),nw(F.ObjectKey),to(O.eq)&&(nE(),function(){switch(o.type){case O.braceL:te(),nA(),nE();return;case O.jsxTagStart:e(),nE();return;case O.string:nE();return;default:e1("JSX value should be either an expression or a quoted JSX text")}}())}let r=to(O.slash);return r&&nE(),r}(n))for(n_();;)switch(o.type){case O.jsxTagStart:if(nE(),to(O.slash)){nE(),to(O.jsxTagEnd)||nS(),o.tokens[n].jsxRole!==D.KeyAfterPropSpread&&(1===r?o.tokens[n].jsxRole=D.OneChild:r>1&&(o.tokens[n].jsxRole=D.StaticChildren));return}r++,t(),n_();break;case O.jsxText:r++,n_();break;case O.jsxEmptyText:n_();break;case O.braceL:te(),to(O.ellipsis)?(eQ(O.ellipsis),nA(),n_(),r+=2):(to(O.braceR)||(r++,nA()),n_());break;default:e1();return}}()}(),te(),!1;let e=o.potentialArrowAt===o.start;switch(o.type){case O.slash:case O.assign:o.type===O.assign&&--o.pos,function(){let e=o.pos,t=!1,n=!1;for(;;){if(o.pos>=a.length){e1("Unterminated regular expression",e);return}let r=a.charCodeAt(o.pos);if(t)t=!1;else{if(r===M.leftSquareBracket)n=!0;else if(r===M.rightSquareBracket&&n)n=!1;else if(r===M.slash&&!n)break;t=r===M.backslash}++o.pos}++o.pos,function(){for(;o.pos=0&&(o.tokens[t].start>=e||o.tokens[t].type===O._default||o.tokens[t].type===O._export);)o.tokens[t].isType=!0,t--;return}nY(!1,t)}(e,t):(i&&to(O.colon)&&n3(),nY(!1,t))}function nY(e,t=0){e&&!to(O.braceL)?nI():ry(!0,t)}function nJ(e,t=!1){let n=!0;for(;!ts(e)&&!o.error;){if(n)n=!1;else if(eQ(O.comma),ts(e))break;nQ(t)}}function nQ(e){e&&to(O.comma)||(to(O.ellipsis)?(te(),nI(!1),nq()):to(O.question)?te():nI(!1,!0))}function n1(){te(),o.tokens[o.tokens.length-1].type=O.name}function n0(e){let t=tn(0);eQ(e||O.colon),rl(),tr(t)}function n2(){eQ(O.modulo),eW(L._checks),ts(O.parenL)&&(nA(),eQ(O.parenR))}function n3(){let e=tn(0);eQ(O.colon),to(O.modulo)?n2():(rl(),to(O.modulo)&&n2()),tr(e)}function n6(e=!1){if(n1(),to(O.lessThan)&&n9(),ts(O._extends))do n8();while(!e&&ts(O.comma));if(eq(L._mixins)||eq(L._implements)){te();do n8();while(ts(O.comma))}rn(e,!1,e)}function n8(){rr(!1),to(O.lessThan)&&n7()}function n5(){n1(),to(O.lessThan)&&n9(),n0(O.eq),eJ()}function n4(e){eW(L._type),n1(),to(O.lessThan)&&n9(),to(O.colon)&&n0(O.colon),e||n0(O.eq),eJ()}function n9(){let e=tn(0);to(O.lessThan)||to(O.typeParameterStart)?te():e1();do rc(),ru(),ts(O.eq)&&rl(),to(O.greaterThan)||eQ(O.comma);while(!to(O.greaterThan)&&!o.error);eQ(O.greaterThan),tr(e)}function n7(){let e=tn(0);for(eQ(O.lessThan);!to(O.greaterThan)&&!o.error;)rl(),to(O.greaterThan)||eQ(O.comma);eQ(O.greaterThan),tr(e)}function re(){to(O.num)||to(O.string)?nH():n1()}function rt(){for(to(O.lessThan)&&n9(),eQ(O.parenL);!to(O.parenR)&&!to(O.ellipsis)&&!o.error;)rs(),to(O.parenR)||eQ(O.comma);ts(O.ellipsis)&&rs(),eQ(O.parenR),n0()}function rn(e,t,n){let r;for(t&&to(O.braceBarL)?(eQ(O.braceBarL),r=O.braceBarR):(eQ(O.braceL),r=O.braceR);!to(r)&&!o.error;){if(n&&eq(L._proto)){let t=ta();t!==O.colon&&t!==O.question&&(te(),e=!1)}if(e&&eq(L._static)){let e=ta();e!==O.colon&&e!==O.question&&te()}if(rc(),ts(O.bracketL))ts(O.bracketL)?(re(),eQ(O.bracketR),eQ(O.bracketR),to(O.lessThan)||to(O.parenL)?rt():(ts(O.question),n0())):(ta()===O.colon?(re(),n0()):rl(),eQ(O.bracketR),n0());else if(to(O.parenL)||to(O.lessThan))rt();else{if(eq(L._get)||eq(L._set)){let e=ta();(e===O.name||e===O.string||e===O.num)&&te()}to(O.ellipsis)?(eQ(O.ellipsis),ts(O.comma)||ts(O.semi),to(O.braceR)||rl()):(re(),to(O.lessThan)||to(O.parenL)?rt():(ts(O.question),n0()))}ts(O.semi)||ts(O.comma)||to(O.braceR)||to(O.braceBarR)||e1()}eQ(r)}function rr(e){for(e||n1();ts(O.dot);)n1()}function rs(){let e=ta();e===O.colon||e===O.question?(n1(),ts(O.question),n0()):rl()}function ri(){for(;!to(O.parenR)&&!to(O.ellipsis)&&!o.error;)rs(),to(O.parenR)||eQ(O.comma);ts(O.ellipsis)&&rs()}function ro(){!function e(){ts(O.question)?e():function(){for(function e(){let t=!1,n=o.noAnonFunctionType;switch(o.type){case O.name:if(eq(L._interface)){!function(){if(eW(L._interface),ts(O._extends))do n8();while(ts(O.comma));rn(!1,!1,!1)}();return}n1(),rr(!0),to(O.lessThan)&&n7();return;case O.braceL:rn(!1,!1,!1);return;case O.braceBarL:rn(!1,!0,!1);return;case O.bracketL:!function(){for(eQ(O.bracketL);o.pos0?this.tokens[this.tokenIndex-1].end:0,this.tokenIndex0&&t0&&this.tokenAtRelativeIndex(-1).type===O._delete?e.isAsyncOperation?this.resultCode+=this.helperManager.getHelperName("asyncOptionalChainDelete"):this.resultCode+=this.helperManager.getHelperName("optionalChainDelete"):e.isAsyncOperation?this.resultCode+=this.helperManager.getHelperName("asyncOptionalChain"):this.resultCode+=this.helperManager.getHelperName("optionalChain"),this.resultCode+="([")}}appendTokenSuffix(){let e=this.currentToken();if(e.isOptionalChainEnd&&!this.disableESTransforms&&(this.resultCode+="])"),e.numNullishCoalesceEnds&&!this.disableESTransforms)for(let t=0;t ${e}require`);let t=this.tokens.currentToken().contextId;if(null==t)throw Error("Expected context ID on dynamic import invocation.");for(this.tokens.copyToken();!this.tokens.matchesContextIdAndLabel(O.parenR,t);)this.rootTransformer.processToken();this.tokens.replaceToken(e?")))":"))");return}if(this.removeImportAndDetectIfShouldElide())this.tokens.removeToken();else{let e=this.tokens.stringValue();this.tokens.replaceTokenTrimmingLeftWhitespace(this.importProcessor.claimImportCode(e)),this.tokens.appendCode(this.importProcessor.claimImportCode(e))}rz(this.tokens),this.tokens.matches1(O.semi)&&this.tokens.removeToken()}removeImportAndDetectIfShouldElide(){if(this.tokens.removeInitialToken(),this.tokens.matchesContextual(L._type)&&!this.tokens.matches1AtIndex(this.tokens.currentIndex()+1,O.comma)&&!this.tokens.matchesContextualAtIndex(this.tokens.currentIndex()+1,L._from))return this.removeRemainingImport(),!0;if(this.tokens.matches1(O.name)||this.tokens.matches1(O.star))return this.removeRemainingImport(),!1;if(this.tokens.matches1(O.string))return!1;let e=!1,t=!1;for(;!this.tokens.matches1(O.string);)(!e&&this.tokens.matches1(O.braceL)||this.tokens.matches1(O.comma))&&(this.tokens.removeToken(),this.tokens.matches1(O.braceR)||(t=!0),(this.tokens.matches2(O.name,O.comma)||this.tokens.matches2(O.name,O.braceR)||this.tokens.matches4(O.name,O.name,O.name,O.comma)||this.tokens.matches4(O.name,O.name,O.name,O.braceR))&&(e=!0)),this.tokens.removeToken();return!this.keepUnusedImports&&(this.isTypeScriptTransformEnabled?!e:!!this.isFlowTransformEnabled&&t&&!e)}removeRemainingImport(){for(;!this.tokens.matches1(O.string);)this.tokens.removeToken()}processIdentifier(){let e=this.tokens.currentToken();if(e.shadowsGlobal)return!1;if(e.identifierRole===F.ObjectShorthand)return this.processObjectShorthand();if(e.identifierRole!==F.Access)return!1;let t=this.importProcessor.getIdentifierReplacement(this.tokens.identifierNameForToken(e));if(!t)return!1;let n=this.tokens.currentIndex()+1;for(;n=2&&this.tokens.matches1AtIndex(e-2,O.dot)||e>=2&&[O._var,O._let,O._const].includes(this.tokens.tokens[e-2].type))return!1;let n=this.importProcessor.resolveExportBinding(this.tokens.identifierNameForToken(t));return!!n&&(this.tokens.copyToken(),this.tokens.appendCode(` ${n} =`),!0)}processComplexAssignment(){let e=this.tokens.currentIndex(),t=this.tokens.tokens[e-1];if(t.type!==O.name||t.shadowsGlobal||e>=2&&this.tokens.matches1AtIndex(e-2,O.dot))return!1;let n=this.importProcessor.resolveExportBinding(this.tokens.identifierNameForToken(t));return!!n&&(this.tokens.appendCode(` = ${n}`),this.tokens.copyToken(),!0)}processPreIncDec(){let e=this.tokens.currentIndex(),t=this.tokens.tokens[e+1];if(t.type!==O.name||t.shadowsGlobal||e+2=1&&this.tokens.matches1AtIndex(e-1,O.dot))return!1;let r=this.tokens.identifierNameForToken(t),s=this.importProcessor.resolveExportBinding(r);if(!s)return!1;let i=this.tokens.rawCodeForToken(n),o=this.importProcessor.getIdentifierReplacement(r)||r;if("++"===i)this.tokens.replaceToken(`(${o} = ${s} = ${o} + 1, ${o} - 1)`);else if("--"===i)this.tokens.replaceToken(`(${o} = ${s} = ${o} - 1, ${o} + 1)`);else throw Error(`Unexpected operator: ${i}`);return this.tokens.removeToken(),!0}processExportDefault(){let e=!0;if(this.tokens.matches4(O._export,O._default,O._function,O.name)||this.tokens.matches5(O._export,O._default,O.name,O._function,O.name)&&this.tokens.matchesContextualAtIndex(this.tokens.currentIndex()+2,L._async)){this.tokens.removeInitialToken(),this.tokens.removeToken();let e=this.processNamedFunction();this.tokens.appendCode(` exports.default = ${e};`)}else if(this.tokens.matches4(O._export,O._default,O._class,O.name)||this.tokens.matches5(O._export,O._default,O._abstract,O._class,O.name)||this.tokens.matches3(O._export,O._default,O.at)){this.tokens.removeInitialToken(),this.tokens.removeToken(),this.copyDecorators(),this.tokens.matches1(O._abstract)&&this.tokens.removeToken();let e=this.rootTransformer.processNamedClass();this.tokens.appendCode(` exports.default = ${e};`)}else if(rW(this.isTypeScriptTransformEnabled,this.keepUnusedImports,this.tokens,this.declarationInfo))e=!1,this.tokens.removeInitialToken(),this.tokens.removeToken(),this.tokens.removeToken();else if(this.reactHotLoaderTransformer){let e=this.nameManager.claimFreeName("_default");this.tokens.replaceToken(`let ${e}; exports.`),this.tokens.copyToken(),this.tokens.appendCode(` = ${e} =`),this.reactHotLoaderTransformer.setExtractedDefaultExportName(e)}else this.tokens.replaceToken("exports."),this.tokens.copyToken(),this.tokens.appendCode(" =");e&&(this.hadDefaultExport=!0)}copyDecorators(){for(;this.tokens.matches1(O.at);)if(this.tokens.copyToken(),this.tokens.matches1(O.parenL))this.tokens.copyExpectedToken(O.parenL),this.rootTransformer.processBalancedCode(),this.tokens.copyExpectedToken(O.parenR);else{for(this.tokens.copyExpectedToken(O.name);this.tokens.matches1(O.dot);)this.tokens.copyExpectedToken(O.dot),this.tokens.copyExpectedToken(O.name);this.tokens.matches1(O.parenL)&&(this.tokens.copyExpectedToken(O.parenL),this.rootTransformer.processBalancedCode(),this.tokens.copyExpectedToken(O.parenR))}}processExportVar(){this.isSimpleExportVar()?this.processSimpleExportVar():this.processComplexExportVar()}isSimpleExportVar(){let e=this.tokens.currentIndex();if(e++,e++,!this.tokens.matches1AtIndex(e,O.name))return!1;for(e++;en.call(t,...e)),t=void 0)}return n}([this,"access",e=>e.importProcessor,"optionalAccess",e=>e.getGlobalNames,"call",e=>e(),"optionalAccess",e=>e.has,"call",e=>e(rY)])&&this.extractHoistedCalls()}getHoistedCode(){return this.hoistedFunctionNames.length>0?this.hoistedFunctionNames.map(e=>`${e}();`).join(""):""}extractHoistedCalls(){this.tokens.removeToken();let e=!1;for(;this.tokens.matches3(O.dot,O.name,O.parenL);){let t=this.tokens.identifierNameAtIndex(this.tokens.currentIndex()+1);if(rJ.includes(t)){let t=this.nameManager.claimFreeName("__jestHoist");this.hoistedFunctionNames.push(t),this.tokens.replaceToken(`function ${t}(){${rY}.`),this.tokens.copyToken(),this.tokens.copyToken(),this.rootTransformer.processBalancedCode(),this.tokens.copyExpectedToken(O.parenR),this.tokens.appendCode(";}"),e=!1}else e?this.tokens.copyToken():this.tokens.replaceToken(`${rY}.`),this.tokens.copyToken(),this.tokens.copyToken(),this.rootTransformer.processBalancedCode(),this.tokens.copyExpectedToken(O.parenR),e=!0}return!0}}class r1 extends tA{constructor(e){super(),this.tokens=e}process(){if(this.tokens.matches1(O.num)){let e=this.tokens.currentTokenCode();if(e.includes("_"))return this.tokens.replaceToken(e.replace(/_/g,"")),!0}return!1}}class r0 extends tA{constructor(e,t){super(),this.tokens=e,this.nameManager=t}process(){return!!this.tokens.matches2(O._catch,O.braceL)&&(this.tokens.copyToken(),this.tokens.appendCode(` (${this.nameManager.claimFreeName("e")})`),!0)}}class r2 extends tA{constructor(e,t){super(),this.tokens=e,this.nameManager=t}process(){if(this.tokens.matches1(O.nullishCoalescing)){let e=this.tokens.currentToken();return this.tokens.tokens[e.nullishStartIndex].isAsyncOperation?this.tokens.replaceTokenTrimmingLeftWhitespace(", async () => ("):this.tokens.replaceTokenTrimmingLeftWhitespace(", () => ("),!0}if(this.tokens.matches1(O._delete)&&this.tokens.tokenAtRelativeIndex(1).isOptionalChainStart)return this.tokens.removeInitialToken(),!0;let e=this.tokens.currentToken().subscriptStartIndex;if(null!=e&&this.tokens.tokens[e].isOptionalChainStart&&this.tokens.tokenAtRelativeIndex(-1).type!==O._super){let t;let n=this.nameManager.claimFreeName("_");if(t=e>0&&this.tokens.matches1AtIndex(e-1,O._delete)&&this.isLastSubscriptInChain()?`${n} => delete ${n}`:`${n} => ${n}`,this.tokens.tokens[e].isAsyncOperation&&(t=`async ${t}`),this.tokens.matches2(O.questionDot,O.parenL)||this.tokens.matches2(O.questionDot,O.lessThan))this.justSkippedSuper()&&this.tokens.appendCode(".bind(this)"),this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalCall', ${t}`);else if(this.tokens.matches2(O.questionDot,O.bracketL))this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalAccess', ${t}`);else if(this.tokens.matches1(O.questionDot))this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalAccess', ${t}.`);else if(this.tokens.matches1(O.dot))this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'access', ${t}.`);else if(this.tokens.matches1(O.bracketL))this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'access', ${t}[`);else if(this.tokens.matches1(O.parenL))this.justSkippedSuper()&&this.tokens.appendCode(".bind(this)"),this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'call', ${t}(`);else throw Error("Unexpected subscript operator in optional chain.");return!0}return!1}isLastSubscriptInChain(){let e=0;for(let t=this.tokens.currentIndex()+1;;t++){if(t>=this.tokens.tokens.length)throw Error("Reached the end of the code while finding the end of the access chain.");if(this.tokens.tokens[t].isOptionalChainStart?e++:this.tokens.tokens[t].isOptionalChainEnd&&e--,e<0)return!0;if(0===e&&null!=this.tokens.tokens[t].subscriptStartIndex)return!1}}justSkippedSuper(){let e=0,t=this.tokens.currentIndex()-1;for(;;){if(t<0)throw Error("Reached the start of the code while finding the start of the access chain.");if(this.tokens.tokens[t].isOptionalChainStart?e--:this.tokens.tokens[t].isOptionalChainEnd&&e++,e<0)return!1;if(0===e&&null!=this.tokens.tokens[t].subscriptStartIndex)return this.tokens.tokens[t-1].type===O._super;t--}}}class r3 extends tA{constructor(e,t,n,r){super(),this.rootTransformer=e,this.tokens=t,this.importProcessor=n,this.options=r}process(){let e=this.tokens.currentIndex();if("createReactClass"===this.tokens.identifierName()){let t=this.importProcessor&&this.importProcessor.getIdentifierReplacement("createReactClass");return t?this.tokens.replaceToken(`(0, ${t})`):this.tokens.copyToken(),this.tryProcessCreateClassCall(e),!0}if(this.tokens.matches3(O.name,O.dot,O.name)&&"React"===this.tokens.identifierName()&&"createClass"===this.tokens.identifierNameAtIndex(this.tokens.currentIndex()+2)){let t=this.importProcessor&&this.importProcessor.getIdentifierReplacement("React")||"React";return t?this.tokens.replaceToken(t):this.tokens.copyToken(),this.tokens.copyToken(),this.tokens.copyToken(),this.tryProcessCreateClassCall(e),!0}return!1}tryProcessCreateClassCall(e){let t=this.findDisplayName(e);t&&this.classNeedsDisplayName()&&(this.tokens.copyExpectedToken(O.parenL),this.tokens.copyExpectedToken(O.braceL),this.tokens.appendCode(`displayName: '${t}',`),this.rootTransformer.processBalancedCode(),this.tokens.copyExpectedToken(O.braceR),this.tokens.copyExpectedToken(O.parenR))}findDisplayName(e){return e<2?null:this.tokens.matches2AtIndex(e-2,O.name,O.eq)||e>=2&&this.tokens.tokens[e-2].identifierRole===F.ObjectKey?this.tokens.identifierNameAtIndex(e-2):this.tokens.matches2AtIndex(e-2,O._export,O._default)?this.getDisplayNameFromFilename():null}getDisplayNameFromFilename(){let e=(this.options.filePath||"unknown").split("/"),t=e[e.length-1],n=t.lastIndexOf("."),r=-1===n?t:t.slice(0,n);return"index"===r&&e[e.length-2]?e[e.length-2]:r}classNeedsDisplayName(){let e=this.tokens.currentIndex();if(!this.tokens.matches2(O.parenL,O.braceL))return!1;let t=e+1,n=this.tokens.tokens[t].contextId;if(null==n)throw Error("Expected non-null context ID on object open-brace.");for(;e({variableName:e,uniqueLocalName:e}));return this.extractedDefaultExportName&&t.push({variableName:this.extractedDefaultExportName,uniqueLocalName:"default"}),`
+;(function () {
+ var reactHotLoader = require('react-hot-loader').default;
+ var leaveModule = require('react-hot-loader').leaveModule;
+ if (!reactHotLoader) {
+ return;
+ }
+${t.map(({variableName:e,uniqueLocalName:t})=>` reactHotLoader.register(${e}, "${t}", ${JSON.stringify(this.filePath||"")});`).join("\n")}
+ leaveModule(module);
+})();`}process(){return!1}}let r8=new Set(["break","case","catch","class","const","continue","debugger","default","delete","do","else","export","extends","finally","for","function","if","import","in","instanceof","new","return","super","switch","this","throw","try","typeof","var","void","while","with","yield","enum","implements","interface","let","package","private","protected","public","static","await","false","null","true"]);function r5(e){if(0===e.length||!e8[e.charCodeAt(0)])return!1;for(let t=1;t` var ${e};`).join(""),this.transformers))e+=t.getHoistedCode();let t="";for(let e of this.transformers)t+=e.getSuffixCode();let n=this.tokens.finish(),{code:r}=n;if(!r.startsWith("#!"))return{code:e+r+t,mappings:this.shiftMappings(n.mappings,e.length)};{let s=r.indexOf("\n");return -1===s&&(s=r.length,r+="\n"),{code:r.slice(0,s+1)+e+r.slice(s+1)+t,mappings:this.shiftMappings(n.mappings,e.length)}}}processBalancedCode(){let e=0,t=0;for(;!this.tokens.isAtEnd();){if(this.tokens.matches1(O.braceL)||this.tokens.matches1(O.dollarBraceL))e++;else if(this.tokens.matches1(O.braceR)){if(0===e)return;e--}if(this.tokens.matches1(O.parenL))t++;else if(this.tokens.matches1(O.parenR)){if(0===t)return;t--}this.processToken()}}processToken(){if(this.tokens.matches1(O._class)){this.processClass();return}for(let e of this.transformers)if(e.process())return;this.tokens.copyToken()}processNamedClass(){if(!this.tokens.matches2(O._class,O.name))throw Error("Expected identifier for exported class name.");let e=this.tokens.identifierNameAtIndex(this.tokens.currentIndex()+1);return this.processClass(),e}processClass(){let e=function(e,t,n,r){let s=t.snapshot(),i=function(e){let t=e.currentToken(),n=t.contextId;if(null==n)throw Error("Expected context ID on class token.");let r=t.isExpression;if(null==r)throw Error("Expected isExpression on class token.");let s=null,i=!1;for(e.nextToken(),e.matches1(O.name)&&(s=e.identifierName());!e.matchesContextIdAndLabel(O.braceL,n);)e.matches1(O._extends)&&!e.currentToken().isType&&(i=!0),e.nextToken();return{isExpression:r,className:s,hasSuperclass:i}}(t),o=[],a=[],l=[],u=null,c=[],h=[],p=t.currentToken().contextId;if(null==p)throw Error("Expected non-null class context ID on class open-brace.");for(t.nextToken();!t.matchesContextIdAndLabel(O.braceR,p);)if(t.matchesContextual(L._constructor)&&!t.currentToken().isType)({constructorInitializerStatements:o,constructorInsertPos:u}=rH(t));else if(t.matches1(O.semi))r||h.push({start:t.currentIndex(),end:t.currentIndex()+1}),t.nextToken();else if(t.currentToken().isType)t.nextToken();else{let s=t.currentIndex(),i=!1,d=!1,f=!1;for(;rV(t.currentToken());)t.matches1(O._static)&&(i=!0),t.matches1(O.hash)&&(d=!0),(t.matches1(O._declare)||t.matches1(O._abstract))&&(f=!0),t.nextToken();if(i&&t.matches1(O.braceL)||d){rj(t,p);continue}if(t.matchesContextual(L._constructor)&&!t.currentToken().isType){({constructorInitializerStatements:o,constructorInsertPos:u}=rH(t));continue}let m=t.currentIndex();if(function(e){if(e.matches1(O.bracketL)){let t=e.currentToken().contextId;if(null==t)throw Error("Expected class context ID on computed name open bracket.");for(;!e.matchesContextIdAndLabel(O.bracketR,t);)e.nextToken();e.nextToken()}else e.nextToken()}(t),t.matches1(O.lessThan)||t.matches1(O.parenL)){rj(t,p);continue}for(;t.currentToken().isType;)t.nextToken();if(t.matches1(O.eq)){let r;let s=t.currentIndex(),o=t.currentToken().rhsEndIndex;if(null==o)throw Error("Expected rhsEndIndex on class field assignment.");for(t.nextToken();t.currentIndex()0,n=e.headerInfo.className;t&&(n=this.nameManager.claimFreeName("_class"),this.generatedVariables.push(n),this.tokens.appendCode(` (${n} =`));let r=this.tokens.currentToken().contextId;if(null==r)throw Error("Expected class to have a context ID.");for(this.tokens.copyExpectedToken(O._class);!this.tokens.matchesContextIdAndLabel(O.braceL,r);)this.processToken();this.processClassBody(e,n);let s=e.staticInitializerNames.map(e=>`${n}.${e}()`);t?this.tokens.appendCode(`, ${s.map(e=>`${e}, `).join("")}${n})`):e.staticInitializerNames.length>0&&this.tokens.appendCode(` ${s.map(e=>`${e};`).join(" ")}`)}processClassBody(e,t){let{headerInfo:n,constructorInsertPos:r,constructorInitializerStatements:s,fields:i,instanceInitializerNames:o,rangesToRemove:a}=e,l=0,u=0,c=this.tokens.currentToken().contextId;if(null==c)throw Error("Expected non-null context ID on class.");this.tokens.copyExpectedToken(O.braceL),this.isReactHotLoaderTransformEnabled&&this.tokens.appendCode("__reactstandin__regenerateByEval(key, code) {this[key] = eval(code);}");let h=s.length+o.length>0;if(null===r&&h){let e=this.makeConstructorInitCode(s,o,t);if(n.hasSuperclass){let t=this.nameManager.claimFreeName("args");this.tokens.appendCode(`constructor(...${t}) { super(...${t}); ${e}; }`)}else this.tokens.appendCode(`constructor() { ${e}; }`)}for(;!this.tokens.matchesContextIdAndLabel(O.braceR,c);)if(l=a[u].start){for(this.tokens.currentIndex()`${n}.prototype.${e}.call(this)`)].join(";")}processPossibleArrowParamEnd(){if(this.tokens.matches2(O.parenR,O.colon)&&this.tokens.tokenAtRelativeIndex(1).isType){let e=this.tokens.currentIndex()+1;for(;this.tokens.tokens[e].isType;)e++;if(this.tokens.matches1AtIndex(e,O.arrow)){for(this.tokens.removeInitialToken();this.tokens.currentIndex()"),!0}}return!1}processPossibleAsyncArrowWithTypeParams(){if(!this.tokens.matchesContextual(L._async)&&!this.tokens.matches1(O._async))return!1;let e=this.tokens.tokenAtRelativeIndex(1);if(e.type!==O.lessThan||!e.isType)return!1;let t=this.tokens.currentIndex()+1;for(;this.tokens.tokens[t].isType;)t++;if(this.tokens.matches1AtIndex(t,O.parenL)){for(this.tokens.replaceToken("async ("),this.tokens.removeInitialToken();this.tokens.currentIndex()t in e?r7(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,so=(e,t)=>{for(var n in t||(t={}))sr.call(t,n)&&si(e,n,t[n]);if(sn)for(var n of sn(t))ss.call(t,n)&&si(e,n,t[n]);return e},sa=(e,t)=>se(e,st(t)),sl=(e,t)=>{var n={};for(var r in e)sr.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&sn)for(var r of sn(e))0>t.indexOf(r)&&ss.call(e,r)&&(n[r]=e[r]);return n},su=(e,t,n)=>new Promise((r,s)=>{var i=e=>{try{a(n.next(e))}catch(e){s(e)}},o=e=>{try{a(n.throw(e))}catch(e){s(e)}},a=e=>e.done?r(e.value):Promise.resolve(e.value).then(i,o);a((n=n.apply(e,t)).next())}),sc=e=>{let{code:t,className:n,style:r,tabMode:s,theme:i,prism:o,language:a,disabled:l,onChange:u,editorRef:c}=e,h=sl(e,["code","className","style","tabMode","theme","prism","language","disabled","onChange","editorRef"]),p=c||(0,j.useRef)(null),[d,f]=(0,j.useState)(t||""),{theme:m}=e;return(0,j.useEffect)(()=>{f(t)},[t]),!function(e,t,n){function r(t){var n=e.current;if(n){var r=eD(n);n=eF(n),r.position+=t.length-n.length,u.position=r,u.onChange(t,r)}}function s(t,n){var r=e.current;if(r){var s=window.getSelection().getRangeAt(0);s.deleteContents(),s.collapse();var i=n||0;(s=eB(r,n=(s=eD(r)).position+(0>i?i:0),s.position+(0i-h||o&&o[1]===r?h=i:(n=++u.historyAt,u.history[n]=[s,r],u.history.splice(n+1),500f(e.slice(0,-1)),{disabled:l,indentation:"indentation"===s?2:void 0}),(0,j.useEffect)(()=>{u&&u(d)},[d]),(0,ej.jsx)("div",{className:n,style:r,children:(0,ej.jsx)(eR,{prism:o||et,code:d,theme:i||en.nightOwl,language:a,children:({className:e,tokens:t,getLineProps:n,getTokenProps:r,style:s})=>(0,ej.jsx)("pre",sa(so({className:e,style:so(so({margin:0,outline:"none",padding:10,fontFamily:"inherit"},m&&"object"==typeof m.plain?m.plain:{}),s),ref:p,spellCheck:"false"},h),{children:t.map((e,t)=>(0,ej.jsxs)("span",sa(so({},n({line:e})),{children:[e.filter(e=>!e.empty).map((e,t)=>(0,ej.jsx)("span",so({},r({token:e})),`token-${t}`)),"\n"]}),`line-${t}`))}))})})};sc.defaultProps={tabMode:"indentation"};var sh=(0,j.createContext)({}),sp=["jsx","imports"];function sd(e={}){let t=Array.isArray(e.transforms)?e.transforms.filter(Boolean):sp;return e=>(function(e,t){tG.strictCheck(t);try{let n=function(e,t){let n=t.transforms.includes("jsx"),u=t.transforms.includes("typescript"),c=t.transforms.includes("flow"),h=!0===t.disableESTransforms,p=function(e,t,n,u){if(u&&n)throw Error("Cannot combine flow and typescript plugins.");a=e,o=new e$,l=1,r=t,s=n,i=u;let c=(0===o.pos&&a.charCodeAt(0)===M.numberSign&&a.charCodeAt(1)===M.exclamationMark&&tf(2),td(),function(){if(rb(O.eof),o.scopes.push(new eH(0,o.tokens.length,!0)),0!==o.scopeDepth)throw Error(`Invalid scope depth at end of file: ${o.scopeDepth}`);return new rD(o.tokens,o.scopes)}());if(o.error)throw function(e){if("pos"in e){let t=function(e){let t=1,n=1;for(let r=0;rclass extends j.Component{componentDidCatch(e){t(e)}render(){return"function"==typeof e?(0,ej.jsx)(e,{}):j.isValidElement(e)?e:null}},sm=(e,t)=>{let n=Object.keys(t),r=n.map(e=>t[e]);return Function(...n,e)(...r)},sg='const _jsxFileName = "";',sy=e=>e.trim().replace(/;$/,""),sb=e=>e.replace(sg,"").trim(),sk=e=>sg+e,sv=e=>`return (${e})`,sT=({code:e="",scope:t={},enableTypeScript:n=!0},r)=>{let s=["jsx"];return n&&s.push("typescript"),sf(sm((function(...e){return e.reduce((e,t)=>(...n)=>e(t(...n)))})(sk,sd({transforms:["imports"]}),sv,sb,sy,sd({transforms:s}),sy)(e),so({React:j},t)),r)},sx=({code:e="",scope:t={},enableTypeScript:n=!0},r,s)=>{if(!/render\s*\(/.test(e))return s(SyntaxError("No-Inline evaluations must call `render`."));let i=["jsx","imports"];n&&i.splice(1,0,"typescript"),sm(sd({transforms:i})(e),sa(so({React:j},t),{render:e=>{void 0===e?s(SyntaxError("`render` must be called with valid JSX.")):r(sf(e,s))}}))},sw=function({children:e,code:t="",language:n="tsx",theme:r,enableTypeScript:s=!0,disabled:i=!1,scope:o,transformCode:a,noInline:l=!1,skipInitialRender:u=!1}){let c=(0,j.useRef)("initial"),[h,p]=(0,j.useState)(()=>(function(e){let t={element:void 0,error:void 0};if(!u){let n=e=>t.element=e,r=e=>t.error=String(e);try{let t={code:a?a(e):e,scope:o,enableTypeScript:s};l?sx(t,n,r):n(sT(t,r)),c.current=e}catch(e){r(e)}}return t})(t));function d(e){return su(this,null,function*(){if(c.current===e)return c.current="used",Promise.resolve();let t=e=>{p({error:e.toString(),element:void 0})};try{let n=a?a(e):e;try{let e=yield Promise.resolve(n),r=e=>p({error:void 0,element:e});if("string"!=typeof e)throw Error("Code failed to transform");let i={code:e,scope:o,enableTypeScript:s};l?(p({error:void 0,element:null}),sx(i,r,t)):r(sT(i,t))}catch(e){return t(e)}}catch(e){return t(e),Promise.resolve()}})}let f=e=>p({error:e.toString()});return(0,j.useEffect)(()=>{d(t).catch(f)},[t,o,l,a]),(0,ej.jsx)(sh.Provider,{value:sa(so({},h),{code:t,language:n,theme:r,disabled:i,onError:f,onChange:e=>{d(e).catch(f)}}),children:e})};function sS(e){let{code:t,language:n,theme:r,disabled:s,onChange:i}=(0,j.useContext)(sh);return(0,ej.jsx)(sc,so({theme:r,code:t,language:n,disabled:s,onChange:i},e))}function sE(e){let{error:t}=(0,j.useContext)(sh);return t?(0,ej.jsx)("pre",sa(so({},e),{children:t})):null}var s_=function(e){var{Component:t="div"}=e,n=sl(e,["Component"]);let{element:r}=(0,j.useContext)(sh);return(0,ej.jsx)(t,sa(so({},n),{children:r?(0,ej.jsx)(r,{}):null}))}},906622:function(e,t,n){"use strict";n.d(t,{aP:function(){return rU}});var r=n(987480);let s=e=>{if("string"!=typeof e)throw TypeError("invalid pattern");if(e.length>65536)throw TypeError("pattern is too long")},i={"[:alnum:]":["\\p{L}\\p{Nl}\\p{Nd}",!0],"[:alpha:]":["\\p{L}\\p{Nl}",!0],"[:ascii:]":["\\x00-\\x7f",!1],"[:blank:]":["\\p{Zs}\\t",!0],"[:cntrl:]":["\\p{Cc}",!0],"[:digit:]":["\\p{Nd}",!0],"[:graph:]":["\\p{Z}\\p{C}",!0,!0],"[:lower:]":["\\p{Ll}",!0],"[:print:]":["\\p{C}",!0],"[:punct:]":["\\p{P}",!0],"[:space:]":["\\p{Z}\\t\\r\\n\\v\\f",!0],"[:upper:]":["\\p{Lu}",!0],"[:word:]":["\\p{L}\\p{Nl}\\p{Nd}\\p{Pc}",!0],"[:xdigit:]":["A-Fa-f0-9",!1]},o=e=>e.replace(/[[\]\\-]/g,"\\$&"),a=e=>e.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),l=e=>e.join(""),u=(e,t)=>{if("["!==e.charAt(t))throw Error("not in a brace expression");let n=[],r=[],s=t+1,u=!1,c=!1,h=!1,p=!1,d=t,f="";e:for(;sf?n.push(o(f)+"-"+o(a)):a===f&&n.push(o(a)),f="",s++;continue}if(e.startsWith("-]",s+1)){n.push(o(a+"-")),s+=2;continue}if(e.startsWith("-",s+1)){f=a,s+=2;continue}n.push(o(a)),s++}if(dt?e.replace(/\[([^\/\\])\]/g,"$1"):e.replace(/((?!\\).|^)\[([^\/\\])\]/g,"$1$2").replace(/\\([^\/])/g,"$1"),h=new Set(["!","?","+","*","@"]),p=e=>h.has(e),d="(?!\\.)",f=new Set(["[","."]),m=new Set(["..","."]),g=new Set("().*{}+?[]^$\\!"),y=e=>e.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),b="[^/]",k=b+"*?",v=b+"+?";class T{type;#e;#t;#n=!1;#r=[];#s;#i;#o;#a=!1;#l;#u;#c=!1;constructor(e,t,n={}){this.type=e,e&&(this.#t=!0),this.#s=t,this.#e=this.#s?this.#s.#e:this,this.#l=this.#e===this?n:this.#e.#l,this.#o=this.#e===this?[]:this.#e.#o,"!"!==e||this.#e.#a||this.#o.push(this),this.#i=this.#s?this.#s.#r.length:0}get hasMagic(){if(void 0!==this.#t)return this.#t;for(let e of this.#r)if("string"!=typeof e&&(e.type||e.hasMagic))return this.#t=!0;return this.#t}toString(){return void 0!==this.#u?this.#u:this.type?this.#u=this.type+"("+this.#r.map(e=>String(e)).join("|")+")":this.#u=this.#r.map(e=>String(e)).join("")}#h(){let e;if(this!==this.#e)throw Error("should only call on root");if(this.#a)return this;for(this.toString(),this.#a=!0;e=this.#o.pop();){if("!"!==e.type)continue;let t=e,n=t.#s;for(;n;){for(let r=t.#i+1;!n.type&&r"string"==typeof e?e:e.toJSON()):[this.type,...this.#r.map(e=>e.toJSON())];return this.isStart()&&!this.type&&e.unshift([]),this.isEnd()&&(this===this.#e||this.#e.#a&&this.#s?.type==="!")&&e.push({}),e}isStart(){if(this.#e===this)return!0;if(!this.#s?.isStart())return!1;if(0===this.#i)return!0;let e=this.#s;for(let t=0;t{let[r,s,i,o]="string"==typeof t?T.#d(t,this.#t,n):t.toRegExpSource(e);return this.#t=this.#t||i,this.#n=this.#n||o,r}).join(""),s="";if(this.isStart()&&"string"==typeof this.#r[0]&&!(1===this.#r.length&&m.has(this.#r[0]))){let n=t&&f.has(r.charAt(0))||r.startsWith("\\.")&&f.has(r.charAt(2))||r.startsWith("\\.\\.")&&f.has(r.charAt(4)),i=!t&&!e&&f.has(r.charAt(0));s=n?"(?!(?:^|/)\\.\\.?(?:$|/))":i?d:""}let i="";return this.isEnd()&&this.#e.#a&&this.#s?.type==="!"&&(i="(?:$|\\/)"),[s+r+i,c(r),this.#t=!!this.#t,this.#n]}let n="*"===this.type||"+"===this.type,r="!"===this.type?"(?:(?!(?:":"(?:",s=this.#f(t);if(this.isStart()&&this.isEnd()&&!s&&"!"!==this.type){let e=this.toString();return this.#r=[e],this.type=null,this.#t=void 0,[e,c(this.toString()),!1,!1]}let i=!n||e||t||!d?"":this.#f(!0);return i===s&&(i=""),i&&(s=`(?:${s})(?:${i})*?`),["!"===this.type&&this.#c?(this.isStart()&&!t?d:"")+v:r+s+("!"===this.type?"))"+(!this.isStart()||t||e?"":d)+k+")":"@"===this.type?")":"?"===this.type?")?":"+"===this.type&&i?")":"*"===this.type&&i?")?":`)${this.type}`),c(s),this.#t=!!this.#t,this.#n]}#f(e){return this.#r.map(t=>{if("string"==typeof t)throw Error("string type in extglob ast??");let[n,r,s,i]=t.toRegExpSource(e);return this.#n=this.#n||i,n}).filter(e=>!(this.isStart()&&this.isEnd())||!!e).join("|")}static #d(e,t,n=!1){let r=!1,s="",i=!1;for(let o=0;o(s(t),(!!n.nocomment||"#"!==t.charAt(0))&&new J(t,n).match(e)),S=/^\*+([^+@!?\*\[\(]*)$/,E=e=>t=>!t.startsWith(".")&&t.endsWith(e),_=e=>t=>t.endsWith(e),C=e=>(e=e.toLowerCase(),t=>!t.startsWith(".")&&t.toLowerCase().endsWith(e)),A=e=>(e=e.toLowerCase(),t=>t.toLowerCase().endsWith(e)),I=/^\*+\.\*+$/,P=e=>!e.startsWith(".")&&e.includes("."),N=e=>"."!==e&&".."!==e&&e.includes("."),R=/^\.\*+$/,L=e=>"."!==e&&".."!==e&&e.startsWith("."),O=/^\*+$/,M=e=>0!==e.length&&!e.startsWith("."),F=e=>0!==e.length&&"."!==e&&".."!==e,D=/^\?+([^+@!?\*\[\(]*)?$/,B=([e,t=""])=>{let n=$([e]);return t?(t=t.toLowerCase(),e=>n(e)&&e.toLowerCase().endsWith(t)):n},j=([e,t=""])=>{let n=U([e]);return t?(t=t.toLowerCase(),e=>n(e)&&e.toLowerCase().endsWith(t)):n},H=([e,t=""])=>{let n=U([e]);return t?e=>n(e)&&e.endsWith(t):n},V=([e,t=""])=>{let n=$([e]);return t?e=>n(e)&&e.endsWith(t):n},$=([e])=>{let t=e.length;return e=>e.length===t&&!e.startsWith(".")},U=([e])=>{let t=e.length;return e=>e.length===t&&"."!==e&&".."!==e},q="object"==typeof x&&x?"object"==typeof x.env&&x.env&&x.env.__MINIMATCH_TESTING_PLATFORM__||x.platform:"posix",G={win32:{sep:"\\"},posix:{sep:"/"}},z="win32"===q?G.win32.sep:G.posix.sep;w.sep=z;let W=Symbol("globstar **");w.GLOBSTAR=W,w.filter=(e,t={})=>n=>w(n,e,t);let Z=(e,t={})=>Object.assign({},e,t);w.defaults=e=>{if(!e||"object"!=typeof e||!Object.keys(e).length)return w;let t=w;return Object.assign((n,r,s={})=>t(n,r,Z(e,s)),{Minimatch:class extends t.Minimatch{constructor(t,n={}){super(t,Z(e,n))}static defaults(n){return t.defaults(Z(e,n)).Minimatch}},AST:class extends t.AST{constructor(t,n,r={}){super(t,n,Z(e,r))}static fromGlob(n,r={}){return t.AST.fromGlob(n,Z(e,r))}},unescape:(n,r={})=>t.unescape(n,Z(e,r)),escape:(n,r={})=>t.escape(n,Z(e,r)),filter:(n,r={})=>t.filter(n,Z(e,r)),defaults:n=>t.defaults(Z(e,n)),makeRe:(n,r={})=>t.makeRe(n,Z(e,r)),braceExpand:(n,r={})=>t.braceExpand(n,Z(e,r)),match:(n,r,s={})=>t.match(n,r,Z(e,s)),sep:t.sep,GLOBSTAR:W})};let K=(e,t={})=>(s(e),t.nobrace||!/\{(?:(?!\{).)*\}/.test(e))?[e]:r(e);w.braceExpand=K,w.makeRe=(e,t={})=>new J(e,t).makeRe(),w.match=(e,t,n={})=>{let r=new J(t,n);return e=e.filter(e=>r.match(e)),r.options.nonull&&!e.length&&e.push(t),e};let X=/[?*]|[+@!]\(.*?\)|\[|\]/,Y=e=>e.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&");class J{options;set;pattern;windowsPathsNoEscape;nonegate;negate;comment;empty;preserveMultipleSlashes;partial;globSet;globParts;nocase;isWindows;platform;windowsNoMagicRoot;regexp;constructor(e,t={}){s(e),t=t||{},this.options=t,this.pattern=e,this.platform=t.platform||q,this.isWindows="win32"===this.platform,this.windowsPathsNoEscape=!!t.windowsPathsNoEscape||!1===t.allowWindowsEscape,this.windowsPathsNoEscape&&(this.pattern=this.pattern.replace(/\\/g,"/")),this.preserveMultipleSlashes=!!t.preserveMultipleSlashes,this.regexp=null,this.negate=!1,this.nonegate=!!t.nonegate,this.comment=!1,this.empty=!1,this.partial=!!t.partial,this.nocase=!!this.options.nocase,this.windowsNoMagicRoot=void 0!==t.windowsNoMagicRoot?t.windowsNoMagicRoot:!!(this.isWindows&&this.nocase),this.globSet=[],this.globParts=[],this.set=[],this.make()}hasMagic(){if(this.options.magicalBraces&&this.set.length>1)return!0;for(let e of this.set)for(let t of e)if("string"!=typeof t)return!0;return!1}debug(...e){}make(){let e=this.pattern,t=this.options;if(!t.nocomment&&"#"===e.charAt(0)){this.comment=!0;return}if(!e){this.empty=!0;return}this.parseNegate(),this.globSet=[...new Set(this.braceExpand())],t.debug&&(this.debug=(...e)=>console.error(...e)),this.debug(this.pattern,this.globSet);let n=this.globSet.map(e=>this.slashSplit(e));this.globParts=this.preprocess(n),this.debug(this.pattern,this.globParts);let r=this.globParts.map((e,t,n)=>{if(this.isWindows&&this.windowsNoMagicRoot){let t=""===e[0]&&""===e[1]&&("?"===e[2]||!X.test(e[2]))&&!X.test(e[3]),n=/^[a-z]:/i.test(e[0]);if(t)return[...e.slice(0,4),...e.slice(4).map(e=>this.parse(e))];if(n)return[e[0],...e.slice(1).map(e=>this.parse(e))]}return e.map(e=>this.parse(e))});if(this.debug(this.pattern,r),this.set=r.filter(e=>-1===e.indexOf(!1)),this.isWindows)for(let e=0;e=2?(e=this.firstPhasePreProcess(e),e=this.secondPhasePreProcess(e)):e=t>=1?this.levelOneOptimize(e):this.adjascentGlobstarOptimize(e),e}adjascentGlobstarOptimize(e){return e.map(e=>{let t=-1;for(;-1!==(t=e.indexOf("**",t+1));){let n=t;for(;"**"===e[n+1];)n++;n!==t&&e.splice(t,n-t)}return e})}levelOneOptimize(e){return e.map(e=>0===(e=e.reduce((e,t)=>{let n=e[e.length-1];return"**"===t&&"**"===n||(".."===t&&n&&".."!==n&&"."!==n&&"**"!==n?e.pop():e.push(t)),e},[])).length?[""]:e)}levelTwoFileOptimize(e){Array.isArray(e)||(e=this.slashSplit(e));let t=!1;do{if(t=!1,!this.preserveMultipleSlashes){for(let n=1;nr&&n.splice(r+1,s-r);let i=n[r+1],o=n[r+2],a=n[r+3];if(".."!==i||!o||"."===o||".."===o||!a||"."===a||".."===a)continue;t=!0,n.splice(r,1);let l=n.slice(0);l[r]="**",e.push(l),r--}if(!this.preserveMultipleSlashes){for(let e=1;ee.length)}partsMatch(e,t,n=!1){let r=0,s=0,i=[],o="";for(;ro?t=t.slice(a):o>a&&(e=e.slice(o)))}}let{optimizationLevel:s=1}=this.options;s>=2&&(e=this.levelTwoFileOptimize(e)),this.debug("matchOne",this,{file:e,pattern:t}),this.debug("matchOne",e.length,t.length);for(var i=0,o=0,a=e.length,l=t.length;i>> no match, partial?",e,h,t,p),h===a))return!0;return!1}if("string"==typeof u?(s=c===u,this.debug("string match",u,c,s)):(s=u.test(c),this.debug("pattern match",u,c,s)),!s)return!1}if(i===a&&o===l)return!0;if(i===a)return n;if(o===l)return i===a-1&&""===e[i];throw Error("wtf?")}braceExpand(){return K(this.pattern,this.options)}parse(e){let t;s(e);let n=this.options;if("**"===e)return W;if(""===e)return"";let r=null;(t=e.match(O))?r=n.dot?F:M:(t=e.match(S))?r=(n.nocase?n.dot?A:C:n.dot?_:E)(t[1]):(t=e.match(D))?r=(n.nocase?n.dot?j:B:n.dot?H:V)(t):(t=e.match(I))?r=n.dot?N:P:(t=e.match(R))&&(r=L);let i=T.fromGlob(e,this.options).toMMPattern();return r?Object.assign(i,{test:r}):i}makeRe(){if(this.regexp||!1===this.regexp)return this.regexp;let e=this.set;if(!e.length)return this.regexp=!1,this.regexp;let t=this.options,n=t.noglobstar?"[^/]*?":t.dot?"(?:(?!(?:\\/|^)(?:\\.{1,2})($|\\/)).)*?":"(?:(?!(?:\\/|^)\\.).)*?",r=new Set(t.nocase?["i"]:[]),s=e.map(e=>{let t=e.map(e=>{if(e instanceof RegExp)for(let t of e.flags.split(""))r.add(t);return"string"==typeof e?Y(e):e===W?W:e._src});return t.forEach((e,r)=>{let s=t[r+1],i=t[r-1];e===W&&i!==W&&(void 0===i?void 0!==s&&s!==W?t[r+1]="(?:\\/|"+n+"\\/)?"+s:t[r]=n:void 0===s?t[r-1]=i+"(?:\\/|"+n+")?":s!==W&&(t[r-1]=i+"(?:\\/|\\/"+n+"\\/)"+s,t[r+1]=W))}),t.filter(e=>e!==W).join("/")}).join("|"),[i,o]=e.length>1?["(?:",")"]:["",""];s="^"+i+s+o+"$",this.negate&&(s="^(?!"+s+").+$");try{this.regexp=new RegExp(s,[...r].join(""))}catch(e){this.regexp=!1}return this.regexp}slashSplit(e){return this.preserveMultipleSlashes?e.split("/"):this.isWindows&&/^\/\/[^\/]+/.test(e)?["",...e.split(/\/+/)]:e.split(/\/+/)}match(e,t=this.partial){if(this.debug("match",e,this.pattern),this.comment)return!1;if(this.empty)return""===e;if("/"===e&&t)return!0;let n=this.options;this.isWindows&&(e=e.split("\\").join("/"));let r=this.slashSplit(e);this.debug(this.pattern,"split",r);let s=this.set;this.debug(this.pattern,"set",s);let i=r[r.length-1];if(!i)for(let e=r.length-2;!i&&e>=0;e--)i=r[e];for(let e=0;et?e.replace(/[?*()[\]]/g,"[$&]"):e.replace(/[?*()[\]\\]/g,"\\$&"),w.unescape=c;class Q{static default=new Q;entries=new Map;constructor(){}getOrSet(e,t,n={}){let{tags:r=[]}=n,s=this.entries.get(e);if(s)return s.resource;let i=t();return this.entries.set(e,{resource:i,tags:r}),i}get(e){return this.entries.get(e)?.resource}findByError(e){return this.getAll().filter(t=>t.isMatchingError(e))}getAll(e){let t=Array.from(this.entries.values());if(void 0===e)return t.map(e=>e.resource);let n=new J(e),r=e=>e.some(e=>n.match(e));return t.filter(e=>r(e.tags)).map(e=>e.resource)}clear(){this.entries.clear()}}var ee=n(542505);let et=e=>(0,ee.v)(e).toString(),en=e=>Object.freeze({isSet:!0,value:e}),er=Object.freeze({isSet:!1});class es{value;observers=new Set;constructor(e){this.value=e}notifyObservers(e){this.observers.forEach(t=>t(e))}get observerCount(){return this.observers.size}observe(e){return this.observers.add(e),()=>this.observers.delete(e)}updateValue(e){this.value!==e&&(this.value=e,this.notifyObservers(e))}}var ei=n(20934);let eo=e=>{let[t,n]=(0,ei.useState)(e.value);return(0,ei.useEffect)(()=>(n(e.value),e.observe(n)),[e]),t};var ea=n(301365),el="undefined"!=typeof window&&void 0!==window.document;void 0!==ea&&null!=ea.versions&&ea.versions.node,"object"==typeof self&&self.constructor&&self.constructor.name,"undefined"!=typeof window&&"nodejs"===window.name||"undefined"!=typeof navigator&&"userAgent"in navigator&&"string"==typeof navigator.userAgent&&(navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")),"undefined"!=typeof Deno&&void 0!==Deno.version&&Deno.version.deno;let eu=(e,t)=>{(0,ei.useEffect)(()=>{if(el)return window.addEventListener("focus",e),()=>{window.removeEventListener("focus",e)}},t)},ec=(e,t={})=>{let{keepValueWhileLoading:n=!0,useSuspense:r=!0,refreshOnWindowFocus:s=!1,autoRefresh:i}=t,o=eo(e.value),a=eo(e.error),l=(0,ei.useRef)(o);if((0,ei.useEffect)(()=>{if(i)return e.addTTL(i)},[e,(0,ee.v)(i)]),eu(()=>{s&&e.refresh()},[e,s]),e.load(),o.isSet)return(l.current=o,r)?o.value:Object.freeze({maybeValue:o.value,value:o.value,hasValue:!0,isLoading:!1});if(n&&l.current.isSet)return r?l.current.value:Object.freeze({maybeValue:l.current.value,value:l.current.value,hasValue:!0,isLoading:!0});if(a.isSet)throw a.value;if(r)throw e.loaderPromise;return Object.freeze({maybeValue:void 0,hasValue:!1,isLoading:!0})};class eh extends Error{}class ep extends eh{constructor(e){super(`Invalid DateTime: ${e.toMessage()}`)}}class ed extends eh{constructor(e){super(`Invalid Interval: ${e.toMessage()}`)}}class ef extends eh{constructor(e){super(`Invalid Duration: ${e.toMessage()}`)}}class em extends eh{}class eg extends eh{constructor(e){super(`Invalid unit ${e}`)}}class ey extends eh{}class eb extends eh{constructor(){super("Zone is an abstract class")}}let ek="numeric",ev="short",eT="long",ex={year:ek,month:ek,day:ek},ew={year:ek,month:ev,day:ek},eS={year:ek,month:ev,day:ek,weekday:ev},eE={year:ek,month:eT,day:ek},e_={year:ek,month:eT,day:ek,weekday:eT},eC={hour:ek,minute:ek},eA={hour:ek,minute:ek,second:ek},eI={hour:ek,minute:ek,second:ek,timeZoneName:ev},eP={hour:ek,minute:ek,second:ek,timeZoneName:eT},eN={hour:ek,minute:ek,hourCycle:"h23"},eR={hour:ek,minute:ek,second:ek,hourCycle:"h23"},eL={hour:ek,minute:ek,second:ek,hourCycle:"h23",timeZoneName:ev},eO={hour:ek,minute:ek,second:ek,hourCycle:"h23",timeZoneName:eT},eM={year:ek,month:ek,day:ek,hour:ek,minute:ek},eF={year:ek,month:ek,day:ek,hour:ek,minute:ek,second:ek},eD={year:ek,month:ev,day:ek,hour:ek,minute:ek},eB={year:ek,month:ev,day:ek,hour:ek,minute:ek,second:ek},ej={year:ek,month:ev,day:ek,weekday:ev,hour:ek,minute:ek},eH={year:ek,month:eT,day:ek,hour:ek,minute:ek,timeZoneName:ev},eV={year:ek,month:eT,day:ek,hour:ek,minute:ek,second:ek,timeZoneName:ev},e$={year:ek,month:eT,day:ek,weekday:eT,hour:ek,minute:ek,timeZoneName:eT},eU={year:ek,month:eT,day:ek,weekday:eT,hour:ek,minute:ek,second:ek,timeZoneName:eT};class eq{get type(){throw new eb}get name(){throw new eb}get ianaName(){return this.name}get isUniversal(){throw new eb}offsetName(e,t){throw new eb}formatOffset(e,t){throw new eb}offset(e){throw new eb}equals(e){throw new eb}get isValid(){throw new eb}}let eG=null;class ez extends eq{static get instance(){return null===eG&&(eG=new ez),eG}get type(){return"system"}get name(){return new Intl.DateTimeFormat().resolvedOptions().timeZone}get isUniversal(){return!1}offsetName(e,{format:t,locale:n}){return tZ(e,t,n)}formatOffset(e,t){return tJ(this.offset(e),t)}offset(e){return-new Date(e).getTimezoneOffset()}equals(e){return"system"===e.type}get isValid(){return!0}}let eW={},eZ={year:0,month:1,day:2,era:3,hour:4,minute:5,second:6},eK={};class eX extends eq{static create(e){return eK[e]||(eK[e]=new eX(e)),eK[e]}static resetCache(){eK={},eW={}}static isValidSpecifier(e){return this.isValidZone(e)}static isValidZone(e){if(!e)return!1;try{return new Intl.DateTimeFormat("en-US",{timeZone:e}).format(),!0}catch(e){return!1}}constructor(e){super(),this.zoneName=e,this.valid=eX.isValidZone(e)}get type(){return"iana"}get name(){return this.zoneName}get isUniversal(){return!1}offsetName(e,{format:t,locale:n}){return tZ(e,t,n,this.name)}formatOffset(e,t){return tJ(this.offset(e),t)}offset(e){var t;let n=new Date(e);if(isNaN(n))return NaN;let r=(eW[t=this.name]||(eW[t]=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",era:"short"})),eW[t]),[s,i,o,a,l,u,c]=r.formatToParts?function(e,t){let n=e.formatToParts(t),r=[];for(let e=0;e=0?d:1e3+d))/6e4}equals(e){return"iana"===e.type&&e.name===this.name}get isValid(){return this.valid}}let eY={},eJ={};function eQ(e,t={}){let n=JSON.stringify([e,t]),r=eJ[n];return r||(r=new Intl.DateTimeFormat(e,t),eJ[n]=r),r}let e1={},e0={},e2=null,e3={};function e6(e,t,n,r){let s=e.listingMode();return"error"===s?null:"en"===s?n(t):r(t)}class e8{constructor(e,t,n){this.padTo=n.padTo||0,this.floor=n.floor||!1;let{padTo:r,floor:s,...i}=n;if(!t||Object.keys(i).length>0){let t={useGrouping:!1,...n};n.padTo>0&&(t.minimumIntegerDigits=n.padTo),this.inf=function(e,t={}){let n=JSON.stringify([e,t]),r=e1[n];return r||(r=new Intl.NumberFormat(e,t),e1[n]=r),r}(e,t)}}format(e){if(!this.inf)return tF(this.floor?Math.floor(e):tH(e,3),this.padTo);{let t=this.floor?Math.floor(e):e;return this.inf.format(t)}}}class e5{constructor(e,t,n){let r;if(this.opts=n,this.originalZone=void 0,this.opts.timeZone)this.dt=e;else if("fixed"===e.zone.type){let t=-(e.offset/60*1),n=t>=0?`Etc/GMT+${t}`:`Etc/GMT${t}`;0!==e.offset&&eX.create(n).valid?(r=n,this.dt=e):(r="UTC",this.dt=0===e.offset?e:e.setZone("UTC").plus({minutes:e.offset}),this.originalZone=e.zone)}else"system"===e.zone.type?this.dt=e:"iana"===e.zone.type?(this.dt=e,r=e.zone.name):(r="UTC",this.dt=e.setZone("UTC").plus({minutes:e.offset}),this.originalZone=e.zone);let s={...this.opts};s.timeZone=s.timeZone||r,this.dtf=eQ(t,s)}format(){return this.originalZone?this.formatToParts().map(({value:e})=>e).join(""):this.dtf.format(this.dt.toJSDate())}formatToParts(){let e=this.dtf.formatToParts(this.dt.toJSDate());return this.originalZone?e.map(e=>{if("timeZoneName"!==e.type)return e;{let t=this.originalZone.offsetName(this.dt.ts,{locale:this.dt.locale,format:this.opts.timeZoneName});return{...e,value:t}}}):e}resolvedOptions(){return this.dtf.resolvedOptions()}}class e4{constructor(e,t,n){this.opts={style:"long",...n},!t&&tP()&&(this.rtf=function(e,t={}){let{base:n,...r}=t,s=JSON.stringify([e,r]),i=e0[s];return i||(i=new Intl.RelativeTimeFormat(e,t),e0[s]=i),i}(e,n))}format(e,t){return this.rtf?this.rtf.format(e,t):function(e,t,n="always",r=!1){let s={years:["year","yr."],quarters:["quarter","qtr."],months:["month","mo."],weeks:["week","wk."],days:["day","day","days"],hours:["hour","hr."],minutes:["minute","min."],seconds:["second","sec."]},i=-1===["hours","minutes","seconds"].indexOf(e);if("auto"===n&&i){let n="days"===e;switch(t){case 1:return n?"tomorrow":`next ${s[e][0]}`;case -1:return n?"yesterday":`last ${s[e][0]}`;case 0:return n?"today":`this ${s[e][0]}`}}let o=Object.is(t,-0)||t<0,a=Math.abs(t),l=1===a,u=s[e],c=r?l?u[1]:u[2]||u[1]:l?s[e][0]:e;return o?`${a} ${c} ago`:`in ${a} ${c}`}(t,e,this.opts.numeric,"long"!==this.opts.style)}formatToParts(e,t){return this.rtf?this.rtf.formatToParts(e,t):[]}}let e9={firstDay:1,minimalDays:4,weekend:[6,7]};class e7{static fromOpts(e){return e7.create(e.locale,e.numberingSystem,e.outputCalendar,e.weekSettings,e.defaultToEN)}static create(e,t,n,r,s=!1){let i=e||tp.defaultLocale,o=i||(s?"en-US":e2||(e2=new Intl.DateTimeFormat().resolvedOptions().locale));return new e7(o,t||tp.defaultNumberingSystem,n||tp.defaultOutputCalendar,tO(r)||tp.defaultWeekSettings,i)}static resetCache(){e2=null,eJ={},e1={},e0={}}static fromObject({locale:e,numberingSystem:t,outputCalendar:n,weekSettings:r}={}){return e7.create(e,t,n,r)}constructor(e,t,n,r,s){var i,o,a;let[l,u,c]=function(e){let t=e.indexOf("-x-");-1!==t&&(e=e.substring(0,t));let n=e.indexOf("-u-");if(-1===n)return[e];{let t,r;try{t=eQ(e).resolvedOptions(),r=e}catch(i){let s=e.substring(0,n);t=eQ(s).resolvedOptions(),r=s}let{numberingSystem:s,calendar:i}=t;return[r,s,i]}}(e);this.locale=l,this.numberingSystem=t||u||null,this.outputCalendar=n||c||null,this.weekSettings=r,this.intl=(i=this.locale,o=this.numberingSystem,((a=this.outputCalendar)||o)&&(i.includes("-u-")||(i+="-u"),a&&(i+=`-ca-${a}`),o&&(i+=`-nu-${o}`)),i),this.weekdaysCache={format:{},standalone:{}},this.monthsCache={format:{},standalone:{}},this.meridiemCache=null,this.eraCache={},this.specifiedLocale=s,this.fastNumbersCached=null}get fastNumbers(){return null==this.fastNumbersCached&&(this.fastNumbersCached=(!this.numberingSystem||"latn"===this.numberingSystem)&&("latn"===this.numberingSystem||!this.locale||this.locale.startsWith("en")||"latn"===new Intl.DateTimeFormat(this.intl).resolvedOptions().numberingSystem)),this.fastNumbersCached}listingMode(){let e=this.isEnglish(),t=(null===this.numberingSystem||"latn"===this.numberingSystem)&&(null===this.outputCalendar||"gregory"===this.outputCalendar);return e&&t?"en":"intl"}clone(e){return e&&0!==Object.getOwnPropertyNames(e).length?e7.create(e.locale||this.specifiedLocale,e.numberingSystem||this.numberingSystem,e.outputCalendar||this.outputCalendar,tO(e.weekSettings)||this.weekSettings,e.defaultToEN||!1):this}redefaultToEN(e={}){return this.clone({...e,defaultToEN:!0})}redefaultToSystem(e={}){return this.clone({...e,defaultToEN:!1})}months(e,t=!1){return e6(this,e,t3,()=>{let n=t?{month:e,day:"numeric"}:{month:e},r=t?"format":"standalone";return this.monthsCache[r][e]||(this.monthsCache[r][e]=function(e){let t=[];for(let n=1;n<=12;n++){let r=rB.utc(2009,n,1);t.push(e(r))}return t}(e=>this.extract(e,n,"month"))),this.monthsCache[r][e]})}weekdays(e,t=!1){return e6(this,e,t4,()=>{let n=t?{weekday:e,year:"numeric",month:"long",day:"numeric"}:{weekday:e},r=t?"format":"standalone";return this.weekdaysCache[r][e]||(this.weekdaysCache[r][e]=function(e){let t=[];for(let n=1;n<=7;n++){let r=rB.utc(2016,11,13+n);t.push(e(r))}return t}(e=>this.extract(e,n,"weekday"))),this.weekdaysCache[r][e]})}meridiems(){return e6(this,void 0,()=>t9,()=>{if(!this.meridiemCache){let e={hour:"numeric",hourCycle:"h12"};this.meridiemCache=[rB.utc(2016,11,13,9),rB.utc(2016,11,13,19)].map(t=>this.extract(t,e,"dayperiod"))}return this.meridiemCache})}eras(e){return e6(this,e,nn,()=>{let t={era:e};return this.eraCache[e]||(this.eraCache[e]=[rB.utc(-40,1,1),rB.utc(2017,1,1)].map(e=>this.extract(e,t,"era"))),this.eraCache[e]})}extract(e,t,n){let r=this.dtFormatter(e,t).formatToParts().find(e=>e.type.toLowerCase()===n);return r?r.value:null}numberFormatter(e={}){return new e8(this.intl,e.forceSimple||this.fastNumbers,e)}dtFormatter(e,t={}){return new e5(e,this.intl,t)}relFormatter(e={}){return new e4(this.intl,this.isEnglish(),e)}listFormatter(e={}){return function(e,t={}){let n=JSON.stringify([e,t]),r=eY[n];return r||(r=new Intl.ListFormat(e,t),eY[n]=r),r}(this.intl,e)}isEnglish(){return"en"===this.locale||"en-us"===this.locale.toLowerCase()||new Intl.DateTimeFormat(this.intl).resolvedOptions().locale.startsWith("en-us")}getWeekSettings(){return this.weekSettings?this.weekSettings:tN()?function(e){let t=e3[e];if(!t){let n=new Intl.Locale(e);t="getWeekInfo"in n?n.getWeekInfo():n.weekInfo,e3[e]=t}return t}(this.locale):e9}getStartOfWeek(){return this.getWeekSettings().firstDay}getMinDaysInFirstWeek(){return this.getWeekSettings().minimalDays}getWeekendDays(){return this.getWeekSettings().weekend}equals(e){return this.locale===e.locale&&this.numberingSystem===e.numberingSystem&&this.outputCalendar===e.outputCalendar}}let te=null;class tt extends eq{static get utcInstance(){return null===te&&(te=new tt(0)),te}static instance(e){return 0===e?tt.utcInstance:new tt(e)}static parseSpecifier(e){if(e){let t=e.match(/^utc(?:([+-]\d{1,2})(?::(\d{2}))?)?$/i);if(t)return new tt(tK(t[1],t[2]))}return null}constructor(e){super(),this.fixed=e}get type(){return"fixed"}get name(){return 0===this.fixed?"UTC":`UTC${tJ(this.fixed,"narrow")}`}get ianaName(){return 0===this.fixed?"Etc/UTC":`Etc/GMT${tJ(-this.fixed,"narrow")}`}offsetName(){return this.name}formatOffset(e,t){return tJ(this.fixed,t)}get isUniversal(){return!0}offset(){return this.fixed}equals(e){return"fixed"===e.type&&e.fixed===this.fixed}get isValid(){return!0}}class tn extends eq{constructor(e){super(),this.zoneName=e}get type(){return"invalid"}get name(){return this.zoneName}get isUniversal(){return!1}offsetName(){return null}formatOffset(){return""}offset(){return NaN}equals(){return!1}get isValid(){return!1}}function tr(e,t){if(tC(e)||null===e)return t;if(e instanceof eq)return e;if("string"==typeof e){let n=e.toLowerCase();return"default"===n?t:"local"===n||"system"===n?ez.instance:"utc"===n||"gmt"===n?tt.utcInstance:tt.parseSpecifier(n)||eX.create(e)}return tA(e)?tt.instance(e):"object"==typeof e&&"offset"in e&&"function"==typeof e.offset?e:new tn(e)}let ts=()=>Date.now(),ti="system",to=null,ta=null,tl=null,tu=60,tc,th=null;class tp{static get now(){return ts}static set now(e){ts=e}static set defaultZone(e){ti=e}static get defaultZone(){return tr(ti,ez.instance)}static get defaultLocale(){return to}static set defaultLocale(e){to=e}static get defaultNumberingSystem(){return ta}static set defaultNumberingSystem(e){ta=e}static get defaultOutputCalendar(){return tl}static set defaultOutputCalendar(e){tl=e}static get defaultWeekSettings(){return th}static set defaultWeekSettings(e){th=tO(e)}static get twoDigitCutoffYear(){return tu}static set twoDigitCutoffYear(e){tu=e%100}static get throwOnInvalid(){return tc}static set throwOnInvalid(e){tc=e}static resetCaches(){e7.resetCache(),eX.resetCache()}}class td{constructor(e,t){this.reason=e,this.explanation=t}toMessage(){return this.explanation?`${this.reason}: ${this.explanation}`:this.reason}}let tf=[0,31,59,90,120,151,181,212,243,273,304,334],tm=[0,31,60,91,121,152,182,213,244,274,305,335];function tg(e,t){return new td("unit out of range",`you specified ${t} (of type ${typeof t}) as a ${e}, which is invalid`)}function ty(e,t,n){let r=new Date(Date.UTC(e,t-1,n));e<100&&e>=0&&r.setUTCFullYear(r.getUTCFullYear()-1900);let s=r.getUTCDay();return 0===s?7:s}function tb(e,t){let n=tV(e)?tm:tf,r=n.findIndex(e=>etz(r,t,n)?(u=r+1,l=1):u=r,{weekYear:u,weekNumber:l,weekday:a,...tQ(e)}}function tT(e,t=4,n=1){let{weekYear:r,weekNumber:s,weekday:i}=e,o=tk(ty(r,1,t),n),a=t$(r),l=7*s+i-o-7+t,u;l<1?l+=t$(u=r-1):l>a?(u=r+1,l-=t$(r)):u=r;let{month:c,day:h}=tb(u,l);return{year:u,month:c,day:h,...tQ(e)}}function tx(e){let{year:t,month:n,day:r}=e,s=r+(tV(t)?tm:tf)[n-1];return{year:t,ordinal:s,...tQ(e)}}function tw(e){let{year:t,ordinal:n}=e,{month:r,day:s}=tb(t,n);return{year:t,month:r,day:s,...tQ(e)}}function tS(e,t){if(!(!tC(e.localWeekday)||!tC(e.localWeekNumber)||!tC(e.localWeekYear)))return{minDaysInFirstWeek:4,startOfWeek:1};if(!tC(e.weekday)||!tC(e.weekNumber)||!tC(e.weekYear))throw new em("Cannot mix locale-based week fields with ISO-based week fields");return tC(e.localWeekday)||(e.weekday=e.localWeekday),tC(e.localWeekNumber)||(e.weekNumber=e.localWeekNumber),tC(e.localWeekYear)||(e.weekYear=e.localWeekYear),delete e.localWeekday,delete e.localWeekNumber,delete e.localWeekYear,{minDaysInFirstWeek:t.getMinDaysInFirstWeek(),startOfWeek:t.getStartOfWeek()}}function tE(e){let t=tI(e.year),n=tM(e.month,1,12),r=tM(e.day,1,tU(e.year,e.month));return t?n?!r&&tg("day",e.day):tg("month",e.month):tg("year",e.year)}function t_(e){let{hour:t,minute:n,second:r,millisecond:s}=e,i=tM(t,0,23)||24===t&&0===n&&0===r&&0===s,o=tM(n,0,59),a=tM(r,0,59),l=tM(s,0,999);return i?o?a?!l&&tg("millisecond",s):tg("second",r):tg("minute",n):tg("hour",t)}function tC(e){return void 0===e}function tA(e){return"number"==typeof e}function tI(e){return"number"==typeof e&&e%1==0}function tP(){try{return"undefined"!=typeof Intl&&!!Intl.RelativeTimeFormat}catch(e){return!1}}function tN(){try{return"undefined"!=typeof Intl&&!!Intl.Locale&&("weekInfo"in Intl.Locale.prototype||"getWeekInfo"in Intl.Locale.prototype)}catch(e){return!1}}function tR(e,t,n){if(0!==e.length)return e.reduce((e,r)=>{let s=[t(r),r];return e&&n(e[0],s[0])===e[0]?e:s},null)[1]}function tL(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function tO(e){if(null==e)return null;if("object"!=typeof e)throw new ey("Week settings must be an object");if(!tM(e.firstDay,1,7)||!tM(e.minimalDays,1,7)||!Array.isArray(e.weekend)||e.weekend.some(e=>!tM(e,1,7)))throw new ey("Invalid week settings");return{firstDay:e.firstDay,minimalDays:e.minimalDays,weekend:Array.from(e.weekend)}}function tM(e,t,n){return tI(e)&&e>=t&&e<=n}function tF(e,t=2){return e<0?"-"+(""+-e).padStart(t,"0"):(""+e).padStart(t,"0")}function tD(e){if(!tC(e)&&null!==e&&""!==e)return parseInt(e,10)}function tB(e){if(!tC(e)&&null!==e&&""!==e)return parseFloat(e)}function tj(e){if(!tC(e)&&null!==e&&""!==e)return Math.floor(1e3*parseFloat("0."+e))}function tH(e,t,n=!1){let r=10**t;return(n?Math.trunc:Math.round)(e*r)/r}function tV(e){return e%4==0&&(e%100!=0||e%400==0)}function t$(e){return tV(e)?366:365}function tU(e,t){var n;let r=(n=t-1)-12*Math.floor(n/12)+1;return 2===r?tV(e+(t-r)/12)?29:28:[31,null,31,30,31,30,31,31,30,31,30,31][r-1]}function tq(e){let t=Date.UTC(e.year,e.month-1,e.day,e.hour,e.minute,e.second,e.millisecond);return e.year<100&&e.year>=0&&(t=new Date(t)).setUTCFullYear(e.year,e.month-1,e.day),+t}function tG(e,t,n){return-tk(ty(e,1,t),n)+t-1}function tz(e,t=4,n=1){let r=tG(e,t,n),s=tG(e+1,t,n);return(t$(e)-r+s)/7}function tW(e){return e>99?e:e>tp.twoDigitCutoffYear?1900+e:2e3+e}function tZ(e,t,n,r=null){let s=new Date(e),i={hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"};r&&(i.timeZone=r);let o={timeZoneName:t,...i},a=new Intl.DateTimeFormat(n,o).formatToParts(s).find(e=>"timezonename"===e.type.toLowerCase());return a?a.value:null}function tK(e,t){let n=parseInt(e,10);Number.isNaN(n)&&(n=0);let r=parseInt(t,10)||0,s=n<0||Object.is(n,-0)?-r:r;return 60*n+s}function tX(e){let t=Number(e);if("boolean"==typeof e||""===e||Number.isNaN(t))throw new ey(`Invalid unit value ${e}`);return t}function tY(e,t){let n={};for(let r in e)if(tL(e,r)){let s=e[r];if(null==s)continue;n[t(r)]=tX(s)}return n}function tJ(e,t){let n=Math.trunc(Math.abs(e/60)),r=Math.trunc(Math.abs(e%60)),s=e>=0?"+":"-";switch(t){case"short":return`${s}${tF(n,2)}:${tF(r,2)}`;case"narrow":return`${s}${n}${r>0?`:${r}`:""}`;case"techie":return`${s}${tF(n,2)}${tF(r,2)}`;default:throw RangeError(`Value format ${t} is out of range for property format`)}}function tQ(e){return["hour","minute","second","millisecond"].reduce((t,n)=>(t[n]=e[n],t),{})}let t1=["January","February","March","April","May","June","July","August","September","October","November","December"],t0=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],t2=["J","F","M","A","M","J","J","A","S","O","N","D"];function t3(e){switch(e){case"narrow":return[...t2];case"short":return[...t0];case"long":return[...t1];case"numeric":return["1","2","3","4","5","6","7","8","9","10","11","12"];case"2-digit":return["01","02","03","04","05","06","07","08","09","10","11","12"];default:return null}}let t6=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],t8=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],t5=["M","T","W","T","F","S","S"];function t4(e){switch(e){case"narrow":return[...t5];case"short":return[...t8];case"long":return[...t6];case"numeric":return["1","2","3","4","5","6","7"];default:return null}}let t9=["AM","PM"],t7=["Before Christ","Anno Domini"],ne=["BC","AD"],nt=["B","A"];function nn(e){switch(e){case"narrow":return[...nt];case"short":return[...ne];case"long":return[...t7];default:return null}}function nr(e,t){let n="";for(let r of e)r.literal?n+=r.val:n+=t(r.val);return n}let ns={D:ex,DD:ew,DDD:eE,DDDD:e_,t:eC,tt:eA,ttt:eI,tttt:eP,T:eN,TT:eR,TTT:eL,TTTT:eO,f:eM,ff:eD,fff:eH,ffff:e$,F:eF,FF:eB,FFF:eV,FFFF:eU};class ni{static create(e,t={}){return new ni(e,t)}static parseFormat(e){let t=null,n="",r=!1,s=[];for(let i=0;i0&&s.push({literal:r||/^\s+$/.test(n),val:n}),t=null,n="",r=!r):r?n+=o:o===t?n+=o:(n.length>0&&s.push({literal:/^\s+$/.test(n),val:n}),n=o,t=o)}return n.length>0&&s.push({literal:r||/^\s+$/.test(n),val:n}),s}static macroTokenToFormatOpts(e){return ns[e]}constructor(e,t){this.opts=t,this.loc=e,this.systemLoc=null}formatWithSystemDefault(e,t){return null===this.systemLoc&&(this.systemLoc=this.loc.redefaultToSystem()),this.systemLoc.dtFormatter(e,{...this.opts,...t}).format()}dtFormatter(e,t={}){return this.loc.dtFormatter(e,{...this.opts,...t})}formatDateTime(e,t){return this.dtFormatter(e,t).format()}formatDateTimeParts(e,t){return this.dtFormatter(e,t).formatToParts()}formatInterval(e,t){return this.dtFormatter(e.start,t).dtf.formatRange(e.start.toJSDate(),e.end.toJSDate())}resolvedOptions(e,t){return this.dtFormatter(e,t).resolvedOptions()}num(e,t=0){if(this.opts.forceSimple)return tF(e,t);let n={...this.opts};return t>0&&(n.padTo=t),this.loc.numberFormatter(n).format(e)}formatDateTimeFromString(e,t){let n="en"===this.loc.listingMode(),r=this.loc.outputCalendar&&"gregory"!==this.loc.outputCalendar,s=(t,n)=>this.loc.extract(e,t,n),i=t=>e.isOffsetFixed&&0===e.offset&&t.allowZ?"Z":e.isValid?e.zone.formatOffset(e.ts,t.format):"",o=()=>n?t9[e.hour<12?0:1]:s({hour:"numeric",hourCycle:"h12"},"dayperiod"),a=(t,r)=>n?t3(t)[e.month-1]:s(r?{month:t}:{month:t,day:"numeric"},"month"),l=(t,r)=>n?t4(t)[e.weekday-1]:s(r?{weekday:t}:{weekday:t,month:"long",day:"numeric"},"weekday"),u=t=>{let n=ni.macroTokenToFormatOpts(t);return n?this.formatWithSystemDefault(e,n):t},c=t=>n?nn(t)[e.year<0?0:1]:s({era:t},"era");return nr(ni.parseFormat(t),t=>{switch(t){case"S":return this.num(e.millisecond);case"u":case"SSS":return this.num(e.millisecond,3);case"s":return this.num(e.second);case"ss":return this.num(e.second,2);case"uu":return this.num(Math.floor(e.millisecond/10),2);case"uuu":return this.num(Math.floor(e.millisecond/100));case"m":return this.num(e.minute);case"mm":return this.num(e.minute,2);case"h":return this.num(e.hour%12==0?12:e.hour%12);case"hh":return this.num(e.hour%12==0?12:e.hour%12,2);case"H":return this.num(e.hour);case"HH":return this.num(e.hour,2);case"Z":return i({format:"narrow",allowZ:this.opts.allowZ});case"ZZ":return i({format:"short",allowZ:this.opts.allowZ});case"ZZZ":return i({format:"techie",allowZ:this.opts.allowZ});case"ZZZZ":return e.zone.offsetName(e.ts,{format:"short",locale:this.loc.locale});case"ZZZZZ":return e.zone.offsetName(e.ts,{format:"long",locale:this.loc.locale});case"z":return e.zoneName;case"a":return o();case"d":return r?s({day:"numeric"},"day"):this.num(e.day);case"dd":return r?s({day:"2-digit"},"day"):this.num(e.day,2);case"c":case"E":return this.num(e.weekday);case"ccc":return l("short",!0);case"cccc":return l("long",!0);case"ccccc":return l("narrow",!0);case"EEE":return l("short",!1);case"EEEE":return l("long",!1);case"EEEEE":return l("narrow",!1);case"L":return r?s({month:"numeric",day:"numeric"},"month"):this.num(e.month);case"LL":return r?s({month:"2-digit",day:"numeric"},"month"):this.num(e.month,2);case"LLL":return a("short",!0);case"LLLL":return a("long",!0);case"LLLLL":return a("narrow",!0);case"M":return r?s({month:"numeric"},"month"):this.num(e.month);case"MM":return r?s({month:"2-digit"},"month"):this.num(e.month,2);case"MMM":return a("short",!1);case"MMMM":return a("long",!1);case"MMMMM":return a("narrow",!1);case"y":return r?s({year:"numeric"},"year"):this.num(e.year);case"yy":return r?s({year:"2-digit"},"year"):this.num(e.year.toString().slice(-2),2);case"yyyy":return r?s({year:"numeric"},"year"):this.num(e.year,4);case"yyyyyy":return r?s({year:"numeric"},"year"):this.num(e.year,6);case"G":return c("short");case"GG":return c("long");case"GGGGG":return c("narrow");case"kk":return this.num(e.weekYear.toString().slice(-2),2);case"kkkk":return this.num(e.weekYear,4);case"W":return this.num(e.weekNumber);case"WW":return this.num(e.weekNumber,2);case"n":return this.num(e.localWeekNumber);case"nn":return this.num(e.localWeekNumber,2);case"ii":return this.num(e.localWeekYear.toString().slice(-2),2);case"iiii":return this.num(e.localWeekYear,4);case"o":return this.num(e.ordinal);case"ooo":return this.num(e.ordinal,3);case"q":return this.num(e.quarter);case"qq":return this.num(e.quarter,2);case"X":return this.num(Math.floor(e.ts/1e3));case"x":return this.num(e.ts);default:return u(t)}})}formatDurationFromString(e,t){var n;let r=e=>{switch(e[0]){case"S":return"millisecond";case"s":return"second";case"m":return"minute";case"h":return"hour";case"d":return"day";case"w":return"week";case"M":return"month";case"y":return"year";default:return null}},s=ni.parseFormat(t),i=s.reduce((e,{literal:t,val:n})=>t?e:e.concat(n),[]);return nr(s,(n=e.shiftTo(...i.map(r).filter(e=>e)),e=>{let t=r(e);return t?this.num(n.get(t),e.length):e}))}}let no=/[A-Za-z_+-]{1,256}(?::?\/[A-Za-z0-9_+-]{1,256}(?:\/[A-Za-z0-9_+-]{1,256})?)?/;function na(...e){let t=e.reduce((e,t)=>e+t.source,"");return RegExp(`^${t}$`)}function nl(...e){return t=>e.reduce(([e,n,r],s)=>{let[i,o,a]=s(t,r);return[{...e,...i},o||n,a]},[{},null,1]).slice(0,2)}function nu(e,...t){if(null==e)return[null,null];for(let[n,r]of t){let t=n.exec(e);if(t)return r(t)}return[null,null]}function nc(...e){return(t,n)=>{let r;let s={};for(r=0;rvoid 0!==e&&(t||e&&c)?-e:e;return[{years:p(tB(n)),months:p(tB(r)),weeks:p(tB(s)),days:p(tB(i)),hours:p(tB(o)),minutes:p(tB(a)),seconds:p(tB(l),"-0"===l),milliseconds:p(tj(u),h)}]}let nC={GMT:0,EDT:-240,EST:-300,CDT:-300,CST:-360,MDT:-360,MST:-420,PDT:-420,PST:-480};function nA(e,t,n,r,s,i,o){let a={year:2===t.length?tW(tD(t)):tD(t),month:t0.indexOf(n)+1,day:tD(r),hour:tD(s),minute:tD(i)};return o&&(a.second=tD(o)),e&&(a.weekday=e.length>3?t6.indexOf(e)+1:t8.indexOf(e)+1),a}let nI=/^(?:(Mon|Tue|Wed|Thu|Fri|Sat|Sun),\s)?(\d{1,2})\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s(\d{2,4})\s(\d\d):(\d\d)(?::(\d\d))?\s(?:(UT|GMT|[ECMP][SD]T)|([Zz])|(?:([+-]\d\d)(\d\d)))$/;function nP(e){let[,t,n,r,s,i,o,a,l,u,c,h]=e;return[nA(t,s,r,n,i,o,a),new tt(l?nC[l]:u?0:tK(c,h))]}let nN=/^(Mon|Tue|Wed|Thu|Fri|Sat|Sun), (\d\d) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) (\d{4}) (\d\d):(\d\d):(\d\d) GMT$/,nR=/^(Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday), (\d\d)-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(\d\d) (\d\d):(\d\d):(\d\d) GMT$/,nL=/^(Mon|Tue|Wed|Thu|Fri|Sat|Sun) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ( \d|\d\d) (\d\d):(\d\d):(\d\d) (\d{4})$/;function nO(e){let[,t,n,r,s,i,o,a]=e;return[nA(t,s,r,n,i,o,a),tt.utcInstance]}function nM(e){let[,t,n,r,s,i,o,a]=e;return[nA(t,a,n,r,s,i,o),tt.utcInstance]}let nF=na(/([+-]\d{6}|\d{4})(?:-?(\d\d)(?:-?(\d\d))?)?/,nm),nD=na(/(\d{4})-?W(\d\d)(?:-?(\d))?/,nm),nB=na(/(\d{4})-?(\d{3})/,nm),nj=na(nf),nH=nl(function(e,t){return[{year:nv(e,t),month:nv(e,t+1,1),day:nv(e,t+2,1)},null,t+3]},nT,nx,nw),nV=nl(ng,nT,nx,nw),n$=nl(ny,nT,nx,nw),nU=nl(nT,nx,nw),nq=nl(nT),nG=na(/(\d{4})-(\d\d)-(\d\d)/,nk),nz=na(nb),nW=nl(nT,nx,nw),nZ="Invalid Duration",nK={weeks:{days:7,hours:168,minutes:10080,seconds:604800,milliseconds:6048e5},days:{hours:24,minutes:1440,seconds:86400,milliseconds:864e5},hours:{minutes:60,seconds:3600,milliseconds:36e5},minutes:{seconds:60,milliseconds:6e4},seconds:{milliseconds:1e3}},nX={years:{quarters:4,months:12,weeks:52,days:365,hours:8760,minutes:525600,seconds:31536e3,milliseconds:31536e6},quarters:{months:3,weeks:13,days:91,hours:2184,minutes:131040,seconds:7862400,milliseconds:78624e5},months:{weeks:4,days:30,hours:720,minutes:43200,seconds:2592e3,milliseconds:2592e6},...nK},nY={years:{quarters:4,months:12,weeks:52.1775,days:365.2425,hours:8765.82,minutes:525949.2,seconds:31556952,milliseconds:31556952e3},quarters:{months:3,weeks:13.044375,days:91.310625,hours:2191.455,minutes:131487.3,seconds:7889238,milliseconds:7889238e3},months:{weeks:30.436875/7,days:30.436875,hours:730.485,minutes:43829.1,seconds:2629746,milliseconds:2629746e3},...nK},nJ=["years","quarters","months","weeks","days","hours","minutes","seconds","milliseconds"],nQ=nJ.slice(0).reverse();function n1(e,t,n=!1){return new n3({values:n?t.values:{...e.values,...t.values||{}},loc:e.loc.clone(t.loc),conversionAccuracy:t.conversionAccuracy||e.conversionAccuracy,matrix:t.matrix||e.matrix})}function n0(e,t){let n=t.milliseconds??0;for(let r of nQ.slice(1))t[r]&&(n+=t[r]*e[r].milliseconds);return n}function n2(e,t){let n=0>n0(e,t)?-1:1;nJ.reduceRight((r,s)=>{if(tC(t[s]))return r;if(r){let i=t[r]*n,o=e[s][r],a=Math.floor(i/o);t[s]+=a*n,t[r]-=a*o*n}return s},null),nJ.reduce((n,r)=>{if(tC(t[r]))return n;if(n){let s=t[n]%1;t[n]-=s,t[r]+=s*e[n][r]}return r},null)}class n3{constructor(e){let t="longterm"===e.conversionAccuracy,n=t?nY:nX;e.matrix&&(n=e.matrix),this.values=e.values,this.loc=e.loc||e7.create(),this.conversionAccuracy=t?"longterm":"casual",this.invalid=e.invalid||null,this.matrix=n,this.isLuxonDuration=!0}static fromMillis(e,t){return n3.fromObject({milliseconds:e},t)}static fromObject(e,t={}){if(null==e||"object"!=typeof e)throw new ey(`Duration.fromObject: argument expected to be an object, got ${null===e?"null":typeof e}`);return new n3({values:tY(e,n3.normalizeUnit),loc:e7.fromObject(t),conversionAccuracy:t.conversionAccuracy,matrix:t.matrix})}static fromDurationLike(e){if(tA(e))return n3.fromMillis(e);if(n3.isDuration(e))return e;if("object"==typeof e)return n3.fromObject(e);throw new ey(`Unknown duration argument ${e} of type ${typeof e}`)}static fromISO(e,t){let[n]=nu(e,[nE,n_]);return n?n3.fromObject(n,t):n3.invalid("unparsable",`the input "${e}" can't be parsed as ISO 8601`)}static fromISOTime(e,t){let[n]=nu(e,[nS,nq]);return n?n3.fromObject(n,t):n3.invalid("unparsable",`the input "${e}" can't be parsed as ISO 8601`)}static invalid(e,t=null){if(!e)throw new ey("need to specify a reason the Duration is invalid");let n=e instanceof td?e:new td(e,t);if(!tp.throwOnInvalid)return new n3({invalid:n});throw new ef(n)}static normalizeUnit(e){let t={year:"years",years:"years",quarter:"quarters",quarters:"quarters",month:"months",months:"months",week:"weeks",weeks:"weeks",day:"days",days:"days",hour:"hours",hours:"hours",minute:"minutes",minutes:"minutes",second:"seconds",seconds:"seconds",millisecond:"milliseconds",milliseconds:"milliseconds"}[e?e.toLowerCase():e];if(!t)throw new eg(e);return t}static isDuration(e){return e&&e.isLuxonDuration||!1}get locale(){return this.isValid?this.loc.locale:null}get numberingSystem(){return this.isValid?this.loc.numberingSystem:null}toFormat(e,t={}){let n={...t,floor:!1!==t.round&&!1!==t.floor};return this.isValid?ni.create(this.loc,n).formatDurationFromString(this,e):nZ}toHuman(e={}){if(!this.isValid)return nZ;let t=nJ.map(t=>{let n=this.values[t];return tC(n)?null:this.loc.numberFormatter({style:"unit",unitDisplay:"long",...e,unit:t.slice(0,-1)}).format(n)}).filter(e=>e);return this.loc.listFormatter({type:"conjunction",style:e.listStyle||"narrow",...e}).format(t)}toObject(){return this.isValid?{...this.values}:{}}toISO(){if(!this.isValid)return null;let e="P";return 0!==this.years&&(e+=this.years+"Y"),(0!==this.months||0!==this.quarters)&&(e+=this.months+3*this.quarters+"M"),0!==this.weeks&&(e+=this.weeks+"W"),0!==this.days&&(e+=this.days+"D"),(0!==this.hours||0!==this.minutes||0!==this.seconds||0!==this.milliseconds)&&(e+="T"),0!==this.hours&&(e+=this.hours+"H"),0!==this.minutes&&(e+=this.minutes+"M"),(0!==this.seconds||0!==this.milliseconds)&&(e+=tH(this.seconds+this.milliseconds/1e3,3)+"S"),"P"===e&&(e+="T0S"),e}toISOTime(e={}){if(!this.isValid)return null;let t=this.toMillis();return t<0||t>=864e5?null:(e={suppressMilliseconds:!1,suppressSeconds:!1,includePrefix:!1,format:"extended",...e,includeOffset:!1},rB.fromMillis(t,{zone:"UTC"}).toISOTime(e))}toJSON(){return this.toISO()}toString(){return this.toISO()}[Symbol.for("nodejs.util.inspect.custom")](){return this.isValid?`Duration { values: ${JSON.stringify(this.values)} }`:`Duration { Invalid, reason: ${this.invalidReason} }`}toMillis(){return this.isValid?n0(this.matrix,this.values):NaN}valueOf(){return this.toMillis()}plus(e){if(!this.isValid)return this;let t=n3.fromDurationLike(e),n={};for(let e of nJ)(tL(t.values,e)||tL(this.values,e))&&(n[e]=t.get(e)+this.get(e));return n1(this,{values:n},!0)}minus(e){if(!this.isValid)return this;let t=n3.fromDurationLike(e);return this.plus(t.negate())}mapUnits(e){if(!this.isValid)return this;let t={};for(let n of Object.keys(this.values))t[n]=tX(e(this.values[n],n));return n1(this,{values:t},!0)}get(e){return this[n3.normalizeUnit(e)]}set(e){return this.isValid?n1(this,{values:{...this.values,...tY(e,n3.normalizeUnit)}}):this}reconfigure({locale:e,numberingSystem:t,conversionAccuracy:n,matrix:r}={}){return n1(this,{loc:this.loc.clone({locale:e,numberingSystem:t}),matrix:r,conversionAccuracy:n})}as(e){return this.isValid?this.shiftTo(e).get(e):NaN}normalize(){if(!this.isValid)return this;let e=this.toObject();return n2(this.matrix,e),n1(this,{values:e},!0)}rescale(){return this.isValid?n1(this,{values:function(e){let t={};for(let[n,r]of Object.entries(e))0!==r&&(t[n]=r);return t}(this.normalize().shiftToAll().toObject())},!0):this}shiftTo(...e){let t;if(!this.isValid||0===e.length)return this;e=e.map(e=>n3.normalizeUnit(e));let n={},r={},s=this.toObject();for(let i of nJ)if(e.indexOf(i)>=0){t=i;let e=0;for(let t in r)e+=this.matrix[t][i]*r[t],r[t]=0;tA(s[i])&&(e+=s[i]);let o=Math.trunc(e);n[i]=o,r[i]=(1e3*e-1e3*o)/1e3}else tA(s[i])&&(r[i]=s[i]);for(let e in r)0!==r[e]&&(n[t]+=e===t?r[e]:r[e]/this.matrix[t][e]);return n2(this.matrix,n),n1(this,{values:n},!0)}shiftToAll(){return this.isValid?this.shiftTo("years","months","weeks","days","hours","minutes","seconds","milliseconds"):this}negate(){if(!this.isValid)return this;let e={};for(let t of Object.keys(this.values))e[t]=0===this.values[t]?0:-this.values[t];return n1(this,{values:e},!0)}get years(){return this.isValid?this.values.years||0:NaN}get quarters(){return this.isValid?this.values.quarters||0:NaN}get months(){return this.isValid?this.values.months||0:NaN}get weeks(){return this.isValid?this.values.weeks||0:NaN}get days(){return this.isValid?this.values.days||0:NaN}get hours(){return this.isValid?this.values.hours||0:NaN}get minutes(){return this.isValid?this.values.minutes||0:NaN}get seconds(){return this.isValid?this.values.seconds||0:NaN}get milliseconds(){return this.isValid?this.values.milliseconds||0:NaN}get isValid(){return null===this.invalid}get invalidReason(){return this.invalid?this.invalid.reason:null}get invalidExplanation(){return this.invalid?this.invalid.explanation:null}equals(e){if(!this.isValid||!e.isValid||!this.loc.equals(e.loc))return!1;for(let r of nJ){var t,n;if(t=this.values[r],n=e.values[r],void 0===t||0===t?void 0!==n&&0!==n:t!==n)return!1}return!0}}let n6="Invalid Interval";class n8{constructor(e){this.s=e.start,this.e=e.end,this.invalid=e.invalid||null,this.isLuxonInterval=!0}static invalid(e,t=null){if(!e)throw new ey("need to specify a reason the Interval is invalid");let n=e instanceof td?e:new td(e,t);if(!tp.throwOnInvalid)return new n8({invalid:n});throw new ed(n)}static fromDateTimes(e,t){let n=rj(e),r=rj(t),s=n&&n.isValid?r&&r.isValid?re}isBefore(e){return!!this.isValid&&this.e<=e}contains(e){return!!this.isValid&&this.s<=e&&this.e>e}set({start:e,end:t}={}){return this.isValid?n8.fromDateTimes(e||this.s,t||this.e):this}splitAt(...e){if(!this.isValid)return[];let t=e.map(rj).filter(e=>this.contains(e)).sort((e,t)=>e.toMillis()-t.toMillis()),n=[],{s:r}=this,s=0;for(;r+this.e?this.e:e;n.push(n8.fromDateTimes(r,i)),r=i,s+=1}return n}splitBy(e){let t=n3.fromDurationLike(e);if(!this.isValid||!t.isValid||0===t.as("milliseconds"))return[];let{s:n}=this,r=1,s,i=[];for(;ne*r));s=+e>+this.e?this.e:e,i.push(n8.fromDateTimes(n,s)),n=s,r+=1}return i}divideEqually(e){return this.isValid?this.splitBy(this.length()/e).slice(0,e):[]}overlaps(e){return this.e>e.s&&this.s=e.e}equals(e){return!!this.isValid&&!!e.isValid&&this.s.equals(e.s)&&this.e.equals(e.e)}intersection(e){if(!this.isValid)return this;let t=this.s>e.s?this.s:e.s,n=this.e=n?null:n8.fromDateTimes(t,n)}union(e){if(!this.isValid)return this;let t=this.se.e?this.e:e.e;return n8.fromDateTimes(t,n)}static merge(e){let[t,n]=e.sort((e,t)=>e.s-t.s).reduce(([e,t],n)=>t?t.overlaps(n)||t.abutsStart(n)?[e,t.union(n)]:[e.concat([t]),n]:[e,n],[[],null]);return n&&t.push(n),t}static xor(e){let t=null,n=0,r=[],s=e.map(e=>[{time:e.s,type:"s"},{time:e.e,type:"e"}]);for(let e of Array.prototype.concat(...s).sort((e,t)=>e.time-t.time))1===(n+="s"===e.type?1:-1)?t=e.time:(t&&+t!=+e.time&&r.push(n8.fromDateTimes(t,e.time)),t=null);return n8.merge(r)}difference(...e){return n8.xor([this].concat(e)).map(e=>this.intersection(e)).filter(e=>e&&!e.isEmpty())}toString(){return this.isValid?`[${this.s.toISO()} – ${this.e.toISO()})`:n6}[Symbol.for("nodejs.util.inspect.custom")](){return this.isValid?`Interval { start: ${this.s.toISO()}, end: ${this.e.toISO()} }`:`Interval { Invalid, reason: ${this.invalidReason} }`}toLocaleString(e=ex,t={}){return this.isValid?ni.create(this.s.loc.clone(t),e).formatInterval(this):n6}toISO(e){return this.isValid?`${this.s.toISO(e)}/${this.e.toISO(e)}`:n6}toISODate(){return this.isValid?`${this.s.toISODate()}/${this.e.toISODate()}`:n6}toISOTime(e){return this.isValid?`${this.s.toISOTime(e)}/${this.e.toISOTime(e)}`:n6}toFormat(e,{separator:t=" – "}={}){return this.isValid?`${this.s.toFormat(e)}${t}${this.e.toFormat(e)}`:n6}toDuration(e,t){return this.isValid?this.e.diff(this.s,e,t):n3.invalid(this.invalidReason)}mapEndpoints(e){return n8.fromDateTimes(e(this.s),e(this.e))}}class n5{static hasDST(e=tp.defaultZone){let t=rB.now().setZone(e).set({month:12});return!e.isUniversal&&t.offset!==t.set({month:6}).offset}static isValidIANAZone(e){return eX.isValidZone(e)}static normalizeZone(e){return tr(e,tp.defaultZone)}static getStartOfWeek({locale:e=null,locObj:t=null}={}){return(t||e7.create(e)).getStartOfWeek()}static getMinimumDaysInFirstWeek({locale:e=null,locObj:t=null}={}){return(t||e7.create(e)).getMinDaysInFirstWeek()}static getWeekendWeekdays({locale:e=null,locObj:t=null}={}){return(t||e7.create(e)).getWeekendDays().slice()}static months(e="long",{locale:t=null,numberingSystem:n=null,locObj:r=null,outputCalendar:s="gregory"}={}){return(r||e7.create(t,n,s)).months(e)}static monthsFormat(e="long",{locale:t=null,numberingSystem:n=null,locObj:r=null,outputCalendar:s="gregory"}={}){return(r||e7.create(t,n,s)).months(e,!0)}static weekdays(e="long",{locale:t=null,numberingSystem:n=null,locObj:r=null}={}){return(r||e7.create(t,n,null)).weekdays(e)}static weekdaysFormat(e="long",{locale:t=null,numberingSystem:n=null,locObj:r=null}={}){return(r||e7.create(t,n,null)).weekdays(e,!0)}static meridiems({locale:e=null}={}){return e7.create(e).meridiems()}static eras(e="short",{locale:t=null}={}){return e7.create(t,null,"gregory").eras(e)}static features(){return{relative:tP(),localeWeek:tN()}}}function n4(e,t){let n=e=>e.toUTC(0,{keepLocalTime:!0}).startOf("day").valueOf(),r=n(t)-n(e);return Math.floor(n3.fromMillis(r).as("days"))}let n9={arab:"[٠-٩]",arabext:"[۰-۹]",bali:"[᭐-᭙]",beng:"[০-৯]",deva:"[०-९]",fullwide:"[０-９]",gujr:"[૦-૯]",hanidec:"[〇|一|二|三|四|五|六|七|八|九]",khmr:"[០-៩]",knda:"[೦-೯]",laoo:"[໐-໙]",limb:"[᥆-᥏]",mlym:"[൦-൯]",mong:"[᠐-᠙]",mymr:"[၀-၉]",orya:"[୦-୯]",tamldec:"[௦-௯]",telu:"[౦-౯]",thai:"[๐-๙]",tibt:"[༠-༩]",latn:"\\d"},n7={arab:[1632,1641],arabext:[1776,1785],bali:[6992,7001],beng:[2534,2543],deva:[2406,2415],fullwide:[65296,65303],gujr:[2790,2799],khmr:[6112,6121],knda:[3302,3311],laoo:[3792,3801],limb:[6470,6479],mlym:[3430,3439],mong:[6160,6169],mymr:[4160,4169],orya:[2918,2927],tamldec:[3046,3055],telu:[3174,3183],thai:[3664,3673],tibt:[3872,3881]},re=n9.hanidec.replace(/[\[|\]]/g,"").split("");function rt({numberingSystem:e},t=""){return RegExp(`${n9[e||"latn"]}${t}`)}function rn(e,t=e=>e){return{regex:e,deser:([e])=>t(function(e){let t=parseInt(e,10);if(!isNaN(t))return t;t="";for(let n=0;n=n&&r<=s&&(t+=r-n)}}return parseInt(t,10)}(e))}}let rr=String.fromCharCode(160),rs=`[ ${rr}]`,ri=RegExp(rs,"g");function ro(e){return e.replace(/\./g,"\\.?").replace(ri,rs)}function ra(e){return e.replace(/\./g,"").replace(ri," ").toLowerCase()}function rl(e,t){return null===e?null:{regex:RegExp(e.map(ro).join("|")),deser:([n])=>e.findIndex(e=>ra(n)===ra(e))+t}}function ru(e,t){return{regex:e,deser:([,e,t])=>tK(e,t),groups:t}}function rc(e){return{regex:e,deser:([e])=>e}}let rh={year:{"2-digit":"yy",numeric:"yyyyy"},month:{numeric:"M","2-digit":"MM",short:"MMM",long:"MMMM"},day:{numeric:"d","2-digit":"dd"},weekday:{short:"EEE",long:"EEEE"},dayperiod:"a",dayPeriod:"a",hour12:{numeric:"h","2-digit":"hh"},hour24:{numeric:"H","2-digit":"HH"},minute:{numeric:"m","2-digit":"mm"},second:{numeric:"s","2-digit":"ss"},timeZoneName:{long:"ZZZZZ",short:"ZZZ"}},rp=null;function rd(e,t){return Array.prototype.concat(...e.map(e=>(function(e,t){if(e.literal)return e;let n=rm(ni.macroTokenToFormatOpts(e.val),t);return null==n||n.includes(void 0)?e:n})(e,t)))}function rf(e,t,n){let r=rd(ni.parseFormat(n),e),s=r.map(t=>(function(e,t){let n=rt(t),r=rt(t,"{2}"),s=rt(t,"{3}"),i=rt(t,"{4}"),o=rt(t,"{6}"),a=rt(t,"{1,2}"),l=rt(t,"{1,3}"),u=rt(t,"{1,6}"),c=rt(t,"{1,9}"),h=rt(t,"{2,4}"),p=rt(t,"{4,6}"),d=e=>({regex:RegExp(e.val.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")),deser:([e])=>e,literal:!0}),f=(f=>{if(e.literal)return d(f);switch(f.val){case"G":return rl(t.eras("short"),0);case"GG":return rl(t.eras("long"),0);case"y":return rn(u);case"yy":case"kk":return rn(h,tW);case"yyyy":case"kkkk":return rn(i);case"yyyyy":return rn(p);case"yyyyyy":return rn(o);case"M":case"L":case"d":case"H":case"h":case"m":case"q":case"s":case"W":return rn(a);case"MM":case"LL":case"dd":case"HH":case"hh":case"mm":case"qq":case"ss":case"WW":return rn(r);case"MMM":return rl(t.months("short",!0),1);case"MMMM":return rl(t.months("long",!0),1);case"LLL":return rl(t.months("short",!1),1);case"LLLL":return rl(t.months("long",!1),1);case"o":case"S":return rn(l);case"ooo":case"SSS":return rn(s);case"u":return rc(c);case"uu":return rc(a);case"uuu":case"E":case"c":return rn(n);case"a":return rl(t.meridiems(),0);case"EEE":return rl(t.weekdays("short",!1),1);case"EEEE":return rl(t.weekdays("long",!1),1);case"ccc":return rl(t.weekdays("short",!0),1);case"cccc":return rl(t.weekdays("long",!0),1);case"Z":case"ZZ":return ru(RegExp(`([+-]${a.source})(?::(${r.source}))?`),2);case"ZZZ":return ru(RegExp(`([+-]${a.source})(${r.source})?`),2);case"z":return rc(/[a-z_+-/]{1,256}?/i);case" ":return rc(/[^\S\n\r]/);default:return d(f)}})(e)||{invalidReason:"missing Intl.DateTimeFormat.formatToParts support"};return f.token=e,f})(t,e)),i=s.find(e=>e.invalidReason);if(i)return{input:t,tokens:r,invalidReason:i.invalidReason};{let[e,n]=function(e){let t=e.map(e=>e.regex).reduce((e,t)=>`${e}(${t.source})`,"");return[`^${t}$`,e]}(s),i=RegExp(e,"i"),[o,a]=function(e,t,n){let r=e.match(t);if(!r)return[r,{}];{let e={},t=1;for(let s in n)if(tL(n,s)){let i=n[s],o=i.groups?i.groups+1:1;!i.literal&&i.token&&(e[i.token.val[0]]=i.deser(r.slice(t,t+o))),t+=o}return[r,e]}}(t,i,n),[l,u,c]=a?function(e){let t;let n=e=>{switch(e){case"S":return"millisecond";case"s":return"second";case"m":return"minute";case"h":case"H":return"hour";case"d":return"day";case"o":return"ordinal";case"L":case"M":return"month";case"y":return"year";case"E":case"c":return"weekday";case"W":return"weekNumber";case"k":return"weekYear";case"q":return"quarter";default:return null}},r=null;return tC(e.z)||(r=eX.create(e.z)),tC(e.Z)||(r||(r=new tt(e.Z)),t=e.Z),tC(e.q)||(e.M=(e.q-1)*3+1),tC(e.h)||(e.h<12&&1===e.a?e.h+=12:12!==e.h||0!==e.a||(e.h=0)),0===e.G&&e.y&&(e.y=-e.y),tC(e.u)||(e.S=tj(e.u)),[Object.keys(e).reduce((t,r)=>{let s=n(r);return s&&(t[s]=e[r]),t},{}),r,t]}(a):[null,null,void 0];if(tL(a,"a")&&tL(a,"H"))throw new em("Can't include meridiem when specifying 24-hour format");return{input:t,tokens:r,regex:i,rawMatches:o,matches:a,result:l,zone:u,specificOffset:c}}}function rm(e,t){if(!e)return null;let n=ni.create(t,e).dtFormatter((rp||(rp=rB.fromMillis(1555555555555)),rp)),r=n.formatToParts(),s=n.resolvedOptions();return r.map(t=>(function(e,t,n){let{type:r,value:s}=e;if("literal"===r){let e=/^\s+$/.test(s);return{literal:!e,val:e?" ":s}}let i=t[r],o=r;"hour"===r&&(o=null!=t.hour12?t.hour12?"hour12":"hour24":null!=t.hourCycle?"h11"===t.hourCycle||"h12"===t.hourCycle?"hour12":"hour24":n.hour12?"hour12":"hour24");let a=rh[o];if("object"==typeof a&&(a=a[i]),a)return{literal:!1,val:a}})(t,e,s))}let rg="Invalid DateTime";function ry(e){return new td("unsupported zone",`the zone "${e.name}" is not supported`)}function rb(e){return null===e.weekData&&(e.weekData=tv(e.c)),e.weekData}function rk(e){return null===e.localWeekData&&(e.localWeekData=tv(e.c,e.loc.getMinDaysInFirstWeek(),e.loc.getStartOfWeek())),e.localWeekData}function rv(e,t){let n={ts:e.ts,zone:e.zone,c:e.c,o:e.o,loc:e.loc,invalid:e.invalid};return new rB({...n,...t,old:n})}function rT(e,t,n){let r=e-6e4*t,s=n.offset(r);if(t===s)return[r,t];r-=(s-t)*6e4;let i=n.offset(r);return s===i?[r,s]:[e-6e4*Math.min(s,i),Math.max(s,i)]}function rx(e,t){let n=new Date(e+=6e4*t);return{year:n.getUTCFullYear(),month:n.getUTCMonth()+1,day:n.getUTCDate(),hour:n.getUTCHours(),minute:n.getUTCMinutes(),second:n.getUTCSeconds(),millisecond:n.getUTCMilliseconds()}}function rw(e,t){let n=e.o,r=e.c.year+Math.trunc(t.years),s=e.c.month+Math.trunc(t.months)+3*Math.trunc(t.quarters),i={...e.c,year:r,month:s,day:Math.min(e.c.day,tU(r,s))+Math.trunc(t.days)+7*Math.trunc(t.weeks)},o=n3.fromObject({years:t.years-Math.trunc(t.years),quarters:t.quarters-Math.trunc(t.quarters),months:t.months-Math.trunc(t.months),weeks:t.weeks-Math.trunc(t.weeks),days:t.days-Math.trunc(t.days),hours:t.hours,minutes:t.minutes,seconds:t.seconds,milliseconds:t.milliseconds}).as("milliseconds"),[a,l]=rT(tq(i),n,e.zone);return 0!==o&&(a+=o,l=e.zone.offset(a)),{ts:a,o:l}}function rS(e,t,n,r,s,i){let{setZone:o,zone:a}=n;if((!e||0===Object.keys(e).length)&&!t)return rB.invalid(new td("unparsable",`the input "${s}" can't be parsed as ${r}`));{let r=rB.fromObject(e,{...n,zone:t||a,specificOffset:i});return o?r:r.setZone(a)}}function rE(e,t,n=!0){return e.isValid?ni.create(e7.create("en-US"),{allowZ:n,forceSimple:!0}).formatDateTimeFromString(e,t):null}function r_(e,t){let n=e.c.year>9999||e.c.year<0,r="";return n&&e.c.year>=0&&(r+="+"),r+=tF(e.c.year,n?6:4),t?r+="-"+tF(e.c.month)+"-"+tF(e.c.day):r+=tF(e.c.month)+tF(e.c.day),r}function rC(e,t,n,r,s,i){let o=tF(e.c.hour);return t?(o+=":"+tF(e.c.minute),0===e.c.millisecond&&0===e.c.second&&n||(o+=":")):o+=tF(e.c.minute),0===e.c.millisecond&&0===e.c.second&&n||(o+=tF(e.c.second),0===e.c.millisecond&&r||(o+="."+tF(e.c.millisecond,3))),s&&(e.isOffsetFixed&&0===e.offset&&!i?o+="Z":e.o<0?o+="-"+tF(Math.trunc(-e.o/60))+":"+tF(Math.trunc(-e.o%60)):o+="+"+tF(Math.trunc(e.o/60))+":"+tF(Math.trunc(e.o%60))),i&&(o+="["+e.zone.ianaName+"]"),o}let rA={month:1,day:1,hour:0,minute:0,second:0,millisecond:0},rI={weekNumber:1,weekday:1,hour:0,minute:0,second:0,millisecond:0},rP={ordinal:1,hour:0,minute:0,second:0,millisecond:0},rN=["year","month","day","hour","minute","second","millisecond"],rR=["weekYear","weekNumber","weekday","hour","minute","second","millisecond"],rL=["year","ordinal","hour","minute","second","millisecond"];function rO(e){switch(e.toLowerCase()){case"localweekday":case"localweekdays":return"localWeekday";case"localweeknumber":case"localweeknumbers":return"localWeekNumber";case"localweekyear":case"localweekyears":return"localWeekYear";default:return function(e){let t={year:"year",years:"year",month:"month",months:"month",day:"day",days:"day",hour:"hour",hours:"hour",minute:"minute",minutes:"minute",quarter:"quarter",quarters:"quarter",second:"second",seconds:"second",millisecond:"millisecond",milliseconds:"millisecond",weekday:"weekday",weekdays:"weekday",weeknumber:"weekNumber",weeksnumber:"weekNumber",weeknumbers:"weekNumber",weekyear:"weekYear",weekyears:"weekYear",ordinal:"ordinal"}[e.toLowerCase()];if(!t)throw new eg(e);return t}(e)}}function rM(e,t){let n,r;let s=tr(t.zone,tp.defaultZone),i=e7.fromObject(t),o=tp.now();if(tC(e.year))n=o;else{for(let t of rN)tC(e[t])&&(e[t]=rA[t]);let t=tE(e)||t_(e);if(t)return rB.invalid(t);let i=s.offset(o);[n,r]=rT(tq(e),i,s)}return new rB({ts:n,zone:s,loc:i,o:r})}function rF(e,t,n){let r=!!tC(n.round)||n.round,s=(e,s)=>(e=tH(e,r||n.calendary?0:2,!0),t.loc.clone(n).relFormatter(n).format(e,s)),i=r=>n.calendary?t.hasSame(e,r)?0:t.startOf(r).diff(e.startOf(r),r).get(r):t.diff(e,r).get(r);if(n.unit)return s(i(n.unit),n.unit);for(let e of n.units){let t=i(e);if(Math.abs(t)>=1)return s(t,e)}return s(e>t?-0:0,n.units[n.units.length-1])}function rD(e){let t={},n;return e.length>0&&"object"==typeof e[e.length-1]?(t=e[e.length-1],n=Array.from(e).slice(0,e.length-1)):n=Array.from(e),[t,n]}class rB{constructor(e){let t=e.zone||tp.defaultZone,n=e.invalid||(Number.isNaN(e.ts)?new td("invalid input"):null)||(t.isValid?null:ry(t));this.ts=tC(e.ts)?tp.now():e.ts;let r=null,s=null;if(!n){if(e.old&&e.old.ts===this.ts&&e.old.zone.equals(t))[r,s]=[e.old.c,e.old.o];else{let e=t.offset(this.ts);r=(n=Number.isNaN((r=rx(this.ts,e)).year)?new td("invalid input"):null)?null:r,s=n?null:e}}this._zone=t,this.loc=e.loc||e7.create(),this.invalid=n,this.weekData=null,this.localWeekData=null,this.c=r,this.o=s,this.isLuxonDateTime=!0}static now(){return new rB({})}static local(){let[e,t]=rD(arguments),[n,r,s,i,o,a,l]=t;return rM({year:n,month:r,day:s,hour:i,minute:o,second:a,millisecond:l},e)}static utc(){let[e,t]=rD(arguments),[n,r,s,i,o,a,l]=t;return e.zone=tt.utcInstance,rM({year:n,month:r,day:s,hour:i,minute:o,second:a,millisecond:l},e)}static fromJSDate(e,t={}){let n="[object Date]"===Object.prototype.toString.call(e)?e.valueOf():NaN;if(Number.isNaN(n))return rB.invalid("invalid input");let r=tr(t.zone,tp.defaultZone);return r.isValid?new rB({ts:n,zone:r,loc:e7.fromObject(t)}):rB.invalid(ry(r))}static fromMillis(e,t={}){if(tA(e))return e<-864e13||e>864e13?rB.invalid("Timestamp out of range"):new rB({ts:e,zone:tr(t.zone,tp.defaultZone),loc:e7.fromObject(t)});throw new ey(`fromMillis requires a numerical input, but received a ${typeof e} with value ${e}`)}static fromSeconds(e,t={}){if(tA(e))return new rB({ts:1e3*e,zone:tr(t.zone,tp.defaultZone),loc:e7.fromObject(t)});throw new ey("fromSeconds requires a numerical input")}static fromObject(e,t={}){e=e||{};let n=tr(t.zone,tp.defaultZone);if(!n.isValid)return rB.invalid(ry(n));let r=e7.fromObject(t),s=tY(e,rO),{minDaysInFirstWeek:i,startOfWeek:o}=tS(s,r),a=tp.now(),l=tC(t.specificOffset)?n.offset(a):t.specificOffset,u=!tC(s.ordinal),c=!tC(s.year),h=!tC(s.month)||!tC(s.day),p=c||h,d=s.weekYear||s.weekNumber;if((p||u)&&d)throw new em("Can't mix weekYear/weekNumber units with year/month/day or ordinals");if(h&&u)throw new em("Can't mix ordinal dates with month/day");let f=d||s.weekday&&!p,m,g,y=rx(a,l);f?(m=rR,g=rI,y=tv(y,i,o)):u?(m=rL,g=rP,y=tx(y)):(m=rN,g=rA);let b=!1;for(let e of m)tC(s[e])?b?s[e]=g[e]:s[e]=y[e]:b=!0;let k=(f?function(e,t=4,n=1){let r=tI(e.weekYear),s=tM(e.weekNumber,1,tz(e.weekYear,t,n)),i=tM(e.weekday,1,7);return r?s?!i&&tg("weekday",e.weekday):tg("week",e.weekNumber):tg("weekYear",e.weekYear)}(s,i,o):u?function(e){let t=tI(e.year),n=tM(e.ordinal,1,t$(e.year));return t?!n&&tg("ordinal",e.ordinal):tg("year",e.year)}(s):tE(s))||t_(s);if(k)return rB.invalid(k);let[v,T]=rT(tq(f?tT(s,i,o):u?tw(s):s),l,n),x=new rB({ts:v,zone:n,o:T,loc:r});return s.weekday&&p&&e.weekday!==x.weekday?rB.invalid("mismatched weekday",`you can't specify both a weekday of ${s.weekday} and a date of ${x.toISO()}`):x}static fromISO(e,t={}){let[n,r]=nu(e,[nF,nH],[nD,nV],[nB,n$],[nj,nU]);return rS(n,r,t,"ISO 8601",e)}static fromRFC2822(e,t={}){let[n,r]=nu(e.replace(/\([^()]*\)|[\n\t]/g," ").replace(/(\s\s+)/g," ").trim(),[nI,nP]);return rS(n,r,t,"RFC 2822",e)}static fromHTTP(e,t={}){let[n,r]=nu(e,[nN,nO],[nR,nO],[nL,nM]);return rS(n,r,t,"HTTP",t)}static fromFormat(e,t,n={}){if(tC(e)||tC(t))throw new ey("fromFormat requires an input string and a format");let{locale:r=null,numberingSystem:s=null}=n,[i,o,a,l]=function(e,t,n){let{result:r,zone:s,specificOffset:i,invalidReason:o}=rf(e,t,n);return[r,s,i,o]}(e7.fromOpts({locale:r,numberingSystem:s,defaultToEN:!0}),e,t);return l?rB.invalid(l):rS(i,o,n,`format ${t}`,e,a)}static fromString(e,t,n={}){return rB.fromFormat(e,t,n)}static fromSQL(e,t={}){let[n,r]=nu(e,[nG,nH],[nz,nW]);return rS(n,r,t,"SQL",e)}static invalid(e,t=null){if(!e)throw new ey("need to specify a reason the DateTime is invalid");let n=e instanceof td?e:new td(e,t);if(!tp.throwOnInvalid)return new rB({invalid:n});throw new ep(n)}static isDateTime(e){return e&&e.isLuxonDateTime||!1}static parseFormatForOpts(e,t={}){let n=rm(e,e7.fromObject(t));return n?n.map(e=>e?e.val:null).join(""):null}static expandFormat(e,t={}){return rd(ni.parseFormat(e),e7.fromObject(t)).map(e=>e.val).join("")}get(e){return this[e]}get isValid(){return null===this.invalid}get invalidReason(){return this.invalid?this.invalid.reason:null}get invalidExplanation(){return this.invalid?this.invalid.explanation:null}get locale(){return this.isValid?this.loc.locale:null}get numberingSystem(){return this.isValid?this.loc.numberingSystem:null}get outputCalendar(){return this.isValid?this.loc.outputCalendar:null}get zone(){return this._zone}get zoneName(){return this.isValid?this.zone.name:null}get year(){return this.isValid?this.c.year:NaN}get quarter(){return this.isValid?Math.ceil(this.c.month/3):NaN}get month(){return this.isValid?this.c.month:NaN}get day(){return this.isValid?this.c.day:NaN}get hour(){return this.isValid?this.c.hour:NaN}get minute(){return this.isValid?this.c.minute:NaN}get second(){return this.isValid?this.c.second:NaN}get millisecond(){return this.isValid?this.c.millisecond:NaN}get weekYear(){return this.isValid?rb(this).weekYear:NaN}get weekNumber(){return this.isValid?rb(this).weekNumber:NaN}get weekday(){return this.isValid?rb(this).weekday:NaN}get isWeekend(){return this.isValid&&this.loc.getWeekendDays().includes(this.weekday)}get localWeekday(){return this.isValid?rk(this).weekday:NaN}get localWeekNumber(){return this.isValid?rk(this).weekNumber:NaN}get localWeekYear(){return this.isValid?rk(this).weekYear:NaN}get ordinal(){return this.isValid?tx(this.c).ordinal:NaN}get monthShort(){return this.isValid?n5.months("short",{locObj:this.loc})[this.month-1]:null}get monthLong(){return this.isValid?n5.months("long",{locObj:this.loc})[this.month-1]:null}get weekdayShort(){return this.isValid?n5.weekdays("short",{locObj:this.loc})[this.weekday-1]:null}get weekdayLong(){return this.isValid?n5.weekdays("long",{locObj:this.loc})[this.weekday-1]:null}get offset(){return this.isValid?+this.o:NaN}get offsetNameShort(){return this.isValid?this.zone.offsetName(this.ts,{format:"short",locale:this.locale}):null}get offsetNameLong(){return this.isValid?this.zone.offsetName(this.ts,{format:"long",locale:this.locale}):null}get isOffsetFixed(){return this.isValid?this.zone.isUniversal:null}get isInDST(){return!this.isOffsetFixed&&(this.offset>this.set({month:1,day:1}).offset||this.offset>this.set({month:5}).offset)}getPossibleOffsets(){if(!this.isValid||this.isOffsetFixed)return[this];let e=tq(this.c),t=this.zone.offset(e-864e5),n=this.zone.offset(e+864e5),r=this.zone.offset(e-6e4*t),s=this.zone.offset(e-6e4*n);if(r===s)return[this];let i=e-6e4*r,o=e-6e4*s,a=rx(i,r),l=rx(o,s);return a.hour===l.hour&&a.minute===l.minute&&a.second===l.second&&a.millisecond===l.millisecond?[rv(this,{ts:i}),rv(this,{ts:o})]:[this]}get isInLeapYear(){return tV(this.year)}get daysInMonth(){return tU(this.year,this.month)}get daysInYear(){return this.isValid?t$(this.year):NaN}get weeksInWeekYear(){return this.isValid?tz(this.weekYear):NaN}get weeksInLocalWeekYear(){return this.isValid?tz(this.localWeekYear,this.loc.getMinDaysInFirstWeek(),this.loc.getStartOfWeek()):NaN}resolvedLocaleOptions(e={}){let{locale:t,numberingSystem:n,calendar:r}=ni.create(this.loc.clone(e),e).resolvedOptions(this);return{locale:t,numberingSystem:n,outputCalendar:r}}toUTC(e=0,t={}){return this.setZone(tt.instance(e),t)}toLocal(){return this.setZone(tp.defaultZone)}setZone(e,{keepLocalTime:t=!1,keepCalendarTime:n=!1}={}){if((e=tr(e,tp.defaultZone)).equals(this.zone))return this;if(!e.isValid)return rB.invalid(ry(e));{let s=this.ts;if(t||n){var r;let t=e.offset(this.ts),n=this.toObject();[s]=(r=e,rT(tq(n),t,r))}return rv(this,{ts:s,zone:e})}}reconfigure({locale:e,numberingSystem:t,outputCalendar:n}={}){return rv(this,{loc:this.loc.clone({locale:e,numberingSystem:t,outputCalendar:n})})}setLocale(e){return this.reconfigure({locale:e})}set(e){var t,n,r;let s;if(!this.isValid)return this;let i=tY(e,rO),{minDaysInFirstWeek:o,startOfWeek:a}=tS(i,this.loc),l=!tC(i.weekYear)||!tC(i.weekNumber)||!tC(i.weekday),u=!tC(i.ordinal),c=!tC(i.year),h=!tC(i.month)||!tC(i.day),p=i.weekYear||i.weekNumber;if((c||h||u)&&p)throw new em("Can't mix weekYear/weekNumber units with year/month/day or ordinals");if(h&&u)throw new em("Can't mix ordinal dates with month/day");l?s=tT({...tv(this.c,o,a),...i},o,a):tC(i.ordinal)?(s={...this.toObject(),...i},tC(i.day)&&(s.day=Math.min(tU(s.year,s.month),s.day))):s=tw({...tx(this.c),...i});let[d,f]=(t=s,n=this.o,r=this.zone,rT(tq(t),n,r));return rv(this,{ts:d,o:f})}plus(e){return this.isValid?rv(this,rw(this,n3.fromDurationLike(e))):this}minus(e){return this.isValid?rv(this,rw(this,n3.fromDurationLike(e).negate())):this}startOf(e,{useLocaleWeeks:t=!1}={}){if(!this.isValid)return this;let n={},r=n3.normalizeUnit(e);switch(r){case"years":n.month=1;case"quarters":case"months":n.day=1;case"weeks":case"days":n.hour=0;case"hours":n.minute=0;case"minutes":n.second=0;case"seconds":n.millisecond=0}if("weeks"===r){if(t){let e=this.loc.getStartOfWeek(),{weekday:t}=this;tthis.valueOf(),o=function(e,t,n,r){let[s,i,o,a]=function(e,t,n){let r,s;let i={},o=e;for(let[a,l]of[["years",(e,t)=>t.year-e.year],["quarters",(e,t)=>t.quarter-e.quarter+(t.year-e.year)*4],["months",(e,t)=>t.month-e.month+(t.year-e.year)*12],["weeks",(e,t)=>{let n=n4(e,t);return(n-n%7)/7}],["days",n4]])n.indexOf(a)>=0&&(r=a,i[a]=l(e,t),(s=o.plus(i))>t?(i[a]--,(e=o.plus(i))>t&&(s=e,i[a]--,e=o.plus(i))):e=s);return[e,i,s,r]}(e,t,n),l=t-s,u=n.filter(e=>["hours","minutes","seconds","milliseconds"].indexOf(e)>=0);0===u.length&&(o0?n3.fromMillis(l,r).shiftTo(...u).plus(c):c}(i?this:e,i?e:this,s,r);return i?o.negate():o}diffNow(e="milliseconds",t={}){return this.diff(rB.now(),e,t)}until(e){return this.isValid?n8.fromDateTimes(this,e):this}hasSame(e,t,n){if(!this.isValid)return!1;let r=e.valueOf(),s=this.setZone(e.zone,{keepLocalTime:!0});return s.startOf(t,n)<=r&&r<=s.endOf(t,n)}equals(e){return this.isValid&&e.isValid&&this.valueOf()===e.valueOf()&&this.zone.equals(e.zone)&&this.loc.equals(e.loc)}toRelative(e={}){if(!this.isValid)return null;let t=e.base||rB.fromObject({},{zone:this.zone}),n=e.padding?thise.valueOf(),Math.min)}static max(...e){if(!e.every(rB.isDateTime))throw new ey("max requires all arguments be DateTimes");return tR(e,e=>e.valueOf(),Math.max)}static fromFormatExplain(e,t,n={}){let{locale:r=null,numberingSystem:s=null}=n;return rf(e7.fromOpts({locale:r,numberingSystem:s,defaultToEN:!0}),e,t)}static fromStringExplain(e,t,n={}){return rB.fromFormatExplain(e,t,n)}static get DATE_SHORT(){return ex}static get DATE_MED(){return ew}static get DATE_MED_WITH_WEEKDAY(){return eS}static get DATE_FULL(){return eE}static get DATE_HUGE(){return e_}static get TIME_SIMPLE(){return eC}static get TIME_WITH_SECONDS(){return eA}static get TIME_WITH_SHORT_OFFSET(){return eI}static get TIME_WITH_LONG_OFFSET(){return eP}static get TIME_24_SIMPLE(){return eN}static get TIME_24_WITH_SECONDS(){return eR}static get TIME_24_WITH_SHORT_OFFSET(){return eL}static get TIME_24_WITH_LONG_OFFSET(){return eO}static get DATETIME_SHORT(){return eM}static get DATETIME_SHORT_WITH_SECONDS(){return eF}static get DATETIME_MED(){return eD}static get DATETIME_MED_WITH_SECONDS(){return eB}static get DATETIME_MED_WITH_WEEKDAY(){return ej}static get DATETIME_FULL(){return eH}static get DATETIME_FULL_WITH_SECONDS(){return eV}static get DATETIME_HUGE(){return e$}static get DATETIME_HUGE_WITH_SECONDS(){return eU}}function rj(e){if(rB.isDateTime(e))return e;if(e&&e.valueOf&&tA(e.valueOf()))return rB.fromJSDate(e);if(e&&"object"==typeof e)return rB.fromObject(e);throw new ey(`Unknown datetime argument: ${e}, of type ${typeof e}`)}class rH{callback;startTime;timeoutMillis=new Set;runningTimeout;constructor(e){this.startTime=rB.now(),this.callback=e}start(){this.startTime=rB.now(),this.startNextTimeout()}clear(){this.runningTimeout&&(clearTimeout(this.runningTimeout),this.runningTimeout=void 0)}addTimeout(e){let t=n3.fromDurationLike(e).toMillis();return this.timeoutMillis.add(t),this.startNextTimeout(),()=>{this.timeoutMillis.delete(t),this.startNextTimeout()}}startNextTimeout(){if(this.clear(),0===this.timeoutMillis.size)return;let e=Math.min(...this.timeoutMillis)-this.startTime.diffNow().negate().toMillis();e<=0?this.callback():this.runningTimeout=setTimeout(()=>this.callback(),e)}}class rV{loader;loaderPromise;loaderPromiseVersion=0;autoRefreshTimeout;value=new es(er);error=new es(er);state=new es("void");constructor(e){this.loader=e,this.autoRefreshTimeout=new rH(()=>this.refresh())}refresh(){this.loaderPromiseVersion++,this.loaderPromise=void 0,this.value.updateValue(er),this.error.updateValue(er),this.state.updateValue("void")}addTTL(e){return this.autoRefreshTimeout.addTimeout(e)}async load(){if(!this.value.value.isSet&&!this.error.value.isSet)return void 0===this.loaderPromise&&(this.loaderPromise=this.handleLoading()),this.loaderPromise}isMatchingError(e){return!!this.error.value.isSet&&(!0===e||this.error.value.value===e)}async handleLoading(){let e=++this.loaderPromiseVersion,t=er,n=er;this.state.updateValue("loading");try{let e=await this.loader();t=en(e)}catch(e){n=en(e)}this.loaderPromiseVersion===e&&(this.loaderPromise=void 0,t.isSet?(this.value.updateValue(t),this.state.updateValue("loaded")):n.isSet&&(this.error.updateValue(n),this.state.updateValue("error"))),this.autoRefreshTimeout.start()}use(e={}){return ec(this,e)}watch(e={}){return this.use(e)}watchState(){return eo(this.state)}}let r$=new rV(()=>Promise.resolve(void 0));function rU(e,t,n={}){let{loaderId:r,tags:s}=n;if(null===t)return r$;let i=et({asyncFn:e,parameters:t,loaderId:r}),o=()=>e(...t);return Q.default.getOrSet(i,()=>new rV(o),{tags:s})}},637773:function(e,t,n){"use strict";n.d(t,{h:function(){return eC}});var r,s,i,o,a,l,u,c,h,p,d,f,m=function(e,t){return(m=Object.setPrototypeOf||({__proto__:[]})instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function g(e,t){if("function"!=typeof t&&null!==t)throw TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var y=function(){return(y=Object.assign||function(e){for(var t,n=1,r=arguments.length;n=Math.abs(e)},K=!0;try{var X=er("([^\\p{White_Space}\\p{Pattern_Syntax}]*)","yu");K=(null===(h=X.exec("a"))||void 0===h?void 0:h[0])==="a"}catch(e){K=!1}var Y=$?function(e,t,n){return e.startsWith(t,n)}:function(e,t,n){return e.slice(n,n+t.length)===t},J=U?String.fromCodePoint:function(){for(var e,t=[],n=0;ni;){if((e=t[i++])>1114111)throw RangeError(e+" is not a valid code point");r+=e<65536?String.fromCharCode(e):String.fromCharCode(((e-=65536)>>10)+55296,e%1024+56320)}return r},Q=q?Object.fromEntries:function(e){for(var t={},n=0;n=r)){var s=e.charCodeAt(t);return s<55296||s>56319||t+1===r||(n=e.charCodeAt(t+1))<56320||n>57343?s:(s-55296<<10)+(n-56320)+65536}},et=z?function(e){return e.trimStart()}:function(e){return e.replace(j,"")},en=W?function(e){return e.trimEnd()}:function(e){return e.replace(H,"")};function er(e,t){return new RegExp(e,t)}if(K){var es=er("([^\\p{White_Space}\\p{Pattern_Syntax}]*)","yu");p=function(e,t){var n;return es.lastIndex=t,null!==(n=es.exec(e)[1])&&void 0!==n?n:""}}else p=function(e,t){for(var n=[];;){var r,s=ee(e,t);if(void 0===s||ea(s)||(r=s)>=33&&r<=35||36===r||r>=37&&r<=39||40===r||41===r||42===r||43===r||44===r||45===r||r>=46&&r<=47||r>=58&&r<=59||r>=60&&r<=62||r>=63&&r<=64||91===r||92===r||93===r||94===r||96===r||123===r||124===r||125===r||126===r||161===r||r>=162&&r<=165||166===r||167===r||169===r||171===r||172===r||174===r||176===r||177===r||182===r||187===r||191===r||215===r||247===r||r>=8208&&r<=8213||r>=8214&&r<=8215||8216===r||8217===r||8218===r||r>=8219&&r<=8220||8221===r||8222===r||8223===r||r>=8224&&r<=8231||r>=8240&&r<=8248||8249===r||8250===r||r>=8251&&r<=8254||r>=8257&&r<=8259||8260===r||8261===r||8262===r||r>=8263&&r<=8273||8274===r||8275===r||r>=8277&&r<=8286||r>=8592&&r<=8596||r>=8597&&r<=8601||r>=8602&&r<=8603||r>=8604&&r<=8607||8608===r||r>=8609&&r<=8610||8611===r||r>=8612&&r<=8613||8614===r||r>=8615&&r<=8621||8622===r||r>=8623&&r<=8653||r>=8654&&r<=8655||r>=8656&&r<=8657||8658===r||8659===r||8660===r||r>=8661&&r<=8691||r>=8692&&r<=8959||r>=8960&&r<=8967||8968===r||8969===r||8970===r||8971===r||r>=8972&&r<=8991||r>=8992&&r<=8993||r>=8994&&r<=9e3||9001===r||9002===r||r>=9003&&r<=9083||9084===r||r>=9085&&r<=9114||r>=9115&&r<=9139||r>=9140&&r<=9179||r>=9180&&r<=9185||r>=9186&&r<=9254||r>=9255&&r<=9279||r>=9280&&r<=9290||r>=9291&&r<=9311||r>=9472&&r<=9654||9655===r||r>=9656&&r<=9664||9665===r||r>=9666&&r<=9719||r>=9720&&r<=9727||r>=9728&&r<=9838||9839===r||r>=9840&&r<=10087||10088===r||10089===r||10090===r||10091===r||10092===r||10093===r||10094===r||10095===r||10096===r||10097===r||10098===r||10099===r||10100===r||10101===r||r>=10132&&r<=10175||r>=10176&&r<=10180||10181===r||10182===r||r>=10183&&r<=10213||10214===r||10215===r||10216===r||10217===r||10218===r||10219===r||10220===r||10221===r||10222===r||10223===r||r>=10224&&r<=10239||r>=10240&&r<=10495||r>=10496&&r<=10626||10627===r||10628===r||10629===r||10630===r||10631===r||10632===r||10633===r||10634===r||10635===r||10636===r||10637===r||10638===r||10639===r||10640===r||10641===r||10642===r||10643===r||10644===r||10645===r||10646===r||10647===r||10648===r||r>=10649&&r<=10711||10712===r||10713===r||10714===r||10715===r||r>=10716&&r<=10747||10748===r||10749===r||r>=10750&&r<=11007||r>=11008&&r<=11055||r>=11056&&r<=11076||r>=11077&&r<=11078||r>=11079&&r<=11084||r>=11085&&r<=11123||r>=11124&&r<=11125||r>=11126&&r<=11157||11158===r||r>=11159&&r<=11263||r>=11776&&r<=11777||11778===r||11779===r||11780===r||11781===r||r>=11782&&r<=11784||11785===r||11786===r||11787===r||11788===r||11789===r||r>=11790&&r<=11798||11799===r||r>=11800&&r<=11801||11802===r||11803===r||11804===r||11805===r||r>=11806&&r<=11807||11808===r||11809===r||11810===r||11811===r||11812===r||11813===r||11814===r||11815===r||11816===r||11817===r||r>=11818&&r<=11822||11823===r||r>=11824&&r<=11833||r>=11834&&r<=11835||r>=11836&&r<=11839||11840===r||11841===r||11842===r||r>=11843&&r<=11855||r>=11856&&r<=11857||11858===r||r>=11859&&r<=11903||r>=12289&&r<=12291||12296===r||12297===r||12298===r||12299===r||12300===r||12301===r||12302===r||12303===r||12304===r||12305===r||r>=12306&&r<=12307||12308===r||12309===r||12310===r||12311===r||12312===r||12313===r||12314===r||12315===r||12316===r||12317===r||r>=12318&&r<=12319||12320===r||12336===r||64830===r||64831===r||r>=65093&&r<=65094)break;n.push(s),t+=s>=65536?2:1}return J.apply(void 0,n)};var ei=function(){function e(e,t){void 0===t&&(t={}),this.message=e,this.position={offset:0,line:1,column:1},this.ignoreTag=!!t.ignoreTag,this.locale=t.locale,this.requiresOtherClause=!!t.requiresOtherClause,this.shouldParseSkeletons=!!t.shouldParseSkeletons}return e.prototype.parse=function(){if(0!==this.offset())throw Error("parser can only be used once");return this.parseMessage(0,"",!1)},e.prototype.parseMessage=function(e,t,n){for(var r=[];!this.isEOF();){var s=this.char();if(123===s){var i=this.parseArgument(e,n);if(i.err)return i;r.push(i.val)}else if(125===s&&e>0)break;else if(35===s&&("plural"===t||"selectordinal"===t)){var o=this.clonePosition();this.bump(),r.push({type:u.pound,location:V(o,this.clonePosition())})}else if(60!==s||this.ignoreTag||47!==this.peek()){if(60===s&&!this.ignoreTag&&eo(this.peek()||0)){var i=this.parseTag(e,t);if(i.err)return i;r.push(i.val)}else{var i=this.parseLiteral(e,t);if(i.err)return i;r.push(i.val)}}else{if(!n)return this.error(l.UNMATCHED_CLOSING_TAG,V(this.clonePosition(),this.clonePosition()));break}}return{val:r,err:null}},e.prototype.parseTag=function(e,t){var n=this.clonePosition();this.bump();var r=this.parseTagName();if(this.bumpSpace(),this.bumpIf("/>"))return{val:{type:u.literal,value:"<".concat(r,"/>"),location:V(n,this.clonePosition())},err:null};if(!this.bumpIf(">"))return this.error(l.INVALID_TAG,V(n,this.clonePosition()));var s=this.parseMessage(e+1,t,!0);if(s.err)return s;var i=s.val,o=this.clonePosition();if(!this.bumpIf(""))?{val:{type:u.tag,value:r,children:i,location:V(n,this.clonePosition())},err:null}:this.error(l.INVALID_TAG,V(o,this.clonePosition()))},e.prototype.parseTagName=function(){var e,t=this.offset();for(this.bump();!this.isEOF()&&(45===(e=this.char())||46===e||e>=48&&e<=57||95===e||e>=97&&e<=122||e>=65&&e<=90||183==e||e>=192&&e<=214||e>=216&&e<=246||e>=248&&e<=893||e>=895&&e<=8191||e>=8204&&e<=8205||e>=8255&&e<=8256||e>=8304&&e<=8591||e>=11264&&e<=12271||e>=12289&&e<=55295||e>=63744&&e<=64975||e>=65008&&e<=65533||e>=65536&&e<=983039);)this.bump();return this.message.slice(t,this.offset())},e.prototype.parseLiteral=function(e,t){for(var n=this.clonePosition(),r="";;){var s=this.tryParseQuote(t);if(s){r+=s;continue}var i=this.tryParseUnquoted(e,t);if(i){r+=i;continue}var o=this.tryParseLeftAngleBracket();if(o){r+=o;continue}break}var a=V(n,this.clonePosition());return{val:{type:u.literal,value:r,location:a},err:null}},e.prototype.tryParseLeftAngleBracket=function(){var e;return this.isEOF()||60!==this.char()||!this.ignoreTag&&(eo(e=this.peek()||0)||47===e)?null:(this.bump(),"<")},e.prototype.tryParseQuote=function(e){if(this.isEOF()||39!==this.char())return null;switch(this.peek()){case 39:return this.bump(),this.bump(),"'";case 123:case 60:case 62:case 125:break;case 35:if("plural"===e||"selectordinal"===e)break;return null;default:return null}this.bump();var t=[this.char()];for(this.bump();!this.isEOF();){var n=this.char();if(39===n){if(39===this.peek())t.push(39),this.bump();else{this.bump();break}}else t.push(n);this.bump()}return J.apply(void 0,t)},e.prototype.tryParseUnquoted=function(e,t){if(this.isEOF())return null;var n=this.char();return 60===n||123===n||35===n&&("plural"===t||"selectordinal"===t)||125===n&&e>0?null:(this.bump(),J(n))},e.prototype.parseArgument=function(e,t){var n=this.clonePosition();if(this.bump(),this.bumpSpace(),this.isEOF())return this.error(l.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));if(125===this.char())return this.bump(),this.error(l.EMPTY_ARGUMENT,V(n,this.clonePosition()));var r=this.parseIdentifierIfPossible().value;if(!r)return this.error(l.MALFORMED_ARGUMENT,V(n,this.clonePosition()));if(this.bumpSpace(),this.isEOF())return this.error(l.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));switch(this.char()){case 125:return this.bump(),{val:{type:u.argument,value:r,location:V(n,this.clonePosition())},err:null};case 44:if(this.bump(),this.bumpSpace(),this.isEOF())return this.error(l.EXPECT_ARGUMENT_CLOSING_BRACE,V(n,this.clonePosition()));return this.parseArgumentOptions(e,t,r,n);default:return this.error(l.MALFORMED_ARGUMENT,V(n,this.clonePosition()))}},e.prototype.parseIdentifierIfPossible=function(){var e=this.clonePosition(),t=this.offset(),n=p(this.message,t),r=t+n.length;return this.bumpTo(r),{value:n,location:V(e,this.clonePosition())}},e.prototype.parseArgumentOptions=function(e,t,n,r){var s,i=this.clonePosition(),o=this.parseIdentifierIfPossible().value,a=this.clonePosition();switch(o){case"":return this.error(l.EXPECT_ARGUMENT_TYPE,V(i,a));case"number":case"date":case"time":this.bumpSpace();var h=null;if(this.bumpIf(",")){this.bumpSpace();var p=this.clonePosition(),d=this.parseSimpleArgStyleIfPossible();if(d.err)return d;var f=en(d.val);if(0===f.length)return this.error(l.EXPECT_ARGUMENT_STYLE,V(this.clonePosition(),this.clonePosition()));h={style:f,styleLocation:V(p,this.clonePosition())}}var m=this.tryParseArgumentClose(r);if(m.err)return m;var g=V(r,this.clonePosition());if(h&&Y(null==h?void 0:h.style,"::",0)){var b,k=et(h.style.slice(2));if("number"===o){var d=this.parseNumberSkeletonFromString(k,h.styleLocation);if(d.err)return d;return{val:{type:u.number,value:n,location:g,style:d.val},err:null}}if(0===k.length)return this.error(l.EXPECT_DATE_TIME_SKELETON,g);var v=k;this.locale&&(v=function(e,t){for(var n="",r=0;r>1),l=function(e){var t,n=e.hourCycle;if(void 0===n&&e.hourCycles&&e.hourCycles.length&&(n=e.hourCycles[0]),n)switch(n){case"h24":return"k";case"h23":return"H";case"h12":return"h";case"h11":return"K";default:throw Error("Invalid hourCycle")}var r=e.language;return"root"!==r&&(t=e.maximize().region),(B[t||""]||B[r||""]||B["".concat(r,"-001")]||B["001"])[0]}(t);for(("H"==l||"k"==l)&&(a=0);a-- >0;)n+="a";for(;o-- >0;)n=l+n}else"J"===s?n+="H":n+=s}return n}(k,this.locale));var f={type:c.dateTime,pattern:v,location:h.styleLocation,parsedOptions:this.shouldParseSkeletons?(b={},v.replace(I,function(e){var t=e.length;switch(e[0]){case"G":b.era=4===t?"long":5===t?"narrow":"short";break;case"y":b.year=2===t?"2-digit":"numeric";break;case"Y":case"u":case"U":case"r":throw RangeError("`Y/u/U/r` (year) patterns are not supported, use `y` instead");case"q":case"Q":throw RangeError("`q/Q` (quarter) patterns are not supported");case"M":case"L":b.month=["numeric","2-digit","short","long","narrow"][t-1];break;case"w":case"W":throw RangeError("`w/W` (week) patterns are not supported");case"d":b.day=["numeric","2-digit"][t-1];break;case"D":case"F":case"g":throw RangeError("`D/F/g` (day) patterns are not supported, use `d` instead");case"E":b.weekday=4===t?"long":5===t?"narrow":"short";break;case"e":if(t<4)throw RangeError("`e..eee` (weekday) patterns are not supported");b.weekday=["short","long","narrow","short"][t-4];break;case"c":if(t<4)throw RangeError("`c..ccc` (weekday) patterns are not supported");b.weekday=["short","long","narrow","short"][t-4];break;case"a":b.hour12=!0;break;case"b":case"B":throw RangeError("`b/B` (period) patterns are not supported, use `a` instead");case"h":b.hourCycle="h12",b.hour=["numeric","2-digit"][t-1];break;case"H":b.hourCycle="h23",b.hour=["numeric","2-digit"][t-1];break;case"K":b.hourCycle="h11",b.hour=["numeric","2-digit"][t-1];break;case"k":b.hourCycle="h24",b.hour=["numeric","2-digit"][t-1];break;case"j":case"J":case"C":throw RangeError("`j/J/C` (hour) patterns are not supported, use `h/H/K/k` instead");case"m":b.minute=["numeric","2-digit"][t-1];break;case"s":b.second=["numeric","2-digit"][t-1];break;case"S":case"A":throw RangeError("`S/A` (second) patterns are not supported, use `s` instead");case"z":b.timeZoneName=t<4?"short":"long";break;case"Z":case"O":case"v":case"V":case"X":case"x":throw RangeError("`Z/O/v/V/X/x` (timeZone) patterns are not supported, use `z` instead")}return""}),b):{}};return{val:{type:"date"===o?u.date:u.time,value:n,location:g,style:f},err:null}}return{val:{type:"number"===o?u.number:"date"===o?u.date:u.time,value:n,location:g,style:null!==(s=null==h?void 0:h.style)&&void 0!==s?s:null},err:null};case"plural":case"selectordinal":case"select":var T=this.clonePosition();if(this.bumpSpace(),!this.bumpIf(","))return this.error(l.EXPECT_SELECT_ARGUMENT_OPTIONS,V(T,y({},T)));this.bumpSpace();var x=this.parseIdentifierIfPossible(),w=0;if("select"!==o&&"offset"===x.value){if(!this.bumpIf(":"))return this.error(l.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,V(this.clonePosition(),this.clonePosition()));this.bumpSpace();var d=this.tryParseDecimalInteger(l.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE,l.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);if(d.err)return d;this.bumpSpace(),x=this.parseIdentifierIfPossible(),w=d.val}var S=this.tryParsePluralOrSelectOptions(e,o,t,x);if(S.err)return S;var m=this.tryParseArgumentClose(r);if(m.err)return m;var E=V(r,this.clonePosition());if("select"===o)return{val:{type:u.select,value:n,options:Q(S.val),location:E},err:null};return{val:{type:u.plural,value:n,options:Q(S.val),offset:w,pluralType:"plural"===o?"cardinal":"ordinal",location:E},err:null};default:return this.error(l.INVALID_ARGUMENT_TYPE,V(i,a))}},e.prototype.tryParseArgumentClose=function(e){return this.isEOF()||125!==this.char()?this.error(l.EXPECT_ARGUMENT_CLOSING_BRACE,V(e,this.clonePosition())):(this.bump(),{val:!0,err:null})},e.prototype.parseSimpleArgStyleIfPossible=function(){for(var e=0,t=this.clonePosition();!this.isEOF();)switch(this.char()){case 39:this.bump();var n=this.clonePosition();if(!this.bumpUntil("'"))return this.error(l.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE,V(n,this.clonePosition()));this.bump();break;case 123:e+=1,this.bump();break;case 125:if(!(e>0))return{val:this.message.slice(t.offset,this.offset()),err:null};e-=1;break;default:this.bump()}return{val:this.message.slice(t.offset,this.offset()),err:null}},e.prototype.parseNumberSkeletonFromString=function(e,t){var n=[];try{n=function(e){if(0===e.length)throw Error("Number skeleton cannot be empty");for(var t=e.split(P).filter(function(e){return e.length>0}),n=[],r=0;r1)throw RangeError("integer-width stems only accept a single optional option");r.options[0].replace(L,function(e,n,r,s,i,o){if(n)t.minimumIntegerDigits=r.length;else if(s&&i)throw Error("We currently do not support maximum integer digits");else if(o)throw Error("We currently do not support exact integer digits");return""});continue}if(O.test(r.stem)){t.minimumIntegerDigits=r.stem.length;continue}if(N.test(r.stem)){if(r.options.length>1)throw RangeError("Fraction-precision stems only accept a single optional option");r.stem.replace(N,function(e,n,r,s,i,o){return"*"===r?t.minimumFractionDigits=n.length:s&&"#"===s[0]?t.maximumFractionDigits=s.length:i&&o?(t.minimumFractionDigits=i.length,t.maximumFractionDigits=i.length+o.length):(t.minimumFractionDigits=n.length,t.maximumFractionDigits=n.length),""});var s=r.options[0];"w"===s?t=y(y({},t),{trailingZeroDisplay:"stripIfInteger"}):s&&(t=y(y({},t),M(s)));continue}if(R.test(r.stem)){t=y(y({},t),M(r.stem));continue}var i=F(r.stem);i&&(t=y(y({},t),i));var o=function(e){var t;if("E"===e[0]&&"E"===e[1]?(t={notation:"engineering"},e=e.slice(2)):"E"===e[0]&&(t={notation:"scientific"},e=e.slice(1)),t){var n=e.slice(0,2);if("+!"===n?(t.signDisplay="always",e=e.slice(2)):"+?"===n&&(t.signDisplay="exceptZero",e=e.slice(2)),!O.test(e))throw Error("Malformed concise eng/scientific notation");t.minimumIntegerDigits=e.length}return t}(r.stem);o&&(t=y(y({},t),o))}return t}(n):{}},err:null}},e.prototype.tryParsePluralOrSelectOptions=function(e,t,n,r){for(var s,i=!1,o=[],a=new Set,u=r.value,c=r.location;;){if(0===u.length){var h=this.clonePosition();if("select"!==t&&this.bumpIf("=")){var p=this.tryParseDecimalInteger(l.EXPECT_PLURAL_ARGUMENT_SELECTOR,l.INVALID_PLURAL_ARGUMENT_SELECTOR);if(p.err)return p;c=V(h,this.clonePosition()),u=this.message.slice(h.offset,this.offset())}else break}if(a.has(u))return this.error("select"===t?l.DUPLICATE_SELECT_ARGUMENT_SELECTOR:l.DUPLICATE_PLURAL_ARGUMENT_SELECTOR,c);"other"===u&&(i=!0),this.bumpSpace();var d=this.clonePosition();if(!this.bumpIf("{"))return this.error("select"===t?l.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT:l.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT,V(this.clonePosition(),this.clonePosition()));var f=this.parseMessage(e+1,t,n);if(f.err)return f;var m=this.tryParseArgumentClose(d);if(m.err)return m;o.push([u,{value:f.val,location:V(d,this.clonePosition())}]),a.add(u),this.bumpSpace(),u=(s=this.parseIdentifierIfPossible()).value,c=s.location}return 0===o.length?this.error("select"===t?l.EXPECT_SELECT_ARGUMENT_SELECTOR:l.EXPECT_PLURAL_ARGUMENT_SELECTOR,V(this.clonePosition(),this.clonePosition())):this.requiresOtherClause&&!i?this.error(l.MISSING_OTHER_CLAUSE,V(this.clonePosition(),this.clonePosition())):{val:o,err:null}},e.prototype.tryParseDecimalInteger=function(e,t){var n=1,r=this.clonePosition();this.bumpIf("+")||this.bumpIf("-")&&(n=-1);for(var s=!1,i=0;!this.isEOF();){var o=this.char();if(o>=48&&o<=57)s=!0,i=10*i+(o-48),this.bump();else break}var a=V(r,this.clonePosition());return s?Z(i*=n)?{val:i,err:null}:this.error(t,a):this.error(e,a)},e.prototype.offset=function(){return this.position.offset},e.prototype.isEOF=function(){return this.offset()===this.message.length},e.prototype.clonePosition=function(){return{offset:this.position.offset,line:this.position.line,column:this.position.column}},e.prototype.char=function(){var e=this.position.offset;if(e>=this.message.length)throw Error("out of bound");var t=ee(this.message,e);if(void 0===t)throw Error("Offset ".concat(e," is at invalid UTF-16 code unit boundary"));return t},e.prototype.error=function(e,t){return{val:null,err:{kind:e,message:this.message,location:t}}},e.prototype.bump=function(){if(!this.isEOF()){var e=this.char();10===e?(this.position.line+=1,this.position.column=1,this.position.offset+=1):(this.position.column+=1,this.position.offset+=e<65536?1:2)}},e.prototype.bumpIf=function(e){if(Y(this.message,e,this.offset())){for(var t=0;t=0?(this.bumpTo(n),!0):(this.bumpTo(this.message.length),!1)},e.prototype.bumpTo=function(e){if(this.offset()>e)throw Error("targetOffset ".concat(e," must be greater than or equal to the current offset ").concat(this.offset()));for(e=Math.min(e,this.message.length);;){var t=this.offset();if(t===e)break;if(t>e)throw Error("targetOffset ".concat(e," is at invalid UTF-16 code unit boundary"));if(this.bump(),this.isEOF())break}},e.prototype.bumpSpace=function(){for(;!this.isEOF()&&ea(this.char());)this.bump()},e.prototype.peek=function(){if(this.isEOF())return null;var e=this.char(),t=this.offset(),n=this.message.charCodeAt(t+(e>=65536?2:1));return null!=n?n:null},e}();function eo(e){return e>=97&&e<=122||e>=65&&e<=90}function ea(e){return e>=9&&e<=13||32===e||133===e||e>=8206&&e<=8207||8232===e||8233===e}function el(e,t){void 0===t&&(t={});var n=new ei(e,t=y({shouldParseSkeletons:!0,requiresOtherClause:!0},t)).parse();if(n.err){var r=SyntaxError(l[n.err.kind]);throw r.location=n.err.location,r.originalMessage=n.err.message,r}return(null==t?void 0:t.captureLocation)||function e(t){t.forEach(function(t){if(delete t.location,w(t)||S(t))for(var n in t.options)delete t.options[n].location,e(t.options[n].value);else v(t)&&_(t.style)?delete t.style.location:(T(t)||x(t))&&C(t.style)?delete t.style.location:E(t)&&e(t.children)})}(n.val),n.val}function eu(e,t){var n=t&&t.cache?t.cache:ef,r=t&&t.serializer?t.serializer:ep;return(t&&t.strategy?t.strategy:function(e,t){var n,r,s=1===e.length?ec:eh;return n=t.cache.create(),r=t.serializer,s.bind(this,e,n,r)})(e,{cache:n,serializer:r})}function ec(e,t,n,r){var s=null==r||"number"==typeof r||"boolean"==typeof r?r:n(r),i=t.get(s);return void 0===i&&(i=e.call(this,r),t.set(s,i)),i}function eh(e,t,n){var r=Array.prototype.slice.call(arguments,3),s=n(r),i=t.get(s);return void 0===i&&(i=e.apply(this,r),t.set(s,i)),i}var ep=function(){return JSON.stringify(arguments)};function ed(){this.cache=Object.create(null)}ed.prototype.get=function(e){return this.cache[e]},ed.prototype.set=function(e,t){this.cache[e]=t};var ef={create:function(){return new ed}},em={variadic:function(e,t){var n,r;return n=t.cache.create(),r=t.serializer,eh.bind(this,e,n,r)}};(o=d||(d={})).MISSING_VALUE="MISSING_VALUE",o.INVALID_VALUE="INVALID_VALUE",o.MISSING_INTL_API="MISSING_INTL_API";var eg=function(e){function t(t,n,r){var s=e.call(this,t)||this;return s.code=n,s.originalMessage=r,s}return g(t,e),t.prototype.toString=function(){return"[formatjs Error: ".concat(this.code,"] ").concat(this.message)},t}(Error),ey=function(e){function t(t,n,r,s){return e.call(this,'Invalid values for "'.concat(t,'": "').concat(n,'". Options are "').concat(Object.keys(r).join('", "'),'"'),d.INVALID_VALUE,s)||this}return g(t,e),t}(eg),eb=function(e){function t(t,n,r){return e.call(this,'Value for "'.concat(t,'" must be of type ').concat(n),d.INVALID_VALUE,r)||this}return g(t,e),t}(eg),ek=function(e){function t(t,n){return e.call(this,'The intl string context variable "'.concat(t,'" was not provided to the string "').concat(n,'"'),d.MISSING_VALUE,n)||this}return g(t,e),t}(eg);function ev(e){return{create:function(){return{get:function(t){return e[t]},set:function(t,n){e[t]=n}}}}}(a=f||(f={}))[a.literal=0]="literal",a[a.object=1]="object";var eT=function(){function e(t,n,r,s){var i,o,a=this;if(void 0===n&&(n=e.defaultLocale),this.formatterCache={number:{},dateTime:{},pluralRules:{}},this.format=function(e){var t=a.formatToParts(e);if(1===t.length)return t[0].value;var n=t.reduce(function(e,t){return e.length&&t.type===f.literal&&"string"==typeof e[e.length-1]?e[e.length-1]+=t.value:e.push(t.value),e},[]);return n.length<=1?n[0]||"":n},this.formatToParts=function(e){return function e(t,n,r,s,i,o,a){if(1===t.length&&k(t[0]))return[{type:f.literal,value:t[0].value}];for(var l=[],c=0;ct.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var s=0,r=Object.getOwnPropertySymbols(e);st.indexOf(r[s])&&Object.prototype.propertyIsEnumerable.call(e,r[s])&&(n[r[s]]=e[r[s]]);return n}(l,["formatters"]));this.ast=e.__parse(t,y(y({},c),{locale:this.resolvedLocale}))}else this.ast=t;if(!Array.isArray(this.ast))throw TypeError("A message must be provided as a String or AST.");this.formats=(i=e.formats,r?Object.keys(i).reduce(function(e,t){var n,s;return e[t]=(n=i[t],(s=r[t])?y(y(y({},n||{}),s||{}),Object.keys(n).reduce(function(e,t){return e[t]=y(y({},n[t]),s[t]||{}),e},{})):n),e},y({},i)):i),this.formatters=s&&s.formatters||(void 0===(o=this.formatterCache)&&(o={number:{},dateTime:{},pluralRules:{}}),{getNumberFormat:eu(function(){for(var e,t=[],n=0;n0?t[0]:"string"==typeof e?e:e[0])}},e.__parse=el,e.formats={number:{integer:{maximumFractionDigits:0},currency:{style:"currency"},percent:{style:"percent"}},date:{short:{month:"numeric",day:"numeric",year:"2-digit"},medium:{month:"short",day:"numeric",year:"numeric"},long:{month:"long",day:"numeric",year:"numeric"},full:{weekday:"long",month:"long",day:"numeric",year:"numeric"}},time:{short:{hour:"numeric",minute:"numeric"},medium:{hour:"numeric",minute:"numeric",second:"numeric"},long:{hour:"numeric",minute:"numeric",second:"numeric",timeZoneName:"short"},full:{hour:"numeric",minute:"numeric",second:"numeric",timeZoneName:"short"}}},e}();class ex{getStringForLocale(e,t){let n=this.messages[t];n||(n=function(e,t,n="en-US"){if(t[e])return t[e];let r=Intl.Locale?new Intl.Locale(e).language:e.split("-")[0];if(t[r])return t[r];for(let e in t)if(e.startsWith(r+"-"))return t[e];return t[n]}(t,this.messages,this.defaultLocale),this.messages[t]=n);let r=n[e];if(!r)throw Error(`Could not find intl message ${e} in ${t} locale`);return r}constructor(e,t="en-US"){this.messages={...e},this.defaultLocale=t}}class ew{format(e,t){let n,r=this.cache[e];if(!r){let t=this.messages.getStringForLocale(e,this.locale);if(!t)throw Error(`Could not find intl message ${e} in ${this.locale} locale`);r=new eT(t,this.locale),this.cache[e]=r}return t&&(n=Object.keys(t).reduce((e,n)=>(e[n]=null!=t[n]&&t[n],e),{})),r.format(n)}constructor(e,t){this.locale=e,this.messages=t,this.cache={}}}var eS=n(20934),eE=n(885223);let e_=new WeakMap;function eC(e){let{locale:t}=(0,eE.bU)(),n=(0,eS.useMemo)(()=>{let t;return(t=e_.get(e))||(t=new ex(e),e_.set(e,t)),t},[e]),r=(0,eS.useMemo)(()=>new ew(t,n),[t,n]);return(0,eS.useCallback)((e,t)=>r.format(e,t),[r])}},28301:function(e,t,n){"use strict";n.d(t,{b7:function(){return i}});var r=n(20934),s=n(59872);function i(e){let t={state:{},onStateChange:()=>{},renderFallbackValue:null,...e},[n]=r.useState(()=>({current:(0,s.W_)(t)})),[i,o]=r.useState(()=>n.current.initialState);return n.current.setOptions(t=>({...t,...e,state:{...i,...e.state},onStateChange:t=>{o(t),null==e.onStateChange||e.onStateChange(t)}})),n.current}},833047:function(e,t,n){"use strict";n.d(t,{Z:function(){return S}});var r=n(235955);function s(e,t){for(var n,r=0;re.length)&&(t=e.length);for(var n=0,r=Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function c(e,t){return void 0===t&&(t={}),new r.TokenType("name",t)}var h=new WeakMap,p=RegExp("(?=("+RegExp("(?:[^\\S\\n\\r\\u2028\\u2029]|\\/\\/.*|\\/\\*.*?\\*\\/)*","y").source+"))\\1"+/(?=[\n\r\u2028\u2029]|\/\*(?!.*?\*\/)|$)/.source,"y"),d=function(){this.shorthandAssign=void 0,this.trailingComma=void 0,this.parenthesizedAssign=void 0,this.parenthesizedBind=void 0,this.doubleProto=void 0,this.shorthandAssign=this.trailingComma=this.parenthesizedAssign=this.parenthesizedBind=this.doubleProto=-1};function f(e,t){var n=e.key;return!e.computed&&("Identifier"===n.type&&n.name===t||"Literal"===n.type&&n.value===t)}var m={AbstractMethodHasImplementation:function(e){return"Method '"+e.methodName+"' cannot have an implementation because it is marked abstract."},AbstractPropertyHasInitializer:function(e){return"Property '"+e.propertyName+"' cannot have an initializer because it is marked abstract."},AccesorCannotDeclareThisParameter:"'get' and 'set' accessors cannot declare 'this' parameters.",AccesorCannotHaveTypeParameters:"An accessor cannot have type parameters.",CannotFindName:function(e){return"Cannot find name '"+e.name+"'."},ClassMethodHasDeclare:"Class methods cannot have the 'declare' modifier.",ClassMethodHasReadonly:"Class methods cannot have the 'readonly' modifier.",ConstInitiailizerMustBeStringOrNumericLiteralOrLiteralEnumReference:"A 'const' initializer in an ambient context must be a string or numeric literal or literal enum reference.",ConstructorHasTypeParameters:"Type parameters cannot appear on a constructor declaration.",DeclareAccessor:function(e){return"'declare' is not allowed in "+e.kind+"ters."},DeclareClassFieldHasInitializer:"Initializers are not allowed in ambient contexts.",DeclareFunctionHasImplementation:"An implementation cannot be declared in ambient contexts.",DuplicateAccessibilityModifier:function(){return"Accessibility modifier already seen."},DuplicateModifier:function(e){return"Duplicate modifier: '"+e.modifier+"'."},EmptyHeritageClauseType:function(e){return"'"+e.token+"' list cannot be empty."},EmptyTypeArguments:"Type argument list cannot be empty.",EmptyTypeParameters:"Type parameter list cannot be empty.",ExpectedAmbientAfterExportDeclare:"'export declare' must be followed by an ambient declaration.",ImportAliasHasImportType:"An import alias can not use 'import type'.",IncompatibleModifiers:function(e){var t=e.modifiers;return"'"+t[0]+"' modifier cannot be used with '"+t[1]+"' modifier."},IndexSignatureHasAbstract:"Index signatures cannot have the 'abstract' modifier.",IndexSignatureHasAccessibility:function(e){return"Index signatures cannot have an accessibility modifier ('"+e.modifier+"')."},IndexSignatureHasDeclare:"Index signatures cannot have the 'declare' modifier.",IndexSignatureHasOverride:"'override' modifier cannot appear on an index signature.",IndexSignatureHasStatic:"Index signatures cannot have the 'static' modifier.",InitializerNotAllowedInAmbientContext:"Initializers are not allowed in ambient contexts.",InvalidModifierOnTypeMember:function(e){return"'"+e.modifier+"' modifier cannot appear on a type member."},InvalidModifierOnTypeParameter:function(e){return"'"+e.modifier+"' modifier cannot appear on a type parameter."},InvalidModifierOnTypeParameterPositions:function(e){return"'"+e.modifier+"' modifier can only appear on a type parameter of a class, interface or type alias."},InvalidModifiersOrder:function(e){var t=e.orderedModifiers;return"'"+t[0]+"' modifier must precede '"+t[1]+"' modifier."},InvalidPropertyAccessAfterInstantiationExpression:"Invalid property access after an instantiation expression. You can either wrap the instantiation expression in parentheses, or delete the type arguments.",InvalidTupleMemberLabel:"Tuple members must be labeled with a simple identifier.",MissingInterfaceName:"'interface' declarations must be followed by an identifier.",MixedLabeledAndUnlabeledElements:"Tuple members must all have names or all not have names.",NonAbstractClassHasAbstractMethod:"Abstract methods can only appear within an abstract class.",NonClassMethodPropertyHasAbstractModifer:"'abstract' modifier can only appear on a class, method, or property declaration.",OptionalTypeBeforeRequired:"A required element cannot follow an optional element.",OverrideNotInSubClass:"This member cannot have an 'override' modifier because its containing class does not extend another class.",PatternIsOptional:"A binding pattern parameter cannot be optional in an implementation signature.",PrivateElementHasAbstract:"Private elements cannot have the 'abstract' modifier.",PrivateElementHasAccessibility:function(e){return"Private elements cannot have an accessibility modifier ('"+e.modifier+"')."},PrivateMethodsHasAccessibility:function(e){return"Private methods cannot have an accessibility modifier ('"+e.modifier+"')."},ReadonlyForMethodSignature:"'readonly' modifier can only appear on a property declaration or index signature.",ReservedArrowTypeParam:"This syntax is reserved in files with the .mts or .cts extension. Add a trailing comma, as in `() => ...`.",ReservedTypeAssertion:"This syntax is reserved in files with the .mts or .cts extension. Use an `as` expression instead.",SetAccesorCannotHaveOptionalParameter:"A 'set' accessor cannot have an optional parameter.",SetAccesorCannotHaveRestParameter:"A 'set' accessor cannot have rest parameter.",SetAccesorCannotHaveReturnType:"A 'set' accessor cannot have a return type annotation.",SingleTypeParameterWithoutTrailingComma:function(e){var t=e.typeParameterName;return"Single type parameter "+t+" should have a trailing comma. Example usage: <"+t+",>."},StaticBlockCannotHaveModifier:"Static class blocks cannot have any modifier.",TypeAnnotationAfterAssign:"Type annotations must come before default assignments, e.g. instead of `age = 25: number` use `age: number = 25`.",TypeImportCannotSpecifyDefaultAndNamed:"A type-only import can specify a default import or named bindings, but not both.",TypeModifierIsUsedInTypeExports:"The 'type' modifier cannot be used on a named export when 'export type' is used on its export statement.",TypeModifierIsUsedInTypeImports:"The 'type' modifier cannot be used on a named import when 'import type' is used on its import statement.",UnexpectedParameterModifier:"A parameter property is only allowed in a constructor implementation.",UnexpectedReadonly:"'readonly' type modifier is only permitted on array and tuple literal types.",GenericsEndWithComma:"Trailing comma is not allowed at the end of generics.",UnexpectedTypeAnnotation:"Did not expect a type annotation here.",UnexpectedTypeCastInParameter:"Unexpected type cast in parameter position.",UnsupportedImportTypeArgument:"Argument in a type import must be a string literal.",UnsupportedParameterPropertyKind:"A parameter property may not be declared using a binding pattern.",UnsupportedSignatureParameterKind:function(e){return"Name in a signature must be an Identifier, ObjectPattern or ArrayPattern, instead got "+e.type+"."},LetInLexicalBinding:"'let' is not allowed to be used as a name in 'let' or 'const' declarations."},g={quot:'"',amp:"&",apos:"'",lt:"<",gt:">",nbsp:"\xa0",iexcl:"\xa1",cent:"\xa2",pound:"\xa3",curren:"\xa4",yen:"\xa5",brvbar:"\xa6",sect:"\xa7",uml:"\xa8",copy:"\xa9",ordf:"\xaa",laquo:"\xab",not:"\xac",shy:"\xad",reg:"\xae",macr:"\xaf",deg:"\xb0",plusmn:"\xb1",sup2:"\xb2",sup3:"\xb3",acute:"\xb4",micro:"\xb5",para:"\xb6",middot:"\xb7",cedil:"\xb8",sup1:"\xb9",ordm:"\xba",raquo:"\xbb",frac14:"\xbc",frac12:"\xbd",frac34:"\xbe",iquest:"\xbf",Agrave:"\xc0",Aacute:"\xc1",Acirc:"\xc2",Atilde:"\xc3",Auml:"\xc4",Aring:"\xc5",AElig:"\xc6",Ccedil:"\xc7",Egrave:"\xc8",Eacute:"\xc9",Ecirc:"\xca",Euml:"\xcb",Igrave:"\xcc",Iacute:"\xcd",Icirc:"\xce",Iuml:"\xcf",ETH:"\xd0",Ntilde:"\xd1",Ograve:"\xd2",Oacute:"\xd3",Ocirc:"\xd4",Otilde:"\xd5",Ouml:"\xd6",times:"\xd7",Oslash:"\xd8",Ugrave:"\xd9",Uacute:"\xda",Ucirc:"\xdb",Uuml:"\xdc",Yacute:"\xdd",THORN:"\xde",szlig:"\xdf",agrave:"\xe0",aacute:"\xe1",acirc:"\xe2",atilde:"\xe3",auml:"\xe4",aring:"\xe5",aelig:"\xe6",ccedil:"\xe7",egrave:"\xe8",eacute:"\xe9",ecirc:"\xea",euml:"\xeb",igrave:"\xec",iacute:"\xed",icirc:"\xee",iuml:"\xef",eth:"\xf0",ntilde:"\xf1",ograve:"\xf2",oacute:"\xf3",ocirc:"\xf4",otilde:"\xf5",ouml:"\xf6",divide:"\xf7",oslash:"\xf8",ugrave:"\xf9",uacute:"\xfa",ucirc:"\xfb",uuml:"\xfc",yacute:"\xfd",thorn:"\xfe",yuml:"\xff",OElig:"Œ",oelig:"œ",Scaron:"Š",scaron:"š",Yuml:"Ÿ",fnof:"ƒ",circ:"ˆ",tilde:"˜",Alpha:"Α",Beta:"Β",Gamma:"Γ",Delta:"Δ",Epsilon:"Ε",Zeta:"Ζ",Eta:"Η",Theta:"Θ",Iota:"Ι",Kappa:"Κ",Lambda:"Λ",Mu:"Μ",Nu:"Ν",Xi:"Ξ",Omicron:"Ο",Pi:"Π",Rho:"Ρ",Sigma:"Σ",Tau:"Τ",Upsilon:"Υ",Phi:"Φ",Chi:"Χ",Psi:"Ψ",Omega:"Ω",alpha:"α",beta:"β",gamma:"γ",delta:"δ",epsilon:"ε",zeta:"ζ",eta:"η",theta:"θ",iota:"ι",kappa:"κ",lambda:"λ",mu:"μ",nu:"ν",xi:"ξ",omicron:"ο",pi:"π",rho:"ρ",sigmaf:"ς",sigma:"σ",tau:"τ",upsilon:"υ",phi:"φ",chi:"χ",psi:"ψ",omega:"ω",thetasym:"ϑ",upsih:"ϒ",piv:"ϖ",ensp:" ",emsp:" ",thinsp:" ",zwnj:"",zwj:"",lrm:"",rlm:"",ndash:"–",mdash:"—",lsquo:"‘",rsquo:"’",sbquo:"‚",ldquo:"“",rdquo:"”",bdquo:"„",dagger:"†",Dagger:"‡",bull:"•",hellip:"…",permil:"‰",prime:"′",Prime:"″",lsaquo:"‹",rsaquo:"›",oline:"‾",frasl:"⁄",euro:"€",image:"ℑ",weierp:"℘",real:"ℜ",trade:"™",alefsym:"ℵ",larr:"←",uarr:"↑",rarr:"→",darr:"↓",harr:"↔",crarr:"↵",lArr:"⇐",uArr:"⇑",rArr:"⇒",dArr:"⇓",hArr:"⇔",forall:"∀",part:"∂",exist:"∃",empty:"∅",nabla:"∇",isin:"∈",notin:"∉",ni:"∋",prod:"∏",sum:"∑",minus:"−",lowast:"∗",radic:"√",prop:"∝",infin:"∞",ang:"∠",and:"∧",or:"∨",cap:"∩",cup:"∪",int:"∫",there4:"∴",sim:"∼",cong:"≅",asymp:"≈",ne:"≠",equiv:"≡",le:"≤",ge:"≥",sub:"⊂",sup:"⊃",nsub:"⊄",sube:"⊆",supe:"⊇",oplus:"⊕",otimes:"⊗",perp:"⊥",sdot:"⋅",lceil:"⌈",rceil:"⌉",lfloor:"⌊",rfloor:"⌋",lang:"〈",rang:"〉",loz:"◊",spades:"♠",clubs:"♣",hearts:"♥",diams:"♦"},y=/^[\da-fA-F]+$/,b=/^\d+$/;function k(e){return e?"JSXIdentifier"===e.type?e.name:"JSXNamespacedName"===e.type?e.namespace.name+":"+e.name.name:"JSXMemberExpression"===e.type?k(e.object)+"."+k(e.property):void 0:e}var v=/(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g;function T(e){if(!e)throw Error("Assert fail")}function x(e,t){return 2|(e?4:0)|(t?8:0)}function w(e){return"private"===e||"public"===e||"protected"===e}function S(e){var t=e||{},n=t.dts,a=void 0!==n&&n,l=t.allowSatisfies,S=void 0!==l&&l;return function(t){var n,l,E,_,C,A,I,P,N,R,L,O,M,F=t.acorn||r,D=function(e){var t=h.get(e.Parser.acorn||e);if(!t){var n={assert:c(0,{startsExpr:!0}),asserts:c(0,{startsExpr:!0}),global:c(0,{startsExpr:!0}),keyof:c(0,{startsExpr:!0}),readonly:c(0,{startsExpr:!0}),unique:c(0,{startsExpr:!0}),abstract:c(0,{startsExpr:!0}),declare:c(0,{startsExpr:!0}),enum:c(0,{startsExpr:!0}),module:c(0,{startsExpr:!0}),namespace:c(0,{startsExpr:!0}),interface:c(0,{startsExpr:!0}),type:c(0,{startsExpr:!0})},s={at:new r.TokenType("@"),jsxName:new r.TokenType("jsxName"),jsxText:new r.TokenType("jsxText",{beforeExpr:!0}),jsxTagStart:new r.TokenType("jsxTagStart",{startsExpr:!0}),jsxTagEnd:new r.TokenType("jsxTagEnd")},o={tc_oTag:new r.TokContext("...",!0,!0)},a=RegExp("^(?:"+Object.keys(n).join("|")+")$");s.jsxTagStart.updateContext=function(){this.context.push(o.tc_expr),this.context.push(o.tc_oTag),this.exprAllowed=!1},s.jsxTagEnd.updateContext=function(e){var t=this.context.pop();t===o.tc_oTag&&e===r.tokTypes.slash||t===o.tc_cTag?(this.context.pop(),this.exprAllowed=this.curContext()===o.tc_expr):this.exprAllowed=!0},t={tokTypes:i({},n,s),tokContexts:i({},o),keywordsRegExp:a,tokenIsLiteralPropertyName:function(e){return[r.tokTypes.name,r.tokTypes.string,r.tokTypes.num].concat(Object.values(r.keywordTypes),Object.values(n)).includes(e)},tokenIsKeywordOrIdentifier:function(e){return[r.tokTypes.name].concat(Object.values(r.keywordTypes),Object.values(n)).includes(e)},tokenIsIdentifier:function(e){return[].concat(Object.values(n),[r.tokTypes.name]).includes(e)},tokenIsTSDeclarationStart:function(e){return[n.abstract,n.declare,n.enum,n.module,n.namespace,n.interface,n.type].includes(e)},tokenIsTSTypeOperator:function(e){return[n.keyof,n.readonly,n.unique].includes(e)},tokenIsTemplate:function(e){return e===r.tokTypes.invalidTemplate}}}return t}(F),B=F.tokTypes,j=F.keywordTypes,H=F.isIdentifierStart,V=F.lineBreak,$=F.isNewLine,U=F.tokContexts,q=F.isIdentifierChar,G=D.tokTypes,z=D.tokContexts,W=D.keywordsRegExp,Z=D.tokenIsLiteralPropertyName,K=D.tokenIsTemplate,X=D.tokenIsTSDeclarationStart,Y=D.tokenIsIdentifier,J=D.tokenIsKeywordOrIdentifier,Q=D.tokenIsTSTypeOperator;return n=t,l=F.tokTypes,E=D.tokTypes,_=t=function(e){function t(){return e.apply(this,arguments)||this}o(t,e);var n=t.prototype;return n.takeDecorators=function(e){var t=this.decoratorStack[this.decoratorStack.length-1];t.length&&(e.decorators=t,this.resetStartLocationFromNode(e,t[0]),this.decoratorStack[this.decoratorStack.length-1]=[])},n.parseDecorators=function(e){for(var t=this.decoratorStack[this.decoratorStack.length-1];this.match(E.at);){var n=this.parseDecorator();t.push(n)}this.match(l._export)?e||this.unexpected():this.canHaveLeadingDecorator()||this.raise(this.start,"Leading decorators must be attached to a class declaration.")},n.parseDecorator=function(){var e=this.startNode();this.next(),this.decoratorStack.push([]);var t,n=this.start,r=this.startLoc;if(this.match(l.parenL)){var s=this.start,i=this.startLoc;if(this.next(),t=this.parseExpression(),this.expect(l.parenR),this.options.preserveParens){var o=this.startNodeAt(s,i);o.expression=t,t=this.finishNode(o,"ParenthesizedExpression")}}else for(t=this.parseIdent(!1);this.eat(l.dot);){var a=this.startNodeAt(n,r);a.object=t,a.property=this.parseIdent(!0),a.computed=!1,t=this.finishNode(a,"MemberExpression")}return e.expression=this.parseMaybeDecoratorArguments(t),this.decoratorStack.pop(),this.finishNode(e,"Decorator")},n.parseMaybeDecoratorArguments=function(e){if(this.eat(l.parenL)){var t=this.startNodeAtNode(e);return t.callee=e,t.arguments=this.parseExprList(l.parenR,!1),this.finishNode(t,"CallExpression")}return e},t}(n),C=null==e?void 0:e.jsx,A=F.tokTypes,I=D.tokTypes,P=F.isNewLine,N=F.isIdentifierChar,R=Object.assign({allowNamespaces:!0,allowNamespacedObjects:!0},C||{}),L=t=function(e){function t(){return e.apply(this,arguments)||this}o(t,e);var n=t.prototype;return n.jsx_readToken=function(){for(var e="",t=this.pos;;){this.pos>=this.input.length&&this.raise(this.start,"Unterminated JSX contents");var n=this.input.charCodeAt(this.pos);switch(n){case 60:case 123:return this.pos===this.start?60===n&&this.exprAllowed?(++this.pos,this.finishToken(I.jsxTagStart)):this.getTokenFromCode(n):(e+=this.input.slice(t,this.pos),this.finishToken(I.jsxText,e));case 38:e+=this.input.slice(t,this.pos)+this.jsx_readEntity(),t=this.pos;break;case 62:case 125:this.raise(this.pos,"Unexpected token `"+this.input[this.pos]+"`. Did you mean `"+(62===n?">":"}")+'` or `{"'+this.input[this.pos]+'"}`?');default:P(n)?(e+=this.input.slice(t,this.pos)+this.jsx_readNewLine(!0),t=this.pos):++this.pos}}},n.jsx_readNewLine=function(e){var t,n=this.input.charCodeAt(this.pos);return++this.pos,13===n&&10===this.input.charCodeAt(this.pos)?(++this.pos,t=e?"\n":"\r\n"):t=String.fromCharCode(n),this.options.locations&&(++this.curLine,this.lineStart=this.pos),t},n.jsx_readString=function(e){for(var t="",n=++this.pos;;){this.pos>=this.input.length&&this.raise(this.start,"Unterminated string constant");var r=this.input.charCodeAt(this.pos);if(r===e)break;38===r?(t+=this.input.slice(n,this.pos)+this.jsx_readEntity(),n=this.pos):P(r)?(t+=this.input.slice(n,this.pos)+this.jsx_readNewLine(!1),n=this.pos):++this.pos}return t+=this.input.slice(n,this.pos++),this.finishToken(A.string,t)},n.jsx_readEntity=function(){var e,t="",n=0,r=this.input[this.pos];"&"!==r&&this.raise(this.pos,"Entity must start with an ampersand");for(var s=++this.pos;this.pos")}var o=s.name?"Element":"Fragment";return n["opening"+o]=s,n["closing"+o]=i,n.children=r,this.type===A.relational&&"<"===this.value&&this.raise(this.start,"Adjacent JSX elements must be wrapped in an enclosing tag"),this.finishNode(n,"JSX"+o)},n.jsx_parseText=function(){var e=this.parseLiteral(this.value);return e.type="JSXText",e},n.jsx_parseElement=function(){var e=this.start,t=this.startLoc;return this.next(),this.jsx_parseElementAt(e,t)},t}(_),O=D.tokTypes,M=F.tokTypes,function(e){function t(t,n,r){var s;return(s=e.call(this,t,n,r)||this).preValue=null,s.preToken=null,s.isLookahead=!1,s.isAmbientContext=!1,s.inAbstractClass=!1,s.inType=!1,s.inDisallowConditionalTypesContext=!1,s.maybeInArrowParameters=!1,s.shouldParseArrowReturnType=void 0,s.shouldParseAsyncArrowReturnType=void 0,s.decoratorStack=[[]],s.importsStack=[[]],s.importOrExportOuterKind=void 0,s.tsParseConstModifier=s.tsParseModifiers.bind(function(e){if(void 0===e)throw ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(s),{allowedModifiers:["const"],disallowedModifiers:["in","out"],errorTemplate:m.InvalidModifierOnTypeParameterPositions}),s}o(t,e);var n,r,i=t.prototype;return i.getTokenFromCodeInType=function(t){return 62===t||60===t?this.finishOp(B.relational,1):e.prototype.getTokenFromCode.call(this,t)},i.readToken=function(t){if(!this.inType){var n=this.curContext();if(n===z.tc_expr)return this.jsx_readToken();if(n===z.tc_oTag||n===z.tc_cTag){if(H(t))return this.jsx_readWord();if(62==t)return++this.pos,this.finishToken(G.jsxTagEnd);if((34===t||39===t)&&n==z.tc_oTag)return this.jsx_readString(t)}if(60===t&&this.exprAllowed&&33!==this.input.charCodeAt(this.pos+1))return++this.pos,this.finishToken(G.jsxTagStart)}return e.prototype.readToken.call(this,t)},i.getTokenFromCode=function(t){return this.inType?this.getTokenFromCodeInType(t):64===t?(++this.pos,this.finishToken(G.at)):e.prototype.getTokenFromCode.call(this,t)},i.isAbstractClass=function(){return this.ts_isContextual(G.abstract)&&this.lookahead().type===B._class},i.finishNode=function(t,n){return""!==t.type&&0!==t.end?t:e.prototype.finishNode.call(this,t,n)},i.tryParse=function(e,t){void 0===t&&(t=this.cloneCurLookaheadState());var n={node:null};try{return{node:e(function(e){throw void 0===e&&(e=null),n.node=e,n}),error:null,thrown:!1,aborted:!1,failState:null}}catch(e){var r=this.getCurLookaheadState();if(this.setLookaheadState(t),e instanceof SyntaxError)return{node:null,error:e,thrown:!0,aborted:!1,failState:r};if(e===n)return{node:n.node,error:null,thrown:!1,aborted:!0,failState:r};throw e}},i.setOptionalParametersError=function(e,t){var n;e.optionalParametersLoc=null!=(n=null==t?void 0:t.loc)?n:this.startLoc},i.reScan_lt_gt=function(){this.type===B.relational&&(this.pos-=1,this.readToken_lt_gt(this.fullCharCodeAtPos()))},i.reScan_lt=function(){var e=this.type;return e===B.bitShift?(this.pos-=2,this.finishOp(B.relational,1),B.relational):e},i.resetEndLocation=function(e,t){void 0===t&&(t=this.lastTokEndLoc),e.end=t.column,e.loc.end=t,this.options.ranges&&(e.range[1]=t.column)},i.startNodeAtNode=function(t){return e.prototype.startNodeAt.call(this,t.start,t.loc.start)},i.nextTokenStart=function(){return this.nextTokenStartSince(this.pos)},i.tsHasSomeModifiers=function(e,t){return t.some(function(t){return w(t)?e.accessibility===t:!!e[t]})},i.tsIsStartOfStaticBlocks=function(){return this.isContextual("static")&&123===this.lookaheadCharCode()},i.tsCheckForInvalidTypeCasts=function(e){var t=this;e.forEach(function(e){"TSTypeCastExpression"===(null==e?void 0:e.type)&&t.raise(e.typeAnnotation.start,m.UnexpectedTypeAnnotation)})},i.atPossibleAsyncArrow=function(e){return"Identifier"===e.type&&"async"===e.name&&this.lastTokEndLoc.column===e.end&&!this.canInsertSemicolon()&&e.end-e.start==5&&e.start===this.potentialArrowAt},i.tsIsIdentifier=function(){return Y(this.type)},i.tsTryParseTypeOrTypePredicateAnnotation=function(){return this.match(B.colon)?this.tsParseTypeOrTypePredicateAnnotation(B.colon):void 0},i.tsTryParseGenericAsyncArrowFunction=function(t,n,r){var s=this;if(this.tsMatchLeftRelational()){var i=this.maybeInArrowParameters;this.maybeInArrowParameters=!0;var o=this.tsTryParseAndCatch(function(){var r=s.startNodeAt(t,n);return r.typeParameters=s.tsParseTypeParameters(),e.prototype.parseFunctionParams.call(s,r),r.returnType=s.tsTryParseTypeOrTypePredicateAnnotation(),s.expect(B.arrow),r});if(this.maybeInArrowParameters=i,o)return e.prototype.parseArrowExpression.call(this,o,null,!0,r)}},i.tsParseTypeArgumentsInExpression=function(){if(this.reScan_lt()===B.relational)return this.tsParseTypeArguments()},i.tsInNoContext=function(e){var t=this.context;this.context=[t[0]];try{return e()}finally{this.context=t}},i.tsTryParseTypeAnnotation=function(){return this.match(B.colon)?this.tsParseTypeAnnotation():void 0},i.isUnparsedContextual=function(e,t){var n=e+t.length;if(this.input.slice(e,n)===t){var r=this.input.charCodeAt(n);return!(q(r)||55296==(64512&r))}return!1},i.isAbstractConstructorSignature=function(){return this.ts_isContextual(G.abstract)&&this.lookahead().type===B._new},i.nextTokenStartSince=function(e){return v.lastIndex=e,v.test(this.input)?v.lastIndex:e},i.lookaheadCharCode=function(){return this.input.charCodeAt(this.nextTokenStart())},i.compareLookaheadState=function(e,t){for(var n=0,r=Object.keys(e);n-1;)++this.curLine,s=this.lineStart=r;this.isLookahead||this.options.onComment&&this.options.onComment(!0,this.input.slice(e+2,t),e,this.pos,n,this.curPosition())},i.skipLineComment=function(e){var t,n=this.pos;this.isLookahead||(t=this.options.onComment&&this.curPosition());for(var r=this.input.charCodeAt(this.pos+=e);this.pos
