@cube-dev/ui-kit 0.197.0 → 0.198.0

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,14 +1,15 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { _Text } from "../../content/Text.js";
+import { Text as _Text } from "../../content/Text.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Space } from "../../layout/Space.js";
 import { InfoBadge } from "../../content/InfoBadge/InfoBadge.js";
 import { Flex } from "../../layout/Flex.js";
+import { hasFieldContent } from "../field-chrome.js";
 import { getValidationMods } from "../validation/resolve-validation-props.js";
-import { NecessityIndicatorMark, _Label } from "../Label.js";
+import { Label as _Label, NecessityIndicatorMark } from "../Label.js";
 import { warnAboutLegacyTooltip } from "../legacy-tooltip.js";
 import { getFieldDescriptionId, getFieldMessageId, useFieldTextId } from "./field-description.js";
 import { c } from "react/compiler-runtime";
@@ -16,12 +17,7 @@ import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { VisuallyHidden } from "react-aria";
-
 //#region src/components/form/FieldWrapper/FieldWrapper.tsx
-/** Empty slot values suppress content; numeric zero is still text. */
-function hasFieldContent(content) {
-	return content != null && typeof content !== "boolean" && content !== "";
-}
 const FieldElement = tasty({
 	qa: "Field",
 	styles: {
@@ -107,8 +103,8 @@ const LabelSuffixElement = tasty({ styles: {
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const $ = c(90);
-	const { as, labelPosition: t0, label, isBare: t1, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, controlId, isInvalid, isValid, requiredMark: t2, labelTooltip, isHidden, labelSuffix, children } = props;
+	const $ = c(92);
+	const { as, labelPosition: t0, label, isBare: t1, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, labelRef, fieldProps, message, messageStyles, description, errorMessage, Component, controlId, isInvalid, isValid, requiredMark: t2, labelTooltip, isHidden, labelSuffix, children } = props;
 	const labelPosition = t0 === void 0 ? "top" : t0;
 	const isBare = t1 === void 0 ? false : t1;
 	const requiredMark = t2 === void 0 ? true : t2;
@@ -132,7 +128,7 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 	} else t4 = $[4];
 	const hasLabel = t4;
 	let t5;
-	if ($[5] !== as || $[6] !== extra || $[7] !== hasLabel || $[8] !== isDisabled || $[9] !== isInvalid || $[10] !== isValid || $[11] !== label || $[12] !== labelPosition || $[13] !== labelProps || $[14] !== labelStyles || $[15] !== labelSuffix || $[16] !== labelTooltip || $[17] !== necessityIndicator || $[18] !== optionalNote || $[19] !== showOptionalNote || $[20] !== showRequiredMark) {
+	if ($[5] !== as || $[6] !== extra || $[7] !== hasLabel || $[8] !== isDisabled || $[9] !== isInvalid || $[10] !== isValid || $[11] !== label || $[12] !== labelPosition || $[13] !== labelProps || $[14] !== labelRef || $[15] !== labelStyles || $[16] !== labelSuffix || $[17] !== labelTooltip || $[18] !== necessityIndicator || $[19] !== optionalNote || $[20] !== showOptionalNote || $[21] !== showRequiredMark) {
 		t5 = hasLabel ? /* @__PURE__ */ jsx(_Label, {
 			as: as === "label" ? "div" : "label",
 			styles: labelStyles,
@@ -144,6 +140,7 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 			isInvalid,
 			isValid,
 			"aria-label": typeof label === "string" ? optionalNote ? `${label} ${optionalNote}` : label : void 0,
+			ref: labelRef,
 			...labelProps,
 			children: /* @__PURE__ */ jsxs(Flex, {
 				placeContent: "baseline space-between",
@@ -175,75 +172,78 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 		$[11] = label;
 		$[12] = labelPosition;
 		$[13] = labelProps;
-		$[14] = labelStyles;
-		$[15] = labelSuffix;
-		$[16] = labelTooltip;
-		$[17] = necessityIndicator;
-		$[18] = optionalNote;
-		$[19] = showOptionalNote;
-		$[20] = showRequiredMark;
-		$[21] = t5;
-	} else t5 = $[21];
+		$[14] = labelRef;
+		$[15] = labelStyles;
+		$[16] = labelSuffix;
+		$[17] = labelTooltip;
+		$[18] = necessityIndicator;
+		$[19] = optionalNote;
+		$[20] = showOptionalNote;
+		$[21] = showRequiredMark;
+		$[22] = t5;
+	} else t5 = $[22];
 	const labelComponent = t5;
 	const displayMessage = errorMessage !== void 0 ? errorMessage : message;
 	const isErrorMessage = errorMessage !== void 0;
 	let t6;
-	if ($[22] !== displayMessage || $[23] !== isBare || $[24] !== isDisabled) {
+	if ($[23] !== displayMessage || $[24] !== isBare || $[25] !== isDisabled) {
 		t6 = !isBare && !isDisabled && hasFieldContent(displayMessage);
-		$[22] = displayMessage;
-		$[23] = isBare;
-		$[24] = isDisabled;
-		$[25] = t6;
-	} else t6 = $[25];
+		$[23] = displayMessage;
+		$[24] = isBare;
+		$[25] = isDisabled;
+		$[26] = t6;
+	} else t6 = $[26];
 	const isMessageShown = t6;
 	let t7;
-	if ($[26] !== controlId || $[27] !== description || $[28] !== isBare) {
+	if ($[27] !== controlId || $[28] !== description || $[29] !== isBare) {
 		t7 = controlId && !isBare && hasFieldContent(description) ? getFieldDescriptionId(controlId) : void 0;
-		$[26] = controlId;
-		$[27] = description;
-		$[28] = isBare;
-		$[29] = t7;
-	} else t7 = $[29];
+		$[27] = controlId;
+		$[28] = description;
+		$[29] = isBare;
+		$[30] = t7;
+	} else t7 = $[30];
 	const descriptionId = t7;
 	let t8;
-	if ($[30] !== controlId || $[31] !== isMessageShown) {
+	if ($[31] !== controlId || $[32] !== isMessageShown) {
 		t8 = controlId && isMessageShown ? getFieldMessageId(controlId) : void 0;
-		$[30] = controlId;
-		$[31] = isMessageShown;
-		$[32] = t8;
-	} else t8 = $[32];
+		$[31] = controlId;
+		$[32] = isMessageShown;
+		$[33] = t8;
+	} else t8 = $[33];
 	const messageId = t8;
 	useFieldTextId(descriptionId);
 	useFieldTextId(messageId);
 	if (isBare) {
 		let t9;
-		if ($[33] !== hasLabel || $[34] !== label || $[35] !== labelProps || $[36] !== optionalNote) {
+		if ($[34] !== hasLabel || $[35] !== label || $[36] !== labelProps || $[37] !== labelRef || $[38] !== optionalNote) {
 			t9 = hasLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxs(_Label, {
+				ref: labelRef,
 				...labelProps,
 				children: [label, optionalNote ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", optionalNote] }) : null]
 			}) }) : null;
-			$[33] = hasLabel;
-			$[34] = label;
-			$[35] = labelProps;
-			$[36] = optionalNote;
-			$[37] = t9;
-		} else t9 = $[37];
+			$[34] = hasLabel;
+			$[35] = label;
+			$[36] = labelProps;
+			$[37] = labelRef;
+			$[38] = optionalNote;
+			$[39] = t9;
+		} else t9 = $[39];
 		let t10;
-		if ($[38] !== Component || $[39] !== children || $[40] !== t9) {
+		if ($[40] !== Component || $[41] !== children || $[42] !== t9) {
 			t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				t9,
 				Component,
 				children
 			] });
-			$[38] = Component;
-			$[39] = children;
-			$[40] = t9;
-			$[41] = t10;
-		} else t10 = $[41];
+			$[40] = Component;
+			$[41] = children;
+			$[42] = t9;
+			$[43] = t10;
+		} else t10 = $[43];
 		return t10;
 	}
 	let t9;
-	if ($[42] !== description || $[43] !== descriptionId) {
+	if ($[44] !== description || $[45] !== descriptionId) {
 		t9 = () => {
 			if (!hasFieldContent(description)) return null;
 			return /* @__PURE__ */ jsx(DescriptionElement, {
@@ -252,82 +252,82 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
 			});
 		};
-		$[42] = description;
-		$[43] = descriptionId;
-		$[44] = t9;
-	} else t9 = $[44];
+		$[44] = description;
+		$[45] = descriptionId;
+		$[46] = t9;
+	} else t9 = $[46];
 	const createDescriptionComponent = t9;
 	const isDescriptionBesideInput = hasLabel && (labelPosition === "side" || labelPosition === "split");
 	let t10;
-	if ($[45] !== createDescriptionComponent || $[46] !== isDescriptionBesideInput) {
+	if ($[47] !== createDescriptionComponent || $[48] !== isDescriptionBesideInput) {
 		t10 = isDescriptionBesideInput ? createDescriptionComponent() : null;
-		$[45] = createDescriptionComponent;
-		$[46] = isDescriptionBesideInput;
-		$[47] = t10;
-	} else t10 = $[47];
+		$[47] = createDescriptionComponent;
+		$[48] = isDescriptionBesideInput;
+		$[49] = t10;
+	} else t10 = $[49];
 	const descriptionForLabel = t10;
 	let t11;
-	if ($[48] !== createDescriptionComponent || $[49] !== isDescriptionBesideInput) {
+	if ($[50] !== createDescriptionComponent || $[51] !== isDescriptionBesideInput) {
 		t11 = !isDescriptionBesideInput ? createDescriptionComponent() : null;
-		$[48] = createDescriptionComponent;
-		$[49] = isDescriptionBesideInput;
-		$[50] = t11;
-	} else t11 = $[50];
+		$[50] = createDescriptionComponent;
+		$[51] = isDescriptionBesideInput;
+		$[52] = t11;
+	} else t11 = $[52];
 	const descriptionForInput = t11;
 	const t12 = hasLabel && labelPosition === "side";
 	const t13 = hasLabel && labelPosition === "split";
 	let t14;
-	if ($[51] !== description) {
+	if ($[53] !== description) {
 		t14 = hasFieldContent(description);
-		$[51] = description;
-		$[52] = t14;
-	} else t14 = $[52];
+		$[53] = description;
+		$[54] = t14;
+	} else t14 = $[54];
 	let t15;
-	if ($[53] !== isInvalid || $[54] !== isValid) {
+	if ($[55] !== isInvalid || $[56] !== isValid) {
 		t15 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[53] = isInvalid;
-		$[54] = isValid;
-		$[55] = t15;
-	} else t15 = $[55];
+		$[55] = isInvalid;
+		$[56] = isValid;
+		$[57] = t15;
+	} else t15 = $[57];
 	let t16;
-	if ($[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15) {
+	if ($[58] !== t12 || $[59] !== t13 || $[60] !== t14 || $[61] !== t15) {
 		t16 = {
 			"has-sider": t12,
 			"has-split": t13,
 			"has-description": t14,
 			...t15
 		};
-		$[56] = t12;
-		$[57] = t13;
-		$[58] = t14;
-		$[59] = t15;
-		$[60] = t16;
-	} else t16 = $[60];
+		$[58] = t12;
+		$[59] = t13;
+		$[60] = t14;
+		$[61] = t15;
+		$[62] = t16;
+	} else t16 = $[62];
 	const mods = t16;
 	let t17;
-	if ($[61] !== fieldProps || $[62] !== styles) {
+	if ($[63] !== fieldProps || $[64] !== styles) {
 		t17 = styles ? mergeProps$1(fieldProps, { styles }) : fieldProps;
-		$[61] = fieldProps;
-		$[62] = styles;
-		$[63] = t17;
-	} else t17 = $[63];
+		$[63] = fieldProps;
+		$[64] = styles;
+		$[65] = t17;
+	} else t17 = $[65];
 	const mergedFieldProps = t17;
 	const t18 = as ?? "div";
 	let t19;
-	if ($[64] !== descriptionForLabel || $[65] !== labelComponent) {
+	if ($[66] !== descriptionForLabel || $[67] !== labelComponent) {
 		t19 = labelComponent ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "LabelArea",
 			children: [labelComponent, descriptionForLabel]
 		}) : null;
-		$[64] = descriptionForLabel;
-		$[65] = labelComponent;
-		$[66] = t19;
-	} else t19 = $[66];
+		$[66] = descriptionForLabel;
+		$[67] = labelComponent;
+		$[68] = t19;
+	} else t19 = $[68];
 	let t20;
-	if ($[67] !== displayMessage || $[68] !== isErrorMessage || $[69] !== isInvalid || $[70] !== isMessageShown || $[71] !== messageId || $[72] !== messageStyles || $[73] !== mods) {
+	if ($[69] !== displayMessage || $[70] !== isErrorMessage || $[71] !== isInvalid || $[72] !== isMessageShown || $[73] !== messageId || $[74] !== messageStyles || $[75] !== mods) {
 		t20 = isMessageShown && /* @__PURE__ */ jsx(MessageElement, {
 			id: messageId,
 			mods: {
@@ -338,17 +338,17 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 			role: isErrorMessage || isInvalid ? "alert" : void 0,
 			children: displayMessage
 		});
-		$[67] = displayMessage;
-		$[68] = isErrorMessage;
-		$[69] = isInvalid;
-		$[70] = isMessageShown;
-		$[71] = messageId;
-		$[72] = messageStyles;
-		$[73] = mods;
-		$[74] = t20;
-	} else t20 = $[74];
+		$[69] = displayMessage;
+		$[70] = isErrorMessage;
+		$[71] = isInvalid;
+		$[72] = isMessageShown;
+		$[73] = messageId;
+		$[74] = messageStyles;
+		$[75] = mods;
+		$[76] = t20;
+	} else t20 = $[76];
 	let t21;
-	if ($[75] !== Component || $[76] !== descriptionForInput || $[77] !== t20) {
+	if ($[77] !== Component || $[78] !== descriptionForInput || $[79] !== t20) {
 		t21 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "InputArea",
 			children: [
@@ -357,13 +357,13 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				t20
 			]
 		});
-		$[75] = Component;
-		$[76] = descriptionForInput;
-		$[77] = t20;
-		$[78] = t21;
-	} else t21 = $[78];
+		$[77] = Component;
+		$[78] = descriptionForInput;
+		$[79] = t20;
+		$[80] = t21;
+	} else t21 = $[80];
 	let t22;
-	if ($[79] !== isHidden || $[80] !== mergedFieldProps || $[81] !== mods || $[82] !== ref || $[83] !== t18 || $[84] !== t19 || $[85] !== t21) {
+	if ($[81] !== isHidden || $[82] !== mergedFieldProps || $[83] !== mods || $[84] !== ref || $[85] !== t18 || $[86] !== t19 || $[87] !== t21) {
 		t22 = /* @__PURE__ */ jsxs(FieldElement, {
 			ref,
 			as: t18,
@@ -372,25 +372,25 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 			...mergedFieldProps,
 			children: [t19, t21]
 		});
-		$[79] = isHidden;
-		$[80] = mergedFieldProps;
-		$[81] = mods;
-		$[82] = ref;
-		$[83] = t18;
-		$[84] = t19;
-		$[85] = t21;
-		$[86] = t22;
-	} else t22 = $[86];
+		$[81] = isHidden;
+		$[82] = mergedFieldProps;
+		$[83] = mods;
+		$[84] = ref;
+		$[85] = t18;
+		$[86] = t19;
+		$[87] = t21;
+		$[88] = t22;
+	} else t22 = $[88];
 	let t23;
-	if ($[87] !== children || $[88] !== t22) {
+	if ($[89] !== children || $[90] !== t22) {
 		t23 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t22, children] });
-		$[87] = children;
-		$[88] = t22;
-		$[89] = t23;
-	} else t23 = $[89];
+		$[89] = children;
+		$[90] = t22;
+		$[91] = t23;
+	} else t23 = $[91];
 	return t23;
 });
-
 //#endregion
 export { FieldWrapper };
+
 //# sourceMappingURL=FieldWrapper.js.map

package/dist/components/form/FieldWrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["tasty","forwardRef","VisuallyHidden","useI18n","isDevEnv","mergeProps","wrapNodeIfPlain","InfoBadge","Text","Flex","Space","Label","NecessityIndicatorMark","warnAboutLegacyTooltip","getValidationMods","getFieldDescriptionId","getFieldMessageId","useFieldTextId","CubeFieldWrapperProps","ReactNode","hasFieldContent","content","FieldElement","qa","styles","display","width","gridColumns","gap","placeItems","placeContent","LabelArea","margin","InputArea","flow","gridColumn","displayName","MessageElement","preset","color","invalid","valid","disabled","textAlign","userSelect","DescriptionElement","LabelSuffixElement","FieldWrapper","props","ref","$","_c","as","labelPosition","t0","label","isBare","t1","extra","isRequired","isOptional","isDisabled","labelStyles","necessityIndicator","labelProps","fieldProps","message","messageStyles","description","errorMessage","Component","controlId","isInvalid","isValid","requiredMark","t2","labelTooltip","isHidden","labelSuffix","children","undefined","t","showRequiredMark","showOptionalNote","t3","optionalNote","t4","hasLabel","t5","labelComponent","displayMessage","isErrorMessage","t6","isMessageShown","t7","descriptionId","t8","messageId","t9","t10","createDescriptionComponent","isDescriptionBesideInput","descriptionForLabel","t11","descriptionForInput","t12","t13","t14","t15","t16","mods","t17","mergedFieldProps","t18","t19","t20","t21","t22","t23"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { warnAboutLegacyTooltip } from '../legacy-tooltip';\nimport { getValidationMods } from '../validation/index';\n\nimport {\n  getFieldDescriptionId,\n  getFieldMessageId,\n  useFieldTextId,\n} from './field-description';\nimport { CubeFieldWrapperProps } from './types';\n\nimport type { ReactNode } from 'react';\n\n/** Empty slot values suppress content; numeric zero is still text. */\nfunction hasFieldContent(content: ReactNode) {\n  return content != null && typeof content !== 'boolean' && content !== '';\n}\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (isDevEnv()) {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A flex box, not a block: in a block an inline-level suffix such as a `Badge`\n * or a `Tag` sits in a line box whose strut adds a pixel under it, so the label\n * row grew from 20px to 21px and its field stepped down out of line. Only a\n * single element is a direct flex item; mixed content is wrapped in a `<span>`,\n * because a flex box drops the whitespace between its items.\n */\nconst LabelSuffixElement = tasty({\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    isBare = false,\n    extra,\n    styles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    controlId,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\n\n  warnAboutLegacyTooltip(props);\n\n  // `requiredMark={false}` drops the required marker, but the field is still\n  // required — so the optional note has to keep losing to it rather than\n  // stepping into the gap and labelling a required field optional.\n  const showRequiredMark = !!requiredMark && !!isRequired;\n  const showOptionalNote = !isRequired && !!isOptional;\n\n  // The `aria-label` below is what the input is named by, so it shadows the\n  // label's own content — including the `(optional)` note, which is the only\n  // thing saying the field is optional. A required field needs no such help:\n  // `aria-required` on the input already announces it.\n  const optionalNote = showOptionalNote\n    ? t('form.optional', '(optional)')\n    : null;\n\n  const hasLabel = hasFieldContent(label);\n  const labelComponent = hasLabel ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={showRequiredMark}\n      isOptional={showOptionalNote}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={\n        typeof label === 'string'\n          ? optionalNote\n            ? `${label} ${optionalNote}`\n            : label\n          : undefined\n      }\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={showRequiredMark}\n              isOptional={showOptionalNote}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {labelTooltip ? <InfoBadge tooltip={labelTooltip} /> : null}\n\n          {labelSuffix ? (\n            <LabelSuffixElement>\n              {wrapNodeIfPlain(labelSuffix, () => (\n                <span>{labelSuffix}</span>\n              ))}\n            </LabelSuffixElement>\n          ) : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  const displayMessage = errorMessage !== undefined ? errorMessage : message;\n  const isErrorMessage = errorMessage !== undefined;\n  const isMessageShown =\n    !isBare && !isDisabled && hasFieldContent(displayMessage);\n\n  // An id only on what is actually rendered, registered for the control's\n  // `aria-describedby` — see `useFieldDescribedBy`.\n  const descriptionId =\n    controlId && !isBare && hasFieldContent(description)\n      ? getFieldDescriptionId(controlId)\n      : undefined;\n  const messageId =\n    controlId && isMessageShown ? getFieldMessageId(controlId) : undefined;\n\n  useFieldTextId(descriptionId);\n  useFieldTextId(messageId);\n\n  if (isBare) {\n    return (\n      <>\n        {hasLabel ? (\n          <VisuallyHidden>\n            <Label {...labelProps}>\n              {label}\n              {optionalNote ? <> {optionalNote}</> : null}\n            </Label>\n          </VisuallyHidden>\n        ) : null}\n        {Component}\n        {children}\n      </>\n    );\n  }\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!hasFieldContent(description)) return null;\n\n    return (\n      <DescriptionElement id={descriptionId} data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // A side or split label carries the description in its column. Without a\n  // label, that column is empty and the description would read as the label,\n  // so it goes under the input.\n  const isDescriptionBesideInput =\n    hasLabel && (labelPosition === 'side' || labelPosition === 'split');\n  const descriptionForLabel = isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n  const descriptionForInput = !isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n\n  const mods = {\n    'has-sider': hasLabel && labelPosition === 'side',\n    'has-split': hasLabel && labelPosition === 'split',\n    'has-description': hasFieldContent(description),\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {isMessageShown && (\n            <MessageElement\n              id={messageId}\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,SAASoB,gBAAgBC,SAAoB;AAC3C,QAAOA,WAAW,QAAQ,OAAOA,YAAY,aAAaA,YAAY;;AAGxE,MAAMC,eAAetB,MAAM;CACzBuB,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,OAAO;EACPC,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACDC,KAAK;EACLC,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACDC,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErBC,WAAW;GACTN,SAAS;GACTC,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACDM,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACZ;GACD;EAEDC,WAAW;GACTR,SAAS;GACTS,MAAM;GACNN,KAAK;GACLO,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACf;GACF;EACF;CACD,CAAC;AAEF,IAAI/B,UAAU,CACZkB,cAAac,cAAc;AAG7B,MAAMC,iBAAiBrC,MAAM;CAC3BuB,IAAI;CACJC,QAAQ;EACNc,QAAQ;EACRC,OAAO;GACL,IAAI;GACJC,SAAS;GACTC,OAAO;GACPC,UAAU;GACX;EACDC,WAAW;EACXC,YAAY;EACd;CACD,CAAC;AAEF,MAAMC,qBAAqB7C,MAAM;CAC/BuB,IAAI;CACJC,QAAQ;EACNc,QAAQ;EACRC,OAAO;EACPI,WAAW;EACXC,YAAY;EACd;CACD,CAAC;;;;;;;;AASF,MAAME,qBAAqB9C,MAAM,EAC/BwB,QAAQ;CACNC,SAAS;CACTI,YAAY;CACd,EACD,CAAC;;;;;AAMF,MAAakB,eAAe9C,WAAW,SAAA8C,aAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAIrC,MAAA,EAAAC,IAAAC,eAAAC,IAAAC,OAAAC,QAAAC,IAAAC,OAAAlC,QAAAmC,YAAAC,YAAAC,YAAAC,aAAAC,oBAAAC,YAAAC,YAAAC,SAAAC,eAAAC,aAAAC,cAAAC,WAAAC,WAAAC,WAAAC,SAAAC,cAAAC,IAAAC,cAAAC,UAAAC,aAAAC,aA2BI/B;CAzBF,MAAAK,gBAAAC,OAAA0B,SAAA,QAAA1B;CAEA,MAAAE,SAAAC,OAAAuB,SAAA,QAAAvB;CAkBA,MAAAiB,eAAAC,OAAAK,SAAA,OAAAL;CAOF,MAAA,EAAAM,MAAc9E,SAAS;AAEvBU,wBAAuBmC,MAAM;CAK7B,MAAAkC,mBAAyB,CAAC,CAACR,gBAAF,CAAmB,CAACf;CAC7C,MAAAwB,mBAAyB,CAACxB,cAAD,CAAgB,CAACC;CAAW,IAAAwB;AAAA,KAAAlC,EAAA,OAAAiC,oBAAAjC,EAAA,OAAA+B,GAAA;AAMhCG,OAAAD,mBACjBF,EAAE,iBAAiB,aACf,GAFa;AAEb/B,IAAA,KAAAiC;AAAAjC,IAAA,KAAA+B;AAAA/B,IAAA,KAAAkC;OAAAA,MAAAlC,EAAA;CAFR,MAAAmC,eAAqBD;CAEZ,IAAAE;AAAA,KAAApC,EAAA,OAAAK,OAAA;AAEQ+B,OAAAlE,gBAAgBmC,MAAM;AAAAL,IAAA,KAAAK;AAAAL,IAAA,KAAAoC;OAAAA,MAAApC,EAAA;CAAvC,MAAAqC,WAAiBD;CAAuB,IAAAE;AAAA,KAAAtC,EAAA,OAAAE,MAAAF,EAAA,OAAAQ,SAAAR,EAAA,OAAAqC,YAAArC,EAAA,OAAAW,cAAAX,EAAA,OAAAsB,aAAAtB,EAAA,QAAAuB,WAAAvB,EAAA,QAAAK,SAAAL,EAAA,QAAAG,iBAAAH,EAAA,QAAAc,cAAAd,EAAA,QAAAY,eAAAZ,EAAA,QAAA4B,eAAA5B,EAAA,QAAA0B,gBAAA1B,EAAA,QAAAa,sBAAAb,EAAA,QAAAmC,gBAAAnC,EAAA,QAAAiC,oBAAAjC,EAAA,QAAAgC,kBAAA;AACjBM,OAAAD,WACrB,oBAAC;GACK,IAAAnC,OAAO,UAAP,QAAA;GACIU,QAAAA;GACOT;GACH6B,YAAAA;GACAC,YAAAA;GACAtB;GACQE;GACTS;GACFC;GAEP,cAAA,OAAOlB,UAAU,WACb8B,eAAA,GACK9B,MAAK,GAAI8B,iBADd9B,QADJyB;GAIa,GAEXhB;aAEJ,qBAAC;IAAkB,cAAA;IAA+B,OAAA;eAChD,qBAAC;KAAiB,YAAA;KAAa,KAAA;;MAC7B,qBAAA,oBACGT,OAMD,oBAAC;OACa2B,YAAAA;OACAC,YAAAA;OACQpB;QAExB,IAEC;MAAAa,eAAe,oBAAC,aAAmBA,SAAAA,eAAuB,GAA1D;MAEAE,cACC,oBAAC,gCACExE,gBAAgBwE,mBACf,oBAAA,oBAAOA,cACR,CAAA,GAEG,GANP;;MASF,EAAApB,SAAS,oBAAC;KAAY,QAAA;eAAMA;MAAY;KAE7C;IACM,GAlDe;AAkDfR,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;AAAAR,IAAA,KAAAqC;AAAArC,IAAA,KAAAW;AAAAX,IAAA,KAAAsB;AAAAtB,IAAA,MAAAuB;AAAAvB,IAAA,MAAAK;AAAAL,IAAA,MAAAG;AAAAH,IAAA,MAAAc;AAAAd,IAAA,MAAAY;AAAAZ,IAAA,MAAA4B;AAAA5B,IAAA,MAAA0B;AAAA1B,IAAA,MAAAa;AAAAb,IAAA,MAAAmC;AAAAnC,IAAA,MAAAiC;AAAAjC,IAAA,MAAAgC;AAAAhC,IAAA,MAAAsC;OAAAA,MAAAtC,EAAA;CAlDR,MAAAuC,iBAAuBD;CAoDvB,MAAAE,iBAAuBrB,iBAAiBW,SAAjBX,eAAAH;CACvB,MAAAyB,iBAAuBtB,iBAAiBW;CAAU,IAAAY;AAAA,KAAA1C,EAAA,QAAAwC,kBAAAxC,EAAA,QAAAM,UAAAN,EAAA,QAAAW,YAAA;AAEhD+B,OAAA,CAACpC,UAAD,CAAYK,cAAczC,gBAAgBsE,eAAe;AAAAxC,IAAA,MAAAwC;AAAAxC,IAAA,MAAAM;AAAAN,IAAA,MAAAW;AAAAX,IAAA,MAAA0C;OAAAA,MAAA1C,EAAA;CAD3D,MAAA2C,iBACED;CAA0D,IAAAE;AAAA,KAAA5C,EAAA,QAAAqB,aAAArB,EAAA,QAAAkB,eAAAlB,EAAA,QAAAM,QAAA;AAK1DsC,OAAAvB,aAAA,CAAcf,UAAUpC,gBAAgBgD,YAE3B,GADTrD,sBAAsBwD,UACb,GAFbS;AAEa9B,IAAA,MAAAqB;AAAArB,IAAA,MAAAkB;AAAAlB,IAAA,MAAAM;AAAAN,IAAA,MAAA4C;OAAAA,MAAA5C,EAAA;CAHf,MAAA6C,gBACED;CAEc,IAAAE;AAAA,KAAA9C,EAAA,QAAAqB,aAAArB,EAAA,QAAA2C,gBAAA;AAEdG,OAAAzB,aAAAsB,iBAA8B7E,kBAAkBuD,UAAsB,GAAtES;AAAsE9B,IAAA,MAAAqB;AAAArB,IAAA,MAAA2C;AAAA3C,IAAA,MAAA8C;OAAAA,MAAA9C,EAAA;CADxE,MAAA+C,YACED;AAEF/E,gBAAe8E,cAAc;AAC7B9E,gBAAegF,UAAU;AAEzB,KAAIzC,QAAM;EAAA,IAAA0C;AAAA,MAAAhD,EAAA,QAAAqC,YAAArC,EAAA,QAAAK,SAAAL,EAAA,QAAAc,cAAAd,EAAA,QAAAmC,cAAA;AAGHa,QAAAX,WACC,oBAAC,4BACC,qBAAC;IAAK,GAAKvB;eACRT,OACA8B,eAAA,8CAAiB,KAAEA,gBAAuB,GAA1C;KAEL,GACM,GAPP;AAOOnC,KAAA,MAAAqC;AAAArC,KAAA,MAAAK;AAAAL,KAAA,MAAAc;AAAAd,KAAA,MAAAmC;AAAAnC,KAAA,MAAAgD;QAAAA,MAAAhD,EAAA;EAAA,IAAAiD;AAAA,MAAAjD,EAAA,QAAAoB,aAAApB,EAAA,QAAA6B,YAAA7B,EAAA,QAAAgD,IAAA;AARVC,SAAA;IACGD;IAQA5B;IACAS;OACA;AAAA7B,KAAA,MAAAoB;AAAApB,KAAA,MAAA6B;AAAA7B,KAAA,MAAAgD;AAAAhD,KAAA,MAAAiD;QAAAA,OAAAjD,EAAA;AAAA,SAXHiD;;CAaH,IAAAD;AAAA,KAAAhD,EAAA,QAAAkB,eAAAlB,EAAA,QAAA6C,eAAA;AAGkCG,aAAA;AACjC,OAAI,CAAC9E,gBAAgBgD,YAAY,CAAA,QAAS;AAAK,UAG7C,oBAAC;IAAuB2B,IAAAA;IAA4B,gBAAA;cACjDzF,gBAAgB8D,mBACf,oBAAA,oBAAOA,cACR,CAAA;KACkB;;AAExBlB,IAAA,MAAAkB;AAAAlB,IAAA,MAAA6C;AAAA7C,IAAA,MAAAgD;OAAAA,MAAAhD,EAAA;CAVD,MAAAkD,6BAAmCF;CAenC,MAAAG,2BACEd,aAAalC,kBAAkB,UAAUA,kBAAkB;CAAS,IAAA8C;AAAA,KAAAjD,EAAA,QAAAkD,8BAAAlD,EAAA,QAAAmD,0BAAA;AAC1CF,QAAAE,2BACxBD,4BACI,GAFoB;AAEpBlD,IAAA,MAAAkD;AAAAlD,IAAA,MAAAmD;AAAAnD,IAAA,MAAAiD;OAAAA,OAAAjD,EAAA;CAFR,MAAAoD,sBAA4BH;CAEnB,IAAAI;AAAA,KAAArD,EAAA,QAAAkD,8BAAAlD,EAAA,QAAAmD,0BAAA;AACmBE,QAAA,CAACF,2BACzBD,4BACI,GAFoB;AAEpBlD,IAAA,MAAAkD;AAAAlD,IAAA,MAAAmD;AAAAnD,IAAA,MAAAqD;OAAAA,OAAArD,EAAA;CAFR,MAAAsD,sBAA4BD;CAKb,MAAAE,MAAAlB,YAAYlC,kBAAkB;CAC9B,MAAAqD,MAAAnB,YAAYlC,kBAAkB;CAAO,IAAAsD;AAAA,KAAAzD,EAAA,QAAAkB,aAAA;AAC/BuC,QAAAvF,gBAAgBgD,YAAY;AAAAlB,IAAA,MAAAkB;AAAAlB,IAAA,MAAAyD;OAAAA,OAAAzD,EAAA;CAAA,IAAA0D;AAAA,KAAA1D,EAAA,QAAAsB,aAAAtB,EAAA,QAAAuB,SAAA;AAC5CmC,QAAA9F,kBAAkB;GAAA0D;GAAAC;GAAsB,CAAC;AAAAvB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAuB;AAAAvB,IAAA,MAAA0D;OAAAA,OAAA1D,EAAA;CAAA,IAAA2D;AAAA,KAAA3D,EAAA,QAAAuD,OAAAvD,EAAA,QAAAwD,OAAAxD,EAAA,QAAAyD,OAAAzD,EAAA,QAAA0D,KAAA;AAJjCC,QAAA;GAAA,aACEJ;GAAoC,aACpCC;GAAqC,mBAC/BC;GAA4B,GAC5CC;GACJ;AAAA1D,IAAA,MAAAuD;AAAAvD,IAAA,MAAAwD;AAAAxD,IAAA,MAAAyD;AAAAzD,IAAA,MAAA0D;AAAA1D,IAAA,MAAA2D;OAAAA,OAAA3D,EAAA;CALD,MAAA4D,OAAaD;CAKX,IAAAE;AAAA,KAAA7D,EAAA,QAAAe,cAAAf,EAAA,QAAA1B,QAAA;AAGuBuF,QAAAvF,SACrBnB,aAAW4D,YAAY,EAAAzC,QACd,CAAC,GAFWyC;AAEXf,IAAA,MAAAe;AAAAf,IAAA,MAAA1B;AAAA0B,IAAA,MAAA6D;OAAAA,OAAA7D,EAAA;CAFd,MAAA8D,mBAAyBD;CAQf,MAAAE,MAAA7D,MAAA;CAAW,IAAA8D;AAAA,KAAAhE,EAAA,QAAAoD,uBAAApD,EAAA,QAAAuC,gBAAA;AAKdyB,QAAAzB,iBACC,qBAAA;GAAkB,gBAAA;cACfA,gBACAa;IAEG,GALP;AAKOpD,IAAA,MAAAoD;AAAApD,IAAA,MAAAuC;AAAAvC,IAAA,MAAAgE;OAAAA,OAAAhE,EAAA;CAAA,IAAAiE;AAAA,KAAAjE,EAAA,QAAAwC,kBAAAxC,EAAA,QAAAyC,kBAAAzC,EAAA,QAAAsB,aAAAtB,EAAA,QAAA2C,kBAAA3C,EAAA,QAAA+C,aAAA/C,EAAA,QAAAiB,iBAAAjB,EAAA,QAAA4D,MAAA;AAILK,QAAAtB,kBACC,oBAAC;GACKI,IAAAA;GACE,MAAA;IAAA,GACDa;IAAItE,SAEEmD,kBAAA,CAAmB,CAACnB;IAC/B;GACQL,QAAAA;GACF,MAAAwB,kBAAAnB,YAAA,UAAAQ;aAELU;IAEJ;AAAAxC,IAAA,MAAAwC;AAAAxC,IAAA,MAAAyC;AAAAzC,IAAA,MAAAsB;AAAAtB,IAAA,MAAA2C;AAAA3C,IAAA,MAAA+C;AAAA/C,IAAA,MAAAiB;AAAAjB,IAAA,MAAA4D;AAAA5D,IAAA,MAAAiE;OAAAA,OAAAjE,EAAA;CAAA,IAAAkE;AAAA,KAAAlE,EAAA,QAAAoB,aAAApB,EAAA,QAAAsD,uBAAAtD,EAAA,QAAAiE,KAAA;AAhBHC,QAAA,qBAAA;GAAkB,gBAAA;;IACf9C;IACAkC;IACAW;;IAcG;AAAAjE,IAAA,MAAAoB;AAAApB,IAAA,MAAAsD;AAAAtD,IAAA,MAAAiE;AAAAjE,IAAA,MAAAkE;OAAAA,OAAAlE,EAAA;CAAA,IAAAmE;AAAA,KAAAnE,EAAA,QAAA2B,YAAA3B,EAAA,QAAA8D,oBAAA9D,EAAA,QAAA4D,QAAA5D,EAAA,QAAAD,OAAAC,EAAA,QAAA+D,OAAA/D,EAAA,QAAAgE,OAAAhE,EAAA,QAAAkE,KAAA;AA9BRC,QAAA,qBAAC;GACMpE;GACD,IAAAgE;GACEH;GACIjC;GAAQ,GACdmC;cAEHE,KAMDE;IAkBa;AAAAlE,IAAA,MAAA2B;AAAA3B,IAAA,MAAA8D;AAAA9D,IAAA,MAAA4D;AAAA5D,IAAA,MAAAD;AAAAC,IAAA,MAAA+D;AAAA/D,IAAA,MAAAgE;AAAAhE,IAAA,MAAAkE;AAAAlE,IAAA,MAAAmE;OAAAA,OAAAnE,EAAA;CAAA,IAAAoE;AAAA,KAAApE,EAAA,QAAA6B,YAAA7B,EAAA,QAAAmE,KAAA;AAhCjBC,QAAA,8CACED,KAgCCtC,YACA;AAAA7B,IAAA,MAAA6B;AAAA7B,IAAA,MAAAmE;AAAAnE,IAAA,MAAAoE;OAAAA,OAAApE,EAAA;AAAA,QAlCHoE;EAoCF"}
+{"version":3,"file":"FieldWrapper.js","names":["tasty","forwardRef","VisuallyHidden","useI18n","isDevEnv","mergeProps","wrapNodeIfPlain","InfoBadge","Text","Flex","Space","hasFieldContent","Label","NecessityIndicatorMark","warnAboutLegacyTooltip","getValidationMods","getFieldDescriptionId","getFieldMessageId","useFieldTextId","CubeFieldWrapperProps","FieldElement","qa","styles","display","width","gridColumns","gap","placeItems","placeContent","LabelArea","margin","InputArea","flow","gridColumn","displayName","MessageElement","preset","color","invalid","valid","disabled","textAlign","userSelect","DescriptionElement","LabelSuffixElement","FieldWrapper","props","ref","$","_c","as","labelPosition","t0","label","isBare","t1","extra","isRequired","isOptional","isDisabled","labelStyles","necessityIndicator","labelProps","labelRef","fieldProps","message","messageStyles","description","errorMessage","Component","controlId","isInvalid","isValid","requiredMark","t2","labelTooltip","isHidden","labelSuffix","children","undefined","t","showRequiredMark","showOptionalNote","t3","optionalNote","t4","hasLabel","t5","labelComponent","displayMessage","isErrorMessage","t6","isMessageShown","t7","descriptionId","t8","messageId","t9","t10","createDescriptionComponent","isDescriptionBesideInput","descriptionForLabel","t11","descriptionForInput","t12","t13","t14","t15","t16","mods","t17","mergedFieldProps","t18","t19","t20","t21","t22","t23","_c","Label","Text","mergeProps"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { hasFieldContent } from '../field-chrome';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { warnAboutLegacyTooltip } from '../legacy-tooltip';\nimport { getValidationMods } from '../validation/index';\n\nimport {\n  getFieldDescriptionId,\n  getFieldMessageId,\n  useFieldTextId,\n} from './field-description';\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (isDevEnv()) {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A flex box, not a block: in a block an inline-level suffix such as a `Badge`\n * or a `Tag` sits in a line box whose strut adds a pixel under it, so the label\n * row grew from 20px to 21px and its field stepped down out of line. Only a\n * single element is a direct flex item; mixed content is wrapped in a `<span>`,\n * because a flex box drops the whitespace between its items.\n */\nconst LabelSuffixElement = tasty({\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    isBare = false,\n    extra,\n    styles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    labelRef,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    controlId,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\n\n  warnAboutLegacyTooltip(props);\n\n  // `requiredMark={false}` drops the required marker, but the field is still\n  // required — so the optional note has to keep losing to it rather than\n  // stepping into the gap and labelling a required field optional.\n  const showRequiredMark = !!requiredMark && !!isRequired;\n  const showOptionalNote = !isRequired && !!isOptional;\n\n  // The `aria-label` below is what the input is named by, so it shadows the\n  // label's own content — including the `(optional)` note, which is the only\n  // thing saying the field is optional. A required field needs no such help:\n  // `aria-required` on the input already announces it.\n  const optionalNote = showOptionalNote\n    ? t('form.optional', '(optional)')\n    : null;\n\n  const hasLabel = hasFieldContent(label);\n  const labelComponent = hasLabel ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={showRequiredMark}\n      isOptional={showOptionalNote}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={\n        typeof label === 'string'\n          ? optionalNote\n            ? `${label} ${optionalNote}`\n            : label\n          : undefined\n      }\n      // Before `labelProps`, so a `ref` passed there still wins.\n      ref={labelRef}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={showRequiredMark}\n              isOptional={showOptionalNote}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {labelTooltip ? <InfoBadge tooltip={labelTooltip} /> : null}\n\n          {labelSuffix ? (\n            <LabelSuffixElement>\n              {wrapNodeIfPlain(labelSuffix, () => (\n                <span>{labelSuffix}</span>\n              ))}\n            </LabelSuffixElement>\n          ) : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  const displayMessage = errorMessage !== undefined ? errorMessage : message;\n  const isErrorMessage = errorMessage !== undefined;\n  const isMessageShown =\n    !isBare && !isDisabled && hasFieldContent(displayMessage);\n\n  // An id only on what is actually rendered, registered for the control's\n  // `aria-describedby` — see `useFieldDescribedBy`.\n  const descriptionId =\n    controlId && !isBare && hasFieldContent(description)\n      ? getFieldDescriptionId(controlId)\n      : undefined;\n  const messageId =\n    controlId && isMessageShown ? getFieldMessageId(controlId) : undefined;\n\n  useFieldTextId(descriptionId);\n  useFieldTextId(messageId);\n\n  if (isBare) {\n    return (\n      <>\n        {hasLabel ? (\n          <VisuallyHidden>\n            <Label ref={labelRef} {...labelProps}>\n              {label}\n              {optionalNote ? <> {optionalNote}</> : null}\n            </Label>\n          </VisuallyHidden>\n        ) : null}\n        {Component}\n        {children}\n      </>\n    );\n  }\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!hasFieldContent(description)) return null;\n\n    return (\n      <DescriptionElement id={descriptionId} data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // A side or split label carries the description in its column. Without a\n  // label, that column is empty and the description would read as the label,\n  // so it goes under the input.\n  const isDescriptionBesideInput =\n    hasLabel && (labelPosition === 'side' || labelPosition === 'split');\n  const descriptionForLabel = isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n  const descriptionForInput = !isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n\n  const mods = {\n    'has-sider': hasLabel && labelPosition === 'side',\n    'has-split': hasLabel && labelPosition === 'split',\n    'has-description': hasFieldContent(description),\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {isMessageShown && (\n            <MessageElement\n              id={messageId}\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/form/FieldWrapper/field-description.js

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";
-
 //#region src/components/form/FieldWrapper/field-description.ts
 /**
 * The ids `FieldWrapper` gives a control's description and message. Both are
@@ -96,7 +95,7 @@ function _temp2() {
 function _temp(id) {
 	return mountedIds.has(id);
 }
-
 //#endregion
 export { getFieldDescriptionId, getFieldMessageId, useFieldDescribedBy, useFieldTextId };
+
 //# sourceMappingURL=field-description.js.map

package/dist/components/form/FieldWrapper/field-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-description.js","names":["useSyncExternalStore","useLayoutEffect","getFieldDescriptionId","controlId","getFieldMessageId","mountedIds","Map","listeners","Set","subscribe","listener","add","delete","notify","forEach","useFieldTextId","id","$","_c","t0","t1","set","get","count","useFieldDescribedBy","describedBy","filter","_temp","join","rendered","_temp2","Boolean","undefined","has"],"sources":["../../../../src/components/form/FieldWrapper/field-description.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * The ids `FieldWrapper` gives a control's description and message. Both are\n * derived from the control's own id, so the wrapper and the control agree on\n * them without handing anything to each other.\n */\nexport function getFieldDescriptionId(controlId: string) {\n  return `${controlId}-description`;\n}\n\nexport function getFieldMessageId(controlId: string) {\n  return `${controlId}-message`;\n}\n\n/**\n * How many mounted elements carry each id. Counted, not a set, so a remount\n * under Strict Mode — or two fields that share an id — never drops one still\n * on the page.\n */\nconst mountedIds = new Map<string, number>();\nconst listeners = new Set<() => void>();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Registers `id` as rendered while the calling `FieldWrapper` shows the\n * element that carries it. `undefined` registers nothing.\n */\nexport function useFieldTextId(id: string | undefined) {\n  useLayoutEffect(() => {\n    if (!id) return;\n\n    mountedIds.set(id, (mountedIds.get(id) ?? 0) + 1);\n    notify();\n\n    return () => {\n      const count = (mountedIds.get(id) ?? 1) - 1;\n\n      if (count) mountedIds.set(id, count);\n      else mountedIds.delete(id);\n\n      notify();\n    };\n  }, [id]);\n}\n\n/**\n * The control's `aria-describedby`: the caller's own ids, then the field\n * description and message `FieldWrapper` has rendered.\n *\n * Taken from what the wrapper registered rather than predicted from props,\n * as React Aria's `useSlotId` does, because whether `FieldWrapper` renders\n * either one depends on more than the control's props: `isBare`,\n * a disabled field hiding its message, `TagInput` putting a\n * rejection in at wrap time. Without the reference, a screen reader announces\n * the field as invalid and never says why.\n */\nexport function useFieldDescribedBy(\n  controlId: string | undefined,\n  describedBy: string | undefined,\n): string | undefined {\n  const rendered = useSyncExternalStore(\n    subscribe,\n    () =>\n      controlId\n        ? [getFieldDescriptionId(controlId), getFieldMessageId(controlId)]\n            .filter((id) => mountedIds.has(id))\n            .join(' ')\n        : '',\n    // The wrapper registers after it mounts, so nothing is linked yet.\n    () => '',\n  );\n\n  return [describedBy, rendered].filter(Boolean).join(' ') || undefined;\n}\n"],"mappings":";;;;;;;;;;;AASA,SAAgBE,sBAAsBC,WAAmB;AACvD,QAAO,GAAGA,UAAS;;AAGrB,SAAgBC,kBAAkBD,WAAmB;AACnD,QAAO,GAAGA,UAAS;;;;;;;AAQrB,MAAME,6BAAa,IAAIC,KAAqB;AAC5C,MAAMC,4BAAY,IAAIC,KAAiB;AAEvC,SAASC,UAAUC,UAAsB;AACvCH,WAAUI,IAAID,SAAS;AAEvB,cAAa;AACXH,YAAUK,OAAOF,SAAS;;;AAI9B,SAASG,SAAS;AAChBN,WAAUO,SAASJ,aAAaA,UAAU,CAAC;;;;;;AAO7C,SAAOK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAH,EAAA,OAAAD,IAAA;AACWG,aAAA;AACd,OAAI,CAACH,GAAE;AAEPX,cAAUgB,IAAKL,KAAKX,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B,EAAE;AACjDH,WAAQ;AAAA,gBAED;IACL,MAAAU,SAAelB,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B;AAE1C,QAAIO,MAAOlB,YAAUgB,IAAKL,IAAIO,MAAM;QAC/BlB,YAAUO,OAAQI,GAAG;AAE1BH,YAAQ;;;AAETO,OAAA,CAACJ,GAAG;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;QAAA;AAAAD,OAAAF,EAAA;AAAAG,OAAAH,EAAA;;AAdPhB,mBAAgBkB,IAcbC,GAAK;;;;;;;;;;;;;AAcV,SAAOI,oBAAArB,WAAAsB,aAAA;CAAA,MAAAR,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAd,WAAA;AAMHgB,aACEhB,YACI,CAACD,sBAAsBC,UAAU,EAAEC,kBAAkBD,UAAU,CAAC,CAAAuB,OACtDC,MAA2B,CAAAC,KAC7B,IACN,GAJN;AAIMX,IAAA,KAAAd;AAAAc,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAPV,MAAAY,WAAiB7B,qBACfS,WACAU,IAOAW,OACD;CAAC,IAAAV;AAAA,KAAAH,EAAA,OAAAQ,eAAAR,EAAA,OAAAY,UAAA;AAEKT,OAAA,CAACK,aAAaI,SAAS,CAAAH,OAAQK,QAAQ,CAAAH,KAAM,IAAiB,IAA9DI;AAA8Df,IAAA,KAAAQ;AAAAR,IAAA,KAAAY;AAAAZ,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA9DG;;AAhBF,SAAAU,SAAA;AAAA,QAaG;;AAbH,SAAAH,MAAAX,IAAA;AAAA,QASqBX,WAAU4B,IAAKjB,GAAG"}
+{"version":3,"file":"field-description.js","names":["useSyncExternalStore","useLayoutEffect","getFieldDescriptionId","controlId","getFieldMessageId","mountedIds","Map","listeners","Set","subscribe","listener","add","delete","notify","forEach","useFieldTextId","id","$","_c","t0","t1","set","get","count","useFieldDescribedBy","describedBy","filter","_temp","join","rendered","_temp2","Boolean","undefined","has","_c"],"sources":["../../../../src/components/form/FieldWrapper/field-description.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * The ids `FieldWrapper` gives a control's description and message. Both are\n * derived from the control's own id, so the wrapper and the control agree on\n * them without handing anything to each other.\n */\nexport function getFieldDescriptionId(controlId: string) {\n  return `${controlId}-description`;\n}\n\nexport function getFieldMessageId(controlId: string) {\n  return `${controlId}-message`;\n}\n\n/**\n * How many mounted elements carry each id. Counted, not a set, so a remount\n * under Strict Mode — or two fields that share an id — never drops one still\n * on the page.\n */\nconst mountedIds = new Map<string, number>();\nconst listeners = new Set<() => void>();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Registers `id` as rendered while the calling `FieldWrapper` shows the\n * element that carries it. `undefined` registers nothing.\n */\nexport function useFieldTextId(id: string | undefined) {\n  useLayoutEffect(() => {\n    if (!id) return;\n\n    mountedIds.set(id, (mountedIds.get(id) ?? 0) + 1);\n    notify();\n\n    return () => {\n      const count = (mountedIds.get(id) ?? 1) - 1;\n\n      if (count) mountedIds.set(id, count);\n      else mountedIds.delete(id);\n\n      notify();\n    };\n  }, [id]);\n}\n\n/**\n * The control's `aria-describedby`: the caller's own ids, then the field\n * description and message `FieldWrapper` has rendered.\n *\n * Taken from what the wrapper registered rather than predicted from props,\n * as React Aria's `useSlotId` does, because whether `FieldWrapper` renders\n * either one depends on more than the control's props: `isBare`,\n * a disabled field hiding its message, `TagInput` putting a\n * rejection in at wrap time. Without the reference, a screen reader announces\n * the field as invalid and never says why.\n */\nexport function useFieldDescribedBy(\n  controlId: string | undefined,\n  describedBy: string | undefined,\n): string | undefined {\n  const rendered = useSyncExternalStore(\n    subscribe,\n    () =>\n      controlId\n        ? [getFieldDescriptionId(controlId), getFieldMessageId(controlId)]\n            .filter((id) => mountedIds.has(id))\n            .join(' ')\n        : '',\n    // The wrapper registers after it mounts, so nothing is linked yet.\n    () => '',\n  );\n\n  return [describedBy, rendered].filter(Boolean).join(' ') || undefined;\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgBE,sBAAsBC,WAAmB;CACvD,OAAO,GAAGA,UAAS;AACrB;AAEA,SAAgBC,kBAAkBD,WAAmB;CACnD,OAAO,GAAGA,UAAS;AACrB;;;;;;AAOA,MAAME,6BAAa,IAAIC,IAAoB;AAC3C,MAAMC,4BAAY,IAAIC,IAAgB;AAEtC,SAASC,UAAUC,UAAsB;CACvCH,UAAUI,IAAID,QAAQ;CAEtB,aAAa;EACXH,UAAUK,OAAOF,QAAQ;CAC3B;AACF;AAEA,SAASG,SAAS;CAChBN,UAAUO,SAASJ,aAAaA,SAAS,CAAC;AAC5C;;;;;AAMA,SAAOK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EACWG,WAAA;GACd,IAAI,CAACH,IAAE;GAEPX,WAAUgB,IAAKL,KAAKX,WAAUiB,IAAKN,EAAO,KAAtB,KAA2B,CAAC;GAChDH,OAAO;GAAC,aAED;IACL,MAAAU,SAAelB,WAAUiB,IAAKN,EAAO,KAAtB,KAA2B;IAE1C,IAAIO,OAAOlB,WAAUgB,IAAKL,IAAIO,KAAK;SAC9BlB,WAAUO,OAAQI,EAAE;IAEzBH,OAAO;GAAC;EACT;EACAO,KAAA,CAACJ,EAAE;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAdPhB,kBAAgBkB,IAcbC,EAAI;AAAC;;;;;;;;;;;;AAcV,SAAOI,oBAAArB,WAAAsB,aAAA;CAAA,MAAAR,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAd,WAAA;EAMHgB,WACEhB,YACI,CAACD,sBAAsBC,SAAS,GAAGC,kBAAkBD,SAAS,CAAC,CAAC,CAAAuB,OACtDC,KAA0B,CAAC,CAAAC,KAC7B,GACP,IAJL;EAIMX,EAAA,KAAAd;EAAAc,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAPV,MAAAY,WAAiB7B,qBACfS,WACAU,IAOAW,MACF;CAAE,IAAAV;CAAA,IAAAH,EAAA,OAAAQ,eAAAR,EAAA,OAAAY,UAAA;EAEKT,KAAA,CAACK,aAAaI,QAAQ,CAAC,CAAAH,OAAQK,OAAO,CAAC,CAAAH,KAAM,GAAgB,KAA7DI,KAAAA;EAA8Df,EAAA,KAAAQ;EAAAR,EAAA,KAAAY;EAAAZ,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAA9DG;AAA8D;AAhBhE,SAAAU,SAAA;CAAA,OAaG;AAAE;AAbL,SAAAH,MAAAX,IAAA;CAAA,OASqBX,WAAU4B,IAAKjB,EAAE;AAAC"}

package/dist/components/form/FieldWrapper/index.d.ts

@@ -1,3 +1,4 @@
 
 import { FieldWrapper } from "./FieldWrapper.js";
-import { CubeFieldWrapperProps } from "./types.js";
+import { CubeFieldWrapperProps } from "./types.js";
+export { CubeFieldWrapperProps, FieldWrapper };

package/dist/components/form/FieldWrapper/types.d.ts

@@ -4,23 +4,29 @@ import { LabelPosition, NecessityIndicator, ValidationProps } from "../../../sha
 import "../../../shared/index.js";
 import { CubeLabelProps } from "../Label.js";
 import { Styles } from "@tenphi/tasty";
-import { ReactElement, ReactNode } from "react";
-
+import { ReactElement, ReactNode, Ref } from "react";
 //#region src/components/form/FieldWrapper/types.d.ts
-type CubeFieldWrapperProps = ValidationProps & {
+export type CubeFieldWrapperProps = ValidationProps & {
   as?: keyof HTMLElementTagNameMap;
-  styles?: Styles; /** Whether the input is required */
-  isRequired?: boolean; /** Whether the input is optional. Marks the label with an `(optional)` note. */
-  isOptional?: boolean; /** Whether the input is disabled */
+  styles?: Styles;
+  /** Whether the input is required */
+  isRequired?: boolean;
+  /** Whether the input is optional. Marks the label with an `(optional)` note. */
+  isOptional?: boolean;
+  /** Whether the input is disabled */
   isDisabled?: boolean;
   fieldProps?: Props;
-  isHidden?: boolean; /** Omit field layout and text slots while preserving the accessible label. */
+  isHidden?: boolean;
+  /** Omit field layout and text slots while preserving the accessible label. */
   isBare?: boolean;
   label?: ReactNode;
   labelPosition?: LabelPosition;
   labelSuffix?: ReactNode;
   labelStyles?: Styles;
-  labelProps?: CubeLabelProps; /** The description for the field. It will be placed below the label */
+  labelProps?: CubeLabelProps;
+  /** The label's element, visible or visually hidden. */
+  labelRef?: Ref<HTMLElement>;
+  /** The description for the field. It will be placed below the label */
   description?: ReactNode;
   requiredMark?: boolean;
   labelTooltip?: ReactNode;
@@ -30,17 +36,19 @@ type CubeFieldWrapperProps = ValidationProps & {
    * @deprecated Use `errorMessage` for error messages and `description` for field descriptions instead.
    * Fallback text used only when errorMessage is undefined.
    */
-  message?: string | ReactNode; /** Styles for the message */
-  messageStyles?: Styles; /** Error text. Explicit empty content suppresses the message fallback. */
+  message?: string | ReactNode;
+  /** Styles for the message */
+  messageStyles?: Styles;
+  /** Error text. Explicit empty content suppresses the message fallback. */
   errorMessage?: string | ReactNode;
   Component?: ReactElement;
   /**
    * @internal The id of the control in `Component`, which its description and
    * message ids derive from. Set by `wrapWithField`.
    */
-  controlId?: string; /** Custom components that should go outside the field and should not be visible by default. For example: Dialogs */
+  controlId?: string;
+  /** Custom components that should go outside the field and should not be visible by default. For example: Dialogs */
   children?: ReactNode;
 };
 //#endregion
-export { CubeFieldWrapperProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/form/Form/Field.d.ts

@@ -4,11 +4,9 @@ import "../../../shared/index.js";
 import { FieldTypes } from "./types.js";
 import { CubeFormInstance } from "./use-form.js";
 import { Styles } from "@tenphi/tasty";
-import * as react from "react";
 import { ReactElement } from "react";
-
 //#region src/components/form/Form/Field.d.ts
-interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
+export interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
   /** Legacy field name; nested fields use dot notation. */
   name?: string;
   /** The initial value of the input. */
@@ -18,7 +16,6 @@ interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
   /** The form instance */
   form?: CubeFormInstance<T>;
 }
-declare function Field<T extends FieldTypes>(props: CubeFieldProps<T>): react.JSX.Element | null;
+export declare function Field<T extends FieldTypes>(props: CubeFieldProps<T>): import("react").JSX.Element | null;
 //#endregion
-export { Field };
 //# sourceMappingURL=Field.d.ts.map