@mittwald/flow-react-components 0.2.0-alpha.1031 → 0.2.0-alpha.1033

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs

@@ -1,61 +1,60 @@
 "use client"
 /* */
-import { useRef, useState, useLayoutEffect } from 'react';
-import { createFrameResizeObserver } from '../../../lib/dom/createFrameResizeObserver.mjs';
-
-const getTabIndicatorStyle = (state) => state && {
-  "--tab-indicator-x": `${state.x}px`,
-  "--tab-indicator-width": `${state.width}px`
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/Tabs/lib/useTabIndicator.ts
+var getTabIndicatorStyle = (state) => state && {
+	"--tab-indicator-x": `${state.x}px`,
+	"--tab-indicator-width": `${state.width}px`
 };
-const useTabIndicator = (isCollapsed) => {
-  const rootRef = useRef(null);
-  const titlesRef = useRef(null);
-  const hasMeasuredRef = useRef(false);
-  const [indicator, setIndicator] = useState();
-  const resetIndicator = () => {
-    hasMeasuredRef.current = false;
-    setIndicator(void 0);
-  };
-  useLayoutEffect(() => {
-    const root = rootRef.current;
-    const titles = titlesRef.current;
-    if (!root || !titles || isCollapsed) {
-      resetIndicator();
-      return;
-    }
-    const measureIndicator = () => {
-      const selectedTab = titles.querySelector("[data-selected]");
-      if (!selectedTab) {
-        resetIndicator();
-        return;
-      }
-      const rootRect = root.getBoundingClientRect();
-      const selectedTabRect = selectedTab.getBoundingClientRect();
-      const nextIndicator = {
-        x: selectedTabRect.left - rootRect.left,
-        width: selectedTabRect.width,
-        isAnimated: hasMeasuredRef.current
-      };
-      setIndicator((previousIndicator) => {
-        if (previousIndicator && previousIndicator.x === nextIndicator.x && previousIndicator.width === nextIndicator.width && previousIndicator.isAnimated === nextIndicator.isAnimated) {
-          return previousIndicator;
-        }
-        return nextIndicator;
-      });
-      hasMeasuredRef.current = true;
-    };
-    measureIndicator();
-    const observer = createFrameResizeObserver(measureIndicator);
-    observer.observe([root, titles]);
-    return () => observer.disconnect();
-  });
-  return {
-    rootRef,
-    titlesRef,
-    indicatorStyle: getTabIndicatorStyle(indicator),
-    isAnimated: indicator?.isAnimated ?? false
-  };
+var useTabIndicator = (isCollapsed) => {
+	const rootRef = useRef(null);
+	const titlesRef = useRef(null);
+	const hasMeasuredRef = useRef(false);
+	const [indicator, setIndicator] = useState();
+	const resetIndicator = () => {
+		hasMeasuredRef.current = false;
+		setIndicator(void 0);
+	};
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const titles = titlesRef.current;
+		if (!root || !titles || isCollapsed) {
+			resetIndicator();
+			return;
+		}
+		const measureIndicator = () => {
+			const selectedTab = titles.querySelector("[data-selected]");
+			if (!selectedTab) {
+				resetIndicator();
+				return;
+			}
+			const rootRect = root.getBoundingClientRect();
+			const selectedTabRect = selectedTab.getBoundingClientRect();
+			const nextIndicator = {
+				x: selectedTabRect.left - rootRect.left,
+				width: selectedTabRect.width,
+				isAnimated: hasMeasuredRef.current
+			};
+			setIndicator((previousIndicator) => {
+				if (previousIndicator && previousIndicator.x === nextIndicator.x && previousIndicator.width === nextIndicator.width && previousIndicator.isAnimated === nextIndicator.isAnimated) return previousIndicator;
+				return nextIndicator;
+			});
+			hasMeasuredRef.current = true;
+		};
+		measureIndicator();
+		const observer = createFrameResizeObserver(measureIndicator);
+		observer.observe([root, titles]);
+		return () => observer.disconnect();
+	});
+	return {
+		rootRef,
+		titlesRef,
+		indicatorStyle: getTabIndicatorStyle(indicator),
+		isAnimated: indicator?.isAnimated ?? false
+	};
 };
-
+//#endregion
 export { useTabIndicator };
-//# sourceMappingURL=useTabIndicator.mjs.map
+
+//# sourceMappingURL=useTabIndicator.mjs.map

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTabIndicator.mjs","sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n      const nextIndicator: TabIndicatorState = {\n        x: selectedTabRect.left - rootRect.left,\n        width: selectedTabRect.width,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"names":[],"mappings":";;;AAeA,MAAM,oBAAA,GAAuB,CAC3B,KAAA,KAEA,KAAA,IAAS;AAAA,EACP,mBAAA,EAAqB,CAAA,EAAG,KAAA,CAAM,CAAC,CAAA,EAAA,CAAA;AAAA,EAC/B,uBAAA,EAAyB,CAAA,EAAG,KAAA,CAAM,KAAK,CAAA,EAAA;AACzC,CAAA;AAEK,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAyB;AACvD,EAAA,MAAM,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,SAAA,GAAY,OAA8B,IAAI,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,OAAO,KAAK,CAAA;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAwC;AAE1E,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,cAAA,CAAe,OAAA,GAAU,KAAA;AAEzB,IAAA,YAAA,CAAa,MAAS,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AAEzB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,MAAA,IAAU,WAAA,EAAa;AACnC,MAAA,cAAA,EAAe;AACf,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,aAAA,CAA2B,iBAAiB,CAAA;AAEvE,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,cAAA,EAAe;AACf,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,QAAA,GAAW,KAAK,qBAAA,EAAsB;AAC5C,MAAA,MAAM,eAAA,GAAkB,YAAY,qBAAA,EAAsB;AAC1D,MAAA,MAAM,aAAA,GAAmC;AAAA,QACvC,CAAA,EAAG,eAAA,CAAgB,IAAA,GAAO,QAAA,CAAS,IAAA;AAAA,QACnC,OAAO,eAAA,CAAgB,KAAA;AAAA,QACvB,YAAY,cAAA,CAAe;AAAA,OAC7B;AAEA,MAAA,YAAA,CAAa,CAAC,iBAAA,KAAsB;AAClC,QAAA,IACE,iBAAA,IACA,iBAAA,CAAkB,CAAA,KAAM,aAAA,CAAc,CAAA,IACtC,iBAAA,CAAkB,KAAA,KAAU,aAAA,CAAc,KAAA,IAC1C,iBAAA,CAAkB,UAAA,KAAe,aAAA,CAAc,UAAA,EAC/C;AACA,UAAA,OAAO,iBAAA;AAAA,QACT;AAEA,QAAA,OAAO,aAAA;AAAA,MACT,CAAC,CAAA;AAED,MAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,gBAAA,EAAiB;AAEjB,IAAA,MAAM,QAAA,GAAW,0BAA0B,gBAAgB,CAAA;AAC3D,IAAA,QAAA,CAAS,OAAA,CAAQ,CAAC,IAAA,EAAM,MAAM,CAAC,CAAA;AAE/B,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAC,CAAA;AAED,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA,EAAgB,qBAAqB,SAAS,CAAA;AAAA,IAC9C,UAAA,EAAY,WAAW,UAAA,IAAc;AAAA,GACvC;AACF;;;;"}
+{"version":3,"file":"useTabIndicator.mjs","names":[],"sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n      const nextIndicator: TabIndicatorState = {\n        x: selectedTabRect.left - rootRect.left,\n        width: selectedTabRect.width,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAC1D,MAAM,gBAAmC;IACvC,GAAG,gBAAgB,OAAO,SAAS;IACnC,OAAO,gBAAgB;IACvB,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}

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

@@ -1,65 +1,60 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import * as Aria from 'react-aria-components';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { isAlphaColor } from '../../lib/types/props.mjs';
-import invariant from 'invariant';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { EmulatedBoldText } from '../EmulatedBoldText/EmulatedBoldText.mjs';
-import { Wrap } from '../Wrap/Wrap.mjs';
-import clsx from 'clsx';
-import styles from './Text.module.scss.mjs';
-
-const Text = flowComponent("Text", (props) => {
-  const {
-    children,
-    className,
-    elementType = "span",
-    emulateBoldWidth,
-    ref,
-    color = "default",
-    align = "start",
-    wrap,
-    style: styleFromProps,
-    whiteSpace,
-    wordBreak,
-    noLigatures,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.text,
-    isAlphaColor(color) && styles[color],
-    align && styles[`align-${align}`],
-    wrap && styles[`wrap-${wrap}`],
-    noLigatures && styles[`no-ligatures`],
-    className
-  );
-  const textProps = { ...rest, className: rootClassName };
-  const propsContext = {
-    Link: {
-      inline: true,
-      color: isAlphaColor(color) ? color : void 0
-    },
-    Icon: { className: styles.icon },
-    Kbd: { variant: "soft" }
-  };
-  const style = {
-    whiteSpace,
-    wordBreak,
-    ...styleFromProps
-  };
-  const childrenElement = /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: emulateBoldWidth, children: /* @__PURE__ */ jsx(EmulatedBoldText, { children }) }) });
-  if (!props.slot) {
-    const Element = elementType;
-    return /* @__PURE__ */ jsx(Element, { style, ...textProps, ref, children: childrenElement });
-  }
-  invariant(
-    typeof elementType === "string",
-    "'elementType' in Text component must be of type string"
-  );
-  return /* @__PURE__ */ jsx(Aria.Text, { style, ...textProps, elementType, ref, children: childrenElement });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { isAlphaColor } from "../../lib/types/props.mjs";
+import { Wrap } from "../Wrap/Wrap.mjs";
+import { EmulatedBoldText } from "../EmulatedBoldText/EmulatedBoldText.mjs";
+import Text_module_default from "./Text.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+import invariant from "invariant";
+//#region src/components/Text/Text.tsx
+/** @flr-generate all */
+var Text = flowComponent("Text", (props) => {
+	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
+	const rootClassName = clsx(Text_module_default.text, isAlphaColor(color) && Text_module_default[color], align && Text_module_default[`align-${align}`], wrap && Text_module_default[`wrap-${wrap}`], noLigatures && Text_module_default[`no-ligatures`], className);
+	const textProps = {
+		...rest,
+		className: rootClassName
+	};
+	const propsContext = {
+		Link: {
+			inline: true,
+			color: isAlphaColor(color) ? color : void 0
+		},
+		Icon: { className: Text_module_default.icon },
+		Kbd: { variant: "soft" }
+	};
+	const style = {
+		whiteSpace,
+		wordBreak,
+		...styleFromProps
+	};
+	const childrenElement = /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children: /* @__PURE__ */ jsx(Wrap, {
+			if: emulateBoldWidth,
+			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children })
+		})
+	});
+	if (!props.slot) return /* @__PURE__ */ jsx(elementType, {
+		style,
+		...textProps,
+		ref,
+		children: childrenElement
+	});
+	invariant(typeof elementType === "string", "'elementType' in Text component must be of type string");
+	return /* @__PURE__ */ jsx(Aria.Text, {
+		style,
+		...textProps,
+		elementType,
+		ref,
+		children: childrenElement
+	});
 });
-
+//#endregion
 export { Text, Text as default };
-//# sourceMappingURL=Text.mjs.map
+
+//# sourceMappingURL=Text.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"names":[],"mappings":";;;;;;;;;;;AA+CO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,MAAA;AAAA,IACd,gBAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,KAAA,GAAQ,OAAA;AAAA,IACR,IAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,UAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,IAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,KAAA,IAAS,MAAA,CAAO,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAA;AAAA,IAChC,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,WAAA,IAAe,OAAO,CAAA,YAAA,CAAc,CAAA;AAAA,IACpC;AAAA,GACF;AAEA,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,IAAA,EAAM,WAAW,aAAA,EAAc;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,IAAA;AAAA,MACR,KAAA,EAAO,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ;AAAA,KACvC;AAAA,IACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,IAC/B,GAAA,EAAK,EAAE,OAAA,EAAS,MAAA;AAAO,GACzB;AAEA,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,eAAA,mBACJ,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,gBAAA,EACR,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,GAC9B,CAAA,EACF,CAAA;AAGF,EAAA,IAAI,CAAC,MAAM,IAAA,EAAM;AACf,IAAA,MAAM,OAAA,GAAU,WAAA;AAChB,IAAA,2BACG,OAAA,EAAA,EAAQ,KAAA,EAAe,GAAG,SAAA,EAAW,KACnC,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,SAAA;AAAA,IACE,OAAO,WAAA,KAAgB,QAAA;AAAA,IACvB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,OAAe,GAAG,SAAA,EAAW,WAAA,EAA0B,GAAA,EAC/D,QAAA,EAAA,eAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Text.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,oBAAO,MACP,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,oBAAO,SAAS,UACzB,QAAQ,oBAAO,QAAQ,SACvB,eAAe,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAAE,GAAG;EAAM,WAAW;CAAc;CAEtD,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAW,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;EAC1C,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAAC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}

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

@@ -1,16 +1,17 @@
 "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,
+//#region src/components/Text/Text.module.scss
+var text = "flow--text";
+var dark = "flow--text--dark";
+var light = "flow--text--light";
+var icon = "flow--text--icon";
+var Text_module_default = {
+	text,
+	dark,
+	light,
 	"dark-static": "flow--text--dark-static",
 	"light-static": "flow--text--light-static",
-	icon: icon,
+	icon,
 	"align-start": "flow--text--align-start",
 	"align-center": "flow--text--align-center",
 	"align-end": "flow--text--align-end",
@@ -19,6 +20,7 @@ const styles = {
 	"wrap-pretty": "flow--text--wrap-pretty",
 	"no-ligatures": "flow--text--no-ligatures"
 };
+//#endregion
+export { dark, Text_module_default as default, icon, light, text };
 
-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-inline-start: 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-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: 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  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,158 +1,114 @@
 "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 { 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 '../TranslationProvider/useLocalizedStringFormatter.mjs';
-import locales from '../../../../../_virtual/_.locale.json@6922640321d6c379322b09cbcf0dcdb3.mjs';
-import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
-import { useWarnDeprecation } from '../DeprecationWarningProvider/DeprecationWarningProvider.mjs';
-
-const TextArea = flowComponent("TextArea", (props) => {
-  const warnDeprecation = useWarnDeprecation();
-  const {
-    children,
-    placeholder,
-    rows = 5,
-    autoResizeMaxRows = rows,
-    ref,
-    allowVerticalResize,
-    allowHorizontalResize,
-    showCharacterCount,
-    className,
-    onChange,
-    isReadOnly,
-    ...rest
-  } = useControlledHostValueProps(props);
-  const [charactersCount, setCharactersCount] = useState(
-    props.defaultValue?.length ?? props.value?.length ?? 0
-  );
-  if (allowHorizontalResize !== void 0) {
-    warnDeprecation(
-      "The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead."
-    );
-  }
-  if (allowVerticalResize !== void 0) {
-    warnDeprecation(
-      "The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead."
-    );
-  }
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldPropsContext,
-    fieldProps
-  } = useFieldComponent(props, "TextArea");
-  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 (isReadOnly) {
-      return;
-    }
-    if (showCharacterCount) {
-      setCharactersCount(v.length);
-    }
-    if (onChange) {
-      onChange(v);
-    }
-  };
-  const translation = useLocalizedStringFormatter(locales, "TextArea");
-  const charactersCountDescription = translation.format("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,
-            ...isReadOnly ? { "data-readonly": true } : {},
-            "aria-readonly": isReadOnly,
-            "aria-hidden": props["aria-hidden"],
-            placeholder,
-            className: inputClassName,
-            ref: localRef,
-            onChange: updateHeight,
-            style: {
-              caretColor: isReadOnly ? "transparent" : void 0,
-              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 { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
+import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
+import TextArea_module_default from "./TextArea.module.mjs";
+import __locale_default from "../../../../../_virtual/_23.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";
+//#region src/components/TextArea/TextArea.tsx
+/** @flr-generate all */
+var TextArea = flowComponent("TextArea", (props) => {
+	const warnDeprecation = useWarnDeprecation();
+	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, isReadOnly, ...rest } = useControlledHostValueProps(props);
+	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
+	if (allowHorizontalResize !== void 0) warnDeprecation("The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
+	if (allowVerticalResize !== void 0) warnDeprecation("The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextArea");
+	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 (isReadOnly) return;
+		if (showCharacterCount) setCharactersCount(v.length);
+		if (onChange) onChange(v);
+	};
+	const charactersCountDescription = useLocalizedStringFormatter(__locale_default, "TextArea").format("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,
+					...isReadOnly ? { "data-readonly": true } : {},
+					"aria-readonly": isReadOnly,
+					"aria-hidden": props["aria-hidden"],
+					placeholder,
+					className: inputClassName,
+					ref: localRef,
+					onChange: updateHeight,
+					style: {
+						caretColor: isReadOnly ? "transparent" : void 0,
+						minHeight: getHeight(rows),
+						maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
+					}
+				}),
+				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
+				/* @__PURE__ */ jsx(FieldErrorView, {})
+			]
+		})
+	});
 });
+//#endregion
+export { TextArea, TextArea as default };
 
-export { TextArea };
-//# sourceMappingURL=TextArea.mjs.map
+//# sourceMappingURL=TextArea.mjs.map