@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/components/inputs/shared.js

@@ -2,105 +2,100 @@
 import { createValidHtmlId } from "../../utilities/html/index.js";
 import { useState } from "react";
 import { tokens } from "@gnist/themes/tokens.css.js";
+//#region src/components/inputs/shared.tsx
 function useIconAndExtraTextWidth(hasIcon) {
-  const iconWidth = hasIcon ? tokens.spacing.xl : "0px";
-  const [textWidth, setTextWidth] = useState(0);
-  const textRef = (node) => setTextWidth(node?.getBoundingClientRect()?.width ?? 0);
-  return {
-    textRef,
-    width: `calc(${textWidth}px + ${iconWidth})`
-  };
+	const iconWidth = hasIcon ? tokens.spacing.xl : "0px";
+	const [textWidth, setTextWidth] = useState(0);
+	const textRef = (node) => setTextWidth(node?.getBoundingClientRect()?.width ?? 0);
+	return {
+		textRef,
+		width: `calc(${textWidth}px + ${iconWidth})`
+	};
 }
 function isClickableIcon(icon) {
-  return icon.onClick !== void 0;
+	return icon.onClick !== void 0;
 }
 function useInputFieldLogic({ label, density: _density = "default", validity = { type: "none" }, id = createValidHtmlId(label), leadingIcon, trailingIcon, disabled, density, className }) {
-  const { textRef: prefixRef, width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
-  const { textRef: suffixRef, width: postInputWidth } = useIconAndExtraTextWidth(!!trailingIcon);
-  const inputId = id;
-  const labelId = `${id}-label`;
-  const helperId = `${id}-helper`;
-  return {
-    wrapperProps: {
-      preInputWidth,
-      postInputWidth,
-      validity,
-      disabled,
-      density,
-      className
-    },
-    contentProps: {
-      validity,
-      prefixRef,
-      suffixRef,
-      inputId,
-      labelId,
-      helperId
-    },
-    commonInputProps: {
-      ...validity.type === "error" && {
-        "aria-invalid": true,
-        "aria-errormessage": helperId
-      },
-      "aria-describedby": helperId,
-      id,
-      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
-      placeholder: " "
-    }
-  };
+	const { textRef: prefixRef, width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+	const { textRef: suffixRef, width: postInputWidth } = useIconAndExtraTextWidth(!!trailingIcon);
+	const inputId = id;
+	const labelId = `${id}-label`;
+	const helperId = `${id}-helper`;
+	return {
+		wrapperProps: {
+			preInputWidth,
+			postInputWidth,
+			validity,
+			disabled,
+			density,
+			className
+		},
+		contentProps: {
+			validity,
+			prefixRef,
+			suffixRef,
+			inputId,
+			labelId,
+			helperId
+		},
+		commonInputProps: {
+			...validity.type === "error" && {
+				"aria-invalid": true,
+				"aria-errormessage": helperId
+			},
+			"aria-describedby": helperId,
+			id,
+			placeholder: " "
+		}
+	};
 }
 function useSelectInputLogic({ label, density: _density = "default", validity = { type: "none" }, id = createValidHtmlId(label), leadingIcon, disabled, density, className }) {
-  const { width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
-  const { width: postInputWidth } = useIconAndExtraTextWidth(true);
-  const inputId = id;
-  const labelId = `${id}-label`;
-  const helperId = `${id}-helper`;
-  return {
-    wrapperProps: {
-      preInputWidth,
-      postInputWidth,
-      validity,
-      disabled,
-      density,
-      className
-    },
-    contentProps: {
-      validity,
-      inputId,
-      labelId,
-      helperId
-    },
-    commonInputProps: {
-      ...validity.type === "error" && {
-        "aria-invalid": true,
-        "aria-errormessage": helperId
-      },
-      "aria-labelledby": labelId,
-      "aria-describedby": helperId,
-      id,
-      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
-      placeholder: " "
-    }
-  };
+	const { width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+	const { width: postInputWidth } = useIconAndExtraTextWidth(true);
+	const inputId = id;
+	const labelId = `${id}-label`;
+	const helperId = `${id}-helper`;
+	return {
+		wrapperProps: {
+			preInputWidth,
+			postInputWidth,
+			validity,
+			disabled,
+			density,
+			className
+		},
+		contentProps: {
+			validity,
+			inputId,
+			labelId,
+			helperId
+		},
+		commonInputProps: {
+			...validity.type === "error" && {
+				"aria-invalid": true,
+				"aria-errormessage": helperId
+			},
+			"aria-labelledby": labelId,
+			"aria-describedby": helperId,
+			id,
+			placeholder: " "
+		}
+	};
 }
 function getInputFieldProps({ label, density, prefix, suffix, leadingIcon, trailingIcon, helperText, reserveSpaceForMessage, ...inputProps }) {
-  return {
-    extraInformation: {
-      label,
-      density,
-      prefix,
-      suffix,
-      leadingIcon,
-      trailingIcon,
-      helperText,
-      reserveSpaceForMessage
-    },
-    inputProps
-  };
+	return {
+		extraInformation: {
+			label,
+			density,
+			prefix,
+			suffix,
+			leadingIcon,
+			trailingIcon,
+			helperText,
+			reserveSpaceForMessage
+		},
+		inputProps
+	};
 }
-export {
-  getInputFieldProps,
-  isClickableIcon,
-  useInputFieldLogic,
-  useSelectInputLogic
-};
+//#endregion
+export { getInputFieldProps, isClickableIcon, useInputFieldLogic, useSelectInputLogic };

package/dist/components/inputs/textFields/TextArea.cjs

@@ -1,68 +1,137 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
-require("../../../utilities/layout/Row.cjs");
-require("@gnist/themes/tokens.css.js");
-require("react-content-loader");
-require("../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../foundation/iconography/icons.cjs");
-const Icon = require("../../../foundation/iconography/Icon.cjs");
-require("../../../foundation/typography/index.cjs");
-require("react");
-const classNames = require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const dynamic = require("@vanilla-extract/dynamic");
-const iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
-const inputField_css = require("../shared-styles/inputField.css.cjs");
-const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
-const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
-const suffixPrefix_css = require("../shared-styles/suffixPrefix.css.cjs");
-const shared = require("../shared.cjs");
-const textArea_css = require("./textArea.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/index.cjs");
+const require_InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../building-blocks/index.cjs");
+const require_inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
+const require_inputField_css = require("../shared-styles/inputField.css.cjs");
+const require_shared = require("../shared.cjs");
+const require_labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
+const require_iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
+const require_suffixPrefix_css = require("../shared-styles/suffixPrefix.css.cjs");
+const require_textArea_css = require("./textArea.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/inputs/textFields/TextArea.tsx
+/**
+Text areas are fixed-height fields that are taller than text fields and wrap overflow text onto a new line.
+They scroll vertically when the cursor reaches the bottom of the field.
+
+The large initial size indicates that longer responses are possible and encouraged.
+These should be used instead of multi-line fields on the web.
+
+_Accessibility note:_ The leading/trailing icon and counter text will not be read by screen readers.
+If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
+
+Documentation: [TextArea](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textarea--docs)
+*/
 function TextArea({ counterText, visibleLines: visibleLinesProp, ref, ...props }) {
-  const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
-  const { inputProps } = shared.getInputFieldProps(props);
-  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
-    placement: "left",
-    density: wrapperProps.density
-  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
-    disabled: props.disabled,
-    density: props.density,
-    validityType: props.validity?.type,
-    fieldType: "textArea"
-  }), style: {
-    ...dynamic.assignInlineVars({
-      [inputFieldConstants_css.visibleLines]: (visibleLinesProp ?? 4).toString()
-    })
-  }, children: [jsxRuntime.jsx("textarea", { ...commonInputProps, ...inputProps, ref, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: {
-    ...dynamic.assignInlineVars({
-      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
-      [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
-    })
-  } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
-    density: props.density,
-    validityType: props.validity?.type,
-    isElevated: !!props.value,
-    disabled: props.disabled
-  }), style: {
-    ...dynamic.assignInlineVars({
-      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth
-    })
-  }, children: jsxRuntime.jsx("span", { style: { position: "relative" }, children: props.label }) }), jsxRuntime.jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsxRuntime.jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixPrefix_css.suffixStyle, children: props.suffix }), props.trailingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms_css_js.atoms({ paddingLeft: "xxs" }) })] }), counterText && jsxRuntime.jsx("span", { "aria-hidden": true, className: textArea_css.wordCounterStyle({
-    disabled: props.disabled
-  }), children: counterText })] }), props.trailingIcon && shared.isClickableIcon(props.trailingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
-    placement: "right",
-    density: wrapperProps.density
-  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+	const { wrapperProps, contentProps, commonInputProps } = require_shared.useInputFieldLogic(props);
+	const { inputProps } = require_shared.getInputFieldProps(props);
+	return (0, react_jsx_runtime.jsxs)("span", {
+		className: (0, classnames.default)(wrapperProps.className, require_inputField_css.wrapperStyle),
+		children: [
+			props.leadingIcon && require_shared.isClickableIcon(props.leadingIcon) && (0, react_jsx_runtime.jsx)("button", {
+				className: require_iconButtonOverlay_css.iconButtonOverlayRecipe({
+					placement: "left",
+					density: wrapperProps.density
+				}),
+				title: props.leadingIcon.title,
+				onClick: props.leadingIcon.onClick
+			}),
+			(0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: props.id,
+				className: require_inputField_css.inputFieldWrapperRecipe({
+					disabled: props.disabled,
+					density: props.density,
+					validityType: props.validity?.type,
+					fieldType: "textArea"
+				}),
+				style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({ [require_inputFieldConstants_css.visibleLines]: (visibleLinesProp ?? 4).toString() }) },
+				children: [
+					(0, react_jsx_runtime.jsx)("textarea", {
+						...commonInputProps,
+						...inputProps,
+						ref,
+						className: (0, classnames.default)(require_inputField_css.inputFieldStyle, inputProps.className),
+						style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({
+							[require_inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
+							[require_inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
+						}) }
+					}),
+					(0, react_jsx_runtime.jsxs)("span", {
+						className: require_inputField_css.inputContentWrapper({ density: props.density }),
+						children: [
+							props.leadingIcon && (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+								icon: require_shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon,
+								className: (0, _gnist_themes_atoms_css_js.atoms)({ paddingRight: "xxs" })
+							}),
+							props.prefix && (0, react_jsx_runtime.jsx)("span", {
+								ref: contentProps.prefixRef,
+								"aria-hidden": true,
+								className: require_suffixPrefix_css.prefixStyle,
+								children: props.prefix
+							}),
+							(0, react_jsx_runtime.jsx)("label", {
+								id: contentProps.labelId,
+								className: require_labelStyles_css.labelStyle({
+									density: props.density,
+									validityType: props.validity?.type,
+									isElevated: !!props.value,
+									disabled: props.disabled
+								}),
+								style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({ [require_inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth }) },
+								children: (0, react_jsx_runtime.jsx)("span", {
+									style: { position: "relative" },
+									children: props.label
+								})
+							}),
+							(0, react_jsx_runtime.jsx)("span", { style: { flexGrow: "1" } }),
+							props.suffix && (0, react_jsx_runtime.jsx)("span", {
+								ref: contentProps.suffixRef,
+								"aria-hidden": true,
+								className: require_suffixPrefix_css.suffixStyle,
+								children: props.suffix
+							}),
+							props.trailingIcon && (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+								icon: require_shared.isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon,
+								className: (0, _gnist_themes_atoms_css_js.atoms)({ paddingLeft: "xxs" })
+							})
+						]
+					}),
+					counterText && (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: require_textArea_css.wordCounterStyle({ disabled: props.disabled }),
+						children: counterText
+					})
+				]
+			}),
+			props.trailingIcon && require_shared.isClickableIcon(props.trailingIcon) && (0, react_jsx_runtime.jsx)("button", {
+				className: require_iconButtonOverlay_css.iconButtonOverlayRecipe({
+					placement: "right",
+					density: wrapperProps.density
+				}),
+				title: props.trailingIcon.title,
+				onClick: props.trailingIcon.onClick,
+				type: "button"
+			}),
+			(0, react_jsx_runtime.jsx)(require_InputHelperText.InputHelperText, {
+				id: contentProps.helperId,
+				validity: props.validity,
+				helperText: props.helperText,
+				reserveSpaceForMessage: props.reserveSpaceForMessage,
+				disabled: props.disabled
+			})
+		]
+	});
 }
-const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
-const characterCount = (value, max) => `${value.trim().length}/${max}`;
+var wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
+var characterCount = (value, max) => `${value.trim().length}/${max}`;
+//#endregion
 exports.TextArea = TextArea;
 exports.characterCount = characterCount;
 exports.wordCount = wordCount;

package/dist/components/inputs/textFields/TextArea.js

@@ -1,66 +1,133 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
-import "../../../utilities/layout/Row.js";
-import "@gnist/themes/tokens.css.js";
-import "react-content-loader";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
-import "../../../foundation/typography/index.js";
-import "react";
-import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
-import { atoms } from "@gnist/themes/atoms.css.js";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
-import { inputFieldStyle, inputContentWrapper, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
+import "../../../foundation/index.js";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../building-blocks/index.js";
 import { postInputWidth, preInputWidth, visibleLines } from "../shared-styles/inputFieldConstants.css.js";
+import { inputContentWrapper, inputFieldStyle, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { getInputFieldProps, isClickableIcon, useInputFieldLogic } from "../shared.js";
 import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
-import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
 import { wordCounterStyle } from "./textArea.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import classNames from "classnames";
+//#region src/components/inputs/textFields/TextArea.tsx
+/**
+Text areas are fixed-height fields that are taller than text fields and wrap overflow text onto a new line.
+They scroll vertically when the cursor reaches the bottom of the field.
+
+The large initial size indicates that longer responses are possible and encouraged.
+These should be used instead of multi-line fields on the web.
+
+_Accessibility note:_ The leading/trailing icon and counter text will not be read by screen readers.
+If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
+
+Documentation: [TextArea](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textarea--docs)
+*/
 function TextArea({ counterText, visibleLines: visibleLinesProp, ref, ...props }) {
-  const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
-  const { inputProps } = getInputFieldProps(props);
-  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
-    placement: "left",
-    density: wrapperProps.density
-  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
-    disabled: props.disabled,
-    density: props.density,
-    validityType: props.validity?.type,
-    fieldType: "textArea"
-  }), style: {
-    ...assignInlineVars({
-      [visibleLines]: (visibleLinesProp ?? 4).toString()
-    })
-  }, children: [jsx("textarea", { ...commonInputProps, ...inputProps, ref, className: classNames(inputFieldStyle, inputProps.className), style: {
-    ...assignInlineVars({
-      [preInputWidth]: wrapperProps.preInputWidth,
-      [postInputWidth]: wrapperProps.postInputWidth
-    })
-  } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
-    density: props.density,
-    validityType: props.validity?.type,
-    isElevated: !!props.value,
-    disabled: props.disabled
-  }), style: {
-    ...assignInlineVars({
-      [preInputWidth]: wrapperProps.preInputWidth
-    })
-  }, children: jsx("span", { style: { position: "relative" }, children: props.label }) }), jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixStyle, children: props.suffix }), props.trailingIcon && jsx(Icon, { icon: isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms({ paddingLeft: "xxs" }) })] }), counterText && jsx("span", { "aria-hidden": true, className: wordCounterStyle({
-    disabled: props.disabled
-  }), children: counterText })] }), props.trailingIcon && isClickableIcon(props.trailingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
-    placement: "right",
-    density: wrapperProps.density
-  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+	const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
+	const { inputProps } = getInputFieldProps(props);
+	return jsxs("span", {
+		className: classNames(wrapperProps.className, wrapperStyle),
+		children: [
+			props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", {
+				className: iconButtonOverlayRecipe({
+					placement: "left",
+					density: wrapperProps.density
+				}),
+				title: props.leadingIcon.title,
+				onClick: props.leadingIcon.onClick
+			}),
+			jsxs("label", {
+				htmlFor: props.id,
+				className: inputFieldWrapperRecipe({
+					disabled: props.disabled,
+					density: props.density,
+					validityType: props.validity?.type,
+					fieldType: "textArea"
+				}),
+				style: { ...assignInlineVars({ [visibleLines]: (visibleLinesProp ?? 4).toString() }) },
+				children: [
+					jsx("textarea", {
+						...commonInputProps,
+						...inputProps,
+						ref,
+						className: classNames(inputFieldStyle, inputProps.className),
+						style: { ...assignInlineVars({
+							[preInputWidth]: wrapperProps.preInputWidth,
+							[postInputWidth]: wrapperProps.postInputWidth
+						}) }
+					}),
+					jsxs("span", {
+						className: inputContentWrapper({ density: props.density }),
+						children: [
+							props.leadingIcon && jsx(Icon, {
+								icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon,
+								className: atoms({ paddingRight: "xxs" })
+							}),
+							props.prefix && jsx("span", {
+								ref: contentProps.prefixRef,
+								"aria-hidden": true,
+								className: prefixStyle,
+								children: props.prefix
+							}),
+							jsx("label", {
+								id: contentProps.labelId,
+								className: labelStyle({
+									density: props.density,
+									validityType: props.validity?.type,
+									isElevated: !!props.value,
+									disabled: props.disabled
+								}),
+								style: { ...assignInlineVars({ [preInputWidth]: wrapperProps.preInputWidth }) },
+								children: jsx("span", {
+									style: { position: "relative" },
+									children: props.label
+								})
+							}),
+							jsx("span", { style: { flexGrow: "1" } }),
+							props.suffix && jsx("span", {
+								ref: contentProps.suffixRef,
+								"aria-hidden": true,
+								className: suffixStyle,
+								children: props.suffix
+							}),
+							props.trailingIcon && jsx(Icon, {
+								icon: isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon,
+								className: atoms({ paddingLeft: "xxs" })
+							})
+						]
+					}),
+					counterText && jsx("span", {
+						"aria-hidden": true,
+						className: wordCounterStyle({ disabled: props.disabled }),
+						children: counterText
+					})
+				]
+			}),
+			props.trailingIcon && isClickableIcon(props.trailingIcon) && jsx("button", {
+				className: iconButtonOverlayRecipe({
+					placement: "right",
+					density: wrapperProps.density
+				}),
+				title: props.trailingIcon.title,
+				onClick: props.trailingIcon.onClick,
+				type: "button"
+			}),
+			jsx(InputHelperText, {
+				id: contentProps.helperId,
+				validity: props.validity,
+				helperText: props.helperText,
+				reserveSpaceForMessage: props.reserveSpaceForMessage,
+				disabled: props.disabled
+			})
+		]
+	});
 }
-const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
-const characterCount = (value, max) => `${value.trim().length}/${max}`;
-export {
-  TextArea,
-  characterCount,
-  wordCount
-};
+var wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
+var characterCount = (value, max) => `${value.trim().length}/${max}`;
+//#endregion
+export { TextArea, characterCount, wordCount };