@mittwald/flow-react-components 0.2.0-alpha.781 → 0.2.0-alpha.782

package/dist/js/packages/components/src/components/Text/{Text.module.scss.mjs → Text.module.mjs}

@@ -1,16 +1,12 @@
 "use client"
 /* */
-const text = "flow--text";
-const dark = "flow--text--dark";
-const light = "flow--text--light";
-const icon = "flow--text--icon";
-const styles = {
-	text: text,
-	dark: dark,
-	light: light,
+var Text_module_default = {
+	text: "flow--text",
+	dark: "flow--text--dark",
+	light: "flow--text--light",
 	"dark-static": "flow--text--dark-static",
 	"light-static": "flow--text--light-static",
-	icon: icon,
+	icon: "flow--text--icon",
 	"align-start": "flow--text--align-start",
 	"align-center": "flow--text--align-center",
 	"align-end": "flow--text--align-end",
@@ -18,6 +14,7 @@ const styles = {
 	"wrap-balance": "flow--text--wrap-balance",
 	"wrap-pretty": "flow--text--wrap-pretty"
 };
+//#endregion
+export { Text_module_default as default };
 
-export { dark, styles as default, icon, light, text };
-//# sourceMappingURL=Text.module.scss.mjs.map
+//# sourceMappingURL=Text.module.mjs.map

package/dist/js/packages/components/src/components/Text/Text.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  ul,\n  ol {\n    padding-left: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-left: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-left: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height--s);\n      height: var(--line-height--s);\n    }\n  }\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Text/index.mjs

@@ -0,0 +1 @@
+import "./Text.mjs";

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs

@@ -1,140 +1,108 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as Aria from 'react-aria-components';
-import styles from './TextArea.module.scss.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { useObjectRef } from '@react-aria/utils';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import clsx from 'clsx';
-import { useState, useEffect } from 'react';
-import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import locales from '../../../../../_virtual/_.locale.json@6922640321d6c379322b09cbcf0dcdb3.mjs';
-import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
-
-const TextArea = flowComponent("TextArea", (props) => {
-  const {
-    children,
-    placeholder,
-    rows = 5,
-    autoResizeMaxRows = rows,
-    ref,
-    allowVerticalResize,
-    allowHorizontalResize,
-    showCharacterCount,
-    className,
-    onChange,
-    ...rest
-  } = useControlledHostValueProps(props);
-  const [charactersCount, setCharactersCount] = useState(
-    props.defaultValue?.length ?? props.value?.length ?? 0
-  );
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldPropsContext,
-    fieldProps
-  } = useFieldComponent(props);
-  let { allowResize } = props;
-  if (allowVerticalResize) {
-    allowResize = "vertical";
-  } else if (allowHorizontalResize) {
-    allowResize = "horizontal";
-  }
-  const rootClassName = clsx(fieldProps.className, className);
-  const inputClassName = clsx(
-    styles.input,
-    typeof allowResize === "boolean" && allowResize ? styles.resize : null,
-    allowResize === "horizontal" ? styles.horizontalResize : allowResize === "vertical" ? styles.verticalResize : null
-  );
-  const handleChange = (v) => {
-    if (showCharacterCount) {
-      setCharactersCount(v.length);
-    }
-    if (onChange) {
-      onChange(v);
-    }
-  };
-  const translation = useLocalizedStringFormatter(locales);
-  const charactersCountDescription = translation.format("textArea.characters", {
-    count: charactersCount,
-    maxCount: props.maxLength ?? 0
-  });
-  const localRef = useObjectRef(ref);
-  const getHeight = (rows2) => {
-    return `calc(var(--line-height--m) * ${rows2} + (var(--form-control--padding-y) * 2))`;
-  };
-  const [resized, setResized] = useState(false);
-  const autoResizable = rows !== autoResizeMaxRows;
-  const verticallyResizable = allowResize && (!autoResizable || autoResizable && resized);
-  useEffect(() => {
-    const textarea = localRef.current;
-    if (!textarea) return;
-    const startHeight = textarea.offsetHeight;
-    let tracking = false;
-    const handleMouseDown = () => {
-      tracking = true;
-    };
-    const handleMouseMove = () => {
-      if (!tracking || resized) return;
-      const currentHeight = textarea.offsetHeight;
-      if (currentHeight !== startHeight) {
-        setResized(true);
-        tracking = false;
-      }
-    };
-    const handleMouseUp = () => {
-      tracking = false;
-    };
-    window.addEventListener("mousedown", handleMouseDown);
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousedown", handleMouseDown);
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [resized]);
-  const updateHeight = () => {
-    if (localRef.current && autoResizable && !verticallyResizable) {
-      localRef.current.style.height = "0px";
-      const scrollHeight = localRef.current.scrollHeight;
-      localRef.current.style.height = scrollHeight + 2 + "px";
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Aria.TextField,
-    {
-      ...rest,
-      ...fieldProps,
-      className: rootClassName,
-      onChange: handleChange,
-      children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
-        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
-        /* @__PURE__ */ jsx(
-          Aria.TextArea,
-          {
-            rows,
-            "aria-hidden": props["aria-hidden"],
-            placeholder,
-            className: inputClassName,
-            ref: localRef,
-            onChange: updateHeight,
-            style: {
-              minHeight: getHeight(rows),
-              maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
-            }
-          }
-        ),
-        showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] })
-    }
-  );
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import "../../lib/propsContext/index.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
+import FieldDescription from "../FieldDescription/FieldDescription.mjs";
+import "../FieldDescription/index.mjs";
+import TextArea_module_default from "./TextArea.module.mjs";
+import __locale_default from "../../../../../_virtual/_18.locale.mjs";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
+import * as Aria from "react-aria-components";
+import { useLocalizedStringFormatter } from "react-aria";
+//#region src/components/TextArea/TextArea.tsx
+/** @flr-generate all */
+var TextArea = flowComponent("TextArea", (props) => {
+	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, ...rest } = useControlledHostValueProps(props);
+	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props);
+	let { allowResize } = props;
+	if (allowVerticalResize) allowResize = "vertical";
+	else if (allowHorizontalResize) allowResize = "horizontal";
+	const rootClassName = clsx(fieldProps.className, className);
+	const inputClassName = clsx(TextArea_module_default.input, typeof allowResize === "boolean" && allowResize ? TextArea_module_default.resize : null, allowResize === "horizontal" ? TextArea_module_default.horizontalResize : allowResize === "vertical" ? TextArea_module_default.verticalResize : null);
+	const handleChange = (v) => {
+		if (showCharacterCount) setCharactersCount(v.length);
+		if (onChange) onChange(v);
+	};
+	const charactersCountDescription = useLocalizedStringFormatter(__locale_default).format("textArea.characters", {
+		count: charactersCount,
+		maxCount: props.maxLength ?? 0
+	});
+	const localRef = useObjectRef(ref);
+	const getHeight = (rows) => {
+		return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;
+	};
+	const [resized, setResized] = useState(false);
+	const autoResizable = rows !== autoResizeMaxRows;
+	const verticallyResizable = allowResize && (!autoResizable || autoResizable && resized);
+	useEffect(() => {
+		const textarea = localRef.current;
+		if (!textarea) return;
+		const startHeight = textarea.offsetHeight;
+		let tracking = false;
+		const handleMouseDown = () => {
+			tracking = true;
+		};
+		const handleMouseMove = () => {
+			if (!tracking || resized) return;
+			if (textarea.offsetHeight !== startHeight) {
+				setResized(true);
+				tracking = false;
+			}
+		};
+		const handleMouseUp = () => {
+			tracking = false;
+		};
+		window.addEventListener("mousedown", handleMouseDown);
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			window.removeEventListener("mousedown", handleMouseDown);
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [resized]);
+	const updateHeight = () => {
+		if (localRef.current && autoResizable && !verticallyResizable) {
+			localRef.current.style.height = "0px";
+			const scrollHeight = localRef.current.scrollHeight;
+			localRef.current.style.height = scrollHeight + 2 + "px";
+		}
+	};
+	return /* @__PURE__ */ jsx(Aria.TextField, {
+		...rest,
+		...fieldProps,
+		className: rootClassName,
+		onChange: handleChange,
+		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: fieldPropsContext,
+			children: [
+				/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
+				/* @__PURE__ */ jsx(Aria.TextArea, {
+					rows,
+					"aria-hidden": props["aria-hidden"],
+					placeholder,
+					className: inputClassName,
+					ref: localRef,
+					onChange: updateHeight,
+					style: {
+						minHeight: getHeight(rows),
+						maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
+					}
+				}),
+				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
+				/* @__PURE__ */ jsx(FieldErrorView, {})
+			]
+		})
+	});
 });
+//#endregion
+export { TextArea as default };
 
-export { TextArea };
-//# sourceMappingURL=TextArea.mjs.map
+//# sourceMappingURL=TextArea.mjs.map

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\"textArea.characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          onChange={updateHeight}\n          style={{\n            minHeight: getHeight(rows),\n            maxHeight: verticallyResizable\n              ? undefined\n              : getHeight(autoResizeMaxRows),\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":"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"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\"textArea.characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          onChange={updateHeight}\n          style={{\n            minHeight: getHeight(rows),\n            maxHeight: verticallyResizable\n              ? undefined\n              : getHeight(autoResizeMaxRows),\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,GAAG,SACD,4BAA4B,MAAM;CAEtC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,EACtD;CAED,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,MAAM;CAE5B,IAAI,EAAE,gBAAgB;AACtB,KAAI,oBACF,eAAc;UACL,sBACT,eAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,UAAU;CAE3D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,KACP;CAED,MAAM,gBAAgB,MAAc;AAClC,MAAI,mBACF,oBAAmB,EAAE,OAAO;AAE9B,MAAI,SACF,UAAS,EAAE;;CAMf,MAAM,6BAFc,4BAA4B,iBAAQ,CAET,OAAO,uBAAuB;EAC3E,OAAO;EACP,UAAU,MAAM,aAAa;EAC9B,CAAC;CAEF,MAAM,WAAW,aAAa,IAAI;CAElC,MAAM,aAAa,SAAiB;AAClC,SAAO,gCAAgC,KAAK;;CAG9C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;AAEtD,iBAAgB;EACd,MAAM,WAAW,SAAS;AAC1B,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;AAC5B,cAAW;;EAGb,MAAM,wBAAwB;AAC5B,OAAI,CAAC,YAAY,QAAS;AAI1B,OAFsB,SAAS,iBAET,aAAa;AACjC,eAAW,KAAK;AAChB,eAAW;;;EAIf,MAAM,sBAAsB;AAC1B,cAAW;;AAGb,SAAO,iBAAiB,aAAa,gBAAgB;AACrD,SAAO,iBAAiB,aAAa,gBAAgB;AACrD,SAAO,iBAAiB,WAAW,cAAc;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,WAAW,cAAc;;IAErD,CAAC,QAAQ,CAAC;CAEb,MAAM,qBAAqB;AACzB,MAAI,SAAS,WAAW,iBAAiB,CAAC,qBAAqB;AAE7D,YAAS,QAAQ,MAAM,SAAS;GAChC,MAAM,eAAe,SAAS,QAAQ;AAEtC,YAAS,QAAQ,MAAM,SAAS,eAAe,IAAI;;;AAIvD,QACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;YAEV,qBAAC,sBAAD;GAAsB,OAAO;aAA7B;IACE,oBAAC,0BAAD,EAA2B,UAAoC,CAAA;IAC/D,oBAAC,KAAK,UAAN;KACQ;KACN,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,UAAU;KACV,OAAO;MACL,WAAW,UAAU,KAAK;MAC1B,WAAW,sBACP,KAAA,IACA,UAAU,kBAAkB;MACjC;KACD,CAAA;IACD,sBACC,oBAAC,kBAAD,EAAA,UAAmB,4BAA8C,CAAA;IAEnE,oBAAC,gBAAD,EAAkB,CAAA;IACG;;EACR,CAAA;EAEnB"}

package/dist/js/packages/components/src/components/TextArea/TextArea.module.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+var TextArea_module_default = {
+	input: "flow--text-area--input",
+	horizontalResize: "flow--text-area--horizontal-resize",
+	verticalResize: "flow--text-area--vertical-resize",
+	resize: "flow--text-area--resize"
+};
+//#endregion
+export { TextArea_module_default as default };
+
+//# sourceMappingURL=TextArea.module.mjs.map

package/dist/js/packages/components/src/components/TextArea/TextArea.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.module.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.input {\n  resize: none;\n  min-width: 100%;\n\n  &.horizontalResize {\n    resize: horizontal;\n  }\n\n  &.verticalResize {\n    resize: vertical;\n  }\n\n  &.resize {\n    resize: both;\n  }\n\n  @include formControl.formControl();\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/TextArea/index.mjs

@@ -0,0 +1 @@
+import "./TextArea.mjs";

package/dist/js/packages/components/src/components/TextField/TextField.mjs

@@ -1,119 +1,91 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import * as Aria from 'react-aria-components';
-import { useState } from 'react';
-import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-import styles from './TextField.module.scss.mjs';
-import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import locales from '../../../../../_virtual/_.locale.json@16189d7d260d7331b0e0a1936d5c7c52.mjs';
-import { Button } from '../Button/Button.mjs';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconHide } from '../Icon/components/icons/IconHide.mjs';
-import { IconShow } from '../Icon/components/icons/IconShow.mjs';
-import clsx from 'clsx';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
-
-const TextField = flowComponent("TextField", (props) => {
-  const {
-    className,
-    showCharacterCount,
-    form,
-    placeholder,
-    ref,
-    type: typeFromProps,
-    children,
-    onChange,
-    ...rest
-  } = useControlledHostValueProps(props);
-  const [charactersCount, setCharactersCount] = useState(
-    props.defaultValue?.length ?? props.value?.length ?? 0
-  );
-  const [type, setType] = useState(typeFromProps);
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldPropsContext,
-    fieldProps
-  } = useFieldComponent(props);
-  const rootClassName = clsx(fieldProps.className, className);
-  const propsContext = {
-    Button: {
-      className: styles.button,
-      variant: "plain",
-      color: "secondary",
-      tunnelId: "button"
-    },
-    CopyButton: { className: styles.button, tunnelId: "button" },
-    ...fieldPropsContext
-  };
-  const handleChange = (v) => {
-    if (showCharacterCount) {
-      setCharactersCount(v.length);
-    }
-    if (onChange) {
-      onChange(v);
-    }
-  };
-  const translation = useLocalizedStringFormatter(locales);
-  const charactersCountDescription = translation.format(
-    "textField.characters",
-    {
-      count: charactersCount,
-      maxCount: props.maxLength ?? 0
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    Aria.TextField,
-    {
-      ...rest,
-      ...fieldProps,
-      className: rootClassName,
-      onChange: handleChange,
-      type,
-      children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
-          children,
-          /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
-            /* @__PURE__ */ jsx(
-              Aria.Input,
-              {
-                form,
-                placeholder,
-                className: styles.input,
-                ref
-              }
-            ),
-            /* @__PURE__ */ jsx(TunnelExit, { id: "button" }),
-            typeFromProps === "password" && /* @__PURE__ */ jsx(
-              Button,
-              {
-                color: "secondary",
-                variant: "plain",
-                className: styles.button,
-                onPress: () => setType(type === "password" ? "text" : "password"),
-                "aria-label": translation.format(
-                  `textField.password.${type === "password" ? "show" : "hide"}`
-                ),
-                children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
-              }
-            )
-          ] }),
-          showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })
-        ] }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] }) })
-    }
-  );
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import "../../lib/propsContext/index.mjs";
+import IconHide from "../Icon/components/icons/IconHide.mjs";
+import IconShow from "../Icon/components/icons/IconShow.mjs";
+import "../Icon/components/icons/index.mjs";
+import Button from "../Button/Button.mjs";
+import "../Button/index.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
+import FieldDescription from "../FieldDescription/FieldDescription.mjs";
+import "../FieldDescription/index.mjs";
+import TextField_module_default from "./TextField.module.mjs";
+import __locale_default from "../../../../../_virtual/_23.locale.mjs";
+import clsx from "clsx";
+import { useState } from "react";
+import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+import { useLocalizedStringFormatter } from "react-aria";
+//#region src/components/TextField/TextField.tsx
+/** @flr-generate all */
+var TextField = flowComponent("TextField", (props) => {
+	const { className, showCharacterCount, form, placeholder, ref, type: typeFromProps, children, onChange, ...rest } = useControlledHostValueProps(props);
+	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
+	const [type, setType] = useState(typeFromProps);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props);
+	const rootClassName = clsx(fieldProps.className, className);
+	const propsContext = {
+		Button: {
+			className: TextField_module_default.button,
+			variant: "plain",
+			color: "secondary",
+			tunnelId: "button"
+		},
+		CopyButton: {
+			className: TextField_module_default.button,
+			tunnelId: "button"
+		},
+		...fieldPropsContext
+	};
+	const handleChange = (v) => {
+		if (showCharacterCount) setCharactersCount(v.length);
+		if (onChange) onChange(v);
+	};
+	const translation = useLocalizedStringFormatter(__locale_default);
+	const charactersCountDescription = translation.format("textField.characters", {
+		count: charactersCount,
+		maxCount: props.maxLength ?? 0
+	});
+	return /* @__PURE__ */ jsx(Aria.TextField, {
+		...rest,
+		...fieldProps,
+		className: rootClassName,
+		onChange: handleChange,
+		type,
+		children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: propsContext,
+			children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+				children,
+				/* @__PURE__ */ jsxs("div", {
+					className: TextField_module_default.inputContainer,
+					children: [
+						/* @__PURE__ */ jsx(Aria.Input, {
+							form,
+							placeholder,
+							className: TextField_module_default.input,
+							ref
+						}),
+						/* @__PURE__ */ jsx(TunnelExit, { id: "button" }),
+						typeFromProps === "password" && /* @__PURE__ */ jsx(Button, {
+							color: "secondary",
+							variant: "plain",
+							className: TextField_module_default.button,
+							onPress: () => setType(type === "password" ? "text" : "password"),
+							"aria-label": translation.format(`textField.password.${type === "password" ? "show" : "hide"}`),
+							children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
+						})
+					]
+				}),
+				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })
+			] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		}) })
+	});
 });
+//#endregion
+export { TextField as default };
 
-export { TextField };
-//# sourceMappingURL=TextField.mjs.map
+//# sourceMappingURL=TextField.mjs.map

package/dist/js/packages/components/src/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnelId: \"button\",\n    },\n    CopyButton: { className: styles.button, tunnelId: \"button\" },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\n    \"textField.characters\",\n    {\n      count: charactersCount,\n      maxCount: props.maxLength ?? 0,\n    },\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <TunnelProvider>\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>\n            {children}\n            <div className={styles.inputContainer}>\n              <Aria.Input\n                form={form}\n                placeholder={placeholder}\n                className={styles.input}\n                ref={ref}\n              />\n              <TunnelExit id=\"button\" />\n              {typeFromProps === \"password\" && (\n                <Button\n                  color=\"secondary\"\n                  variant=\"plain\"\n                  className={styles.button}\n                  onPress={() =>\n                    setType(type === \"password\" ? \"text\" : \"password\")\n                  }\n                  aria-label={translation.format(\n                    `textField.password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                  )}\n                >\n                  {type === \"password\" ? <IconShow /> : <IconHide />}\n                </Button>\n              )}\n            </div>\n            {showCharacterCount && (\n              <FieldDescription>{charactersCountDescription}</FieldDescription>\n            )}\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </TunnelProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnelId: \"button\",\n    },\n    CopyButton: { className: styles.button, tunnelId: \"button\" },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\n    \"textField.characters\",\n    {\n      count: charactersCount,\n      maxCount: props.maxLength ?? 0,\n    },\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <TunnelProvider>\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>\n            {children}\n            <div className={styles.inputContainer}>\n              <Aria.Input\n                form={form}\n                placeholder={placeholder}\n                className={styles.input}\n                ref={ref}\n              />\n              <TunnelExit id=\"button\" />\n              {typeFromProps === \"password\" && (\n                <Button\n                  color=\"secondary\"\n                  variant=\"plain\"\n                  className={styles.button}\n                  onPress={() =>\n                    setType(type === \"password\" ? \"text\" : \"password\")\n                  }\n                  aria-label={translation.format(\n                    `textField.password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                  )}\n                >\n                  {type === \"password\" ? <IconShow /> : <IconHide />}\n                </Button>\n              )}\n            </div>\n            {showCharacterCount && (\n              <FieldDescription>{charactersCountDescription}</FieldDescription>\n            )}\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </TunnelProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,MAAM;CAEtC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,EACtD;CAED,MAAM,CAAC,MAAM,WAAW,SAAS,cAAc;CAE/C,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,MAAM;CAE5B,MAAM,gBAAgB,KAAK,WAAW,WAAW,UAAU;CAE3D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAW,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,YAAY;GAAE,WAAW,yBAAO;GAAQ,UAAU;GAAU;EAC5D,GAAG;EACJ;CAED,MAAM,gBAAgB,MAAc;AAClC,MAAI,mBACF,oBAAmB,EAAE,OAAO;AAE9B,MAAI,SACF,UAAS,EAAE;;CAIf,MAAM,cAAc,4BAA4B,iBAAQ;CAExD,MAAM,6BAA6B,YAAY,OAC7C,wBACA;EACE,OAAO;EACP,UAAU,MAAM,aAAa;EAC9B,CACF;AAED,QACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;YAEN,oBAAC,gBAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;aAA7B,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAW,yBAAO;eAAvB;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAW,yBAAO;OACb;OACL,CAAA;MACF,oBAAC,YAAD,EAAY,IAAG,UAAW,CAAA;MACzB,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAW,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,WAAW;OAEpD,cAAY,YAAY,OACtB,sBAAsB,SAAS,aAAa,SAAS,SACtD;iBAEA,SAAS,aAAa,oBAAC,UAAD,EAAY,CAAA,GAAG,oBAAC,UAAD,EAAY,CAAA;OAC3C,CAAA;MAEP;;IACL,sBACC,oBAAC,kBAAD,EAAA,UAAmB,4BAA8C,CAAA;IAE1C,EAAA,CAAA,EAC3B,oBAAC,gBAAD,EAAkB,CAAA,CACG;MACR,CAAA;EACF,CAAA;EAEnB"}