@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/components/tag/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 //#region src/components/tag/index.tsx
 const styles = { base: {
 	kGNEyG: "x6s0dn4",
@@ -78,16 +79,58 @@ const outlinedTones = {
 * A short, read-only label attached to something else. It renders a `<span>`
 * and takes no interaction — for a label that can be selected, reach for Chip.
 */
-function Tag({ render, tone = "neutral", variant = "filled", ...props$1 }) {
-	const toned = variant === "filled" ? filledTones[tone] : outlinedTones[tone];
-	return useRender({
-		defaultTagName: "span",
-		props: {
-			...props$1,
-			...mergeStyles(props(styles.base, toned), props$1)
-		},
-		render
-	});
+function Tag(t0) {
+	const $ = c(13);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		const { render: t5, tone: t6, variant: t7, ...props$1 } = t0;
+		render = t5;
+		const tone = t6 === void 0 ? "neutral" : t6;
+		const toned = (t7 === void 0 ? "filled" : t7) === "filled" ? filledTones[tone] : outlinedTones[tone];
+		t4 = useRender;
+		t3 = "span";
+		t1 = props$1;
+		t2 = mergeStyles(props(styles.base, toned), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
+			render
+		};
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Tag as default };

package/dist/components/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tag/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// A tag states something about what it sits beside — a count, a status, a\n// version — and is never itself the thing you press. That is the whole line\n// between this and Chip: a chip is a two-state button announcing itself\n// through `aria-pressed`, so reaching for one to render a read-only label\n// puts a control in the accessibility tree that nothing can operate.\n//\n// Both variants carry a 1px border and `filled` makes it transparent rather\n// than dropping it, so a tag is the same size either way. Emphasising one\n// tag in a row otherwise nudges its neighbours by a pixel each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a tag is mostly numeric — counts, versions, ports — and a\n// stack of them down a list wobbles on proportional digits. Text that happens\n// to carry no digits is unaffected.\n//\n// No Material Design page draws a tag; the badges page's large badge is the\n// nearest, a label-small count on an 8dp corner, and that is the type and the\n// corner here. A tag stands beside a word rather than on an icon, so it takes\n// the padding and 1dp rule above in place of the badge's 16dp box, and the\n// container roles in place of the badge's error pair, since it names a state\n// rather than flagging one.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k8WAf4: \"xpg5a72\",\n    kg3NbH: \"xn60lsn\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for\n// the notable-but-not-good-or-bad case.\nconst filledTones = {\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1rrhr5q\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// here for an on-colour to be legible against — the page is the background —\n// so the container roles would read as washed out.\nconst outlinedTones = {\n  negative: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1xdi1zw\",\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xm76mbg\",\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1uajy3w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TagProps = RenderComponentProps<'span'> & {\n  /**\n   * Which colour role the tag carries. `neutral` states without ranking;\n   * the other three read as good, bad, or worth noticing.\n   * @default 'neutral'\n   */\n  tone?: TagTone;\n  /**\n   * How much weight the tag pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the page, for a tag that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  variant?: TagVariant;\n};\ntype TagTone = 'negative' | 'neutral' | 'positive' | 'primary';\ntype TagVariant = 'filled' | 'outlined';\n\n/**\n * A short, read-only label attached to something else. It renders a `<span>`\n * and takes no interaction — for a label that can be selected, reach for Chip.\n */\nfunction Tag({\n  render,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: TagProps) {\n  const toned = variant === 'filled' ? filledTones[tone] : outlinedTones[tone];\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, toned), props)\n    },\n    render\n  });\n}\nexport type { TagProps };\nexport default Tag;"],"mappings":";;;;AA4BA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAMA,MAAM,cAAc;CAClB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,gBAAgB;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;AAuBA,SAAS,IAAI,EACX,QACA,OAAO,WACP,UAAU,UACV,GAAG,WACQ;CACX,MAAM,QAAQ,YAAY,WAAW,YAAY,QAAQ,cAAc;CACvE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,KAAK,GAAG,OAAK;EACxD;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","styles","base","kGNEyG","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","kGuDYH","kcqcaj","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","khDVqt","$$css","filledTones","negative","kWkggS","kVAM5u","kMwMTN","neutral","positive","primary","outlinedTones","TagProps","tone","TagTone","variant","TagVariant","Tag","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","toned","defaultTagName"],"sources":["../../../src/components/tag/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// A tag states something about what it sits beside — a count, a status, a\n// version — and is never itself the thing you press. That is the whole line\n// between this and Chip: a chip is a two-state button announcing itself\n// through `aria-pressed`, so reaching for one to render a read-only label\n// puts a control in the accessibility tree that nothing can operate.\n//\n// Both variants carry a 1px border and `filled` makes it transparent rather\n// than dropping it, so a tag is the same size either way. Emphasising one\n// tag in a row otherwise nudges its neighbours by a pixel each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a tag is mostly numeric — counts, versions, ports — and a\n// stack of them down a list wobbles on proportional digits. Text that happens\n// to carry no digits is unaffected.\n//\n// No Material Design page draws a tag; the badges page's large badge is the\n// nearest, a label-small count on an 8dp corner, and that is the type and the\n// corner here. A tag stands beside a word rather than on an icon, so it takes\n// the padding and 1dp rule above in place of the badge's 16dp box, and the\n// container roles in place of the badge's error pair, since it names a state\n// rather than flagging one.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k8WAf4: \"xpg5a72\",\n    kg3NbH: \"xn60lsn\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for\n// the notable-but-not-good-or-bad case.\nconst filledTones = {\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1rrhr5q\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// here for an on-colour to be legible against — the page is the background —\n// so the container roles would read as washed out.\nconst outlinedTones = {\n  negative: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1xdi1zw\",\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xm76mbg\",\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1uajy3w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TagProps = RenderComponentProps<'span'> & {\n  /**\n   * Which colour role the tag carries. `neutral` states without ranking;\n   * the other three read as good, bad, or worth noticing.\n   * @default 'neutral'\n   */\n  tone?: TagTone;\n  /**\n   * How much weight the tag pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the page, for a tag that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  variant?: TagVariant;\n};\ntype TagTone = 'negative' | 'neutral' | 'positive' | 'primary';\ntype TagVariant = 'filled' | 'outlined';\n\n/**\n * A short, read-only label attached to something else. It renders a `<span>`\n * and takes no interaction — for a label that can be selected, reach for Chip.\n */\nfunction Tag({\n  render,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: TagProps) {\n  const toned = variant === 'filled' ? filledTones[tone] : outlinedTones[tone];\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, toned), props)\n    },\n    render\n  });\n}\nexport type { TagProps };\nexport default Tag;"],"mappings":";;;;;AA4BA,MAAMQ,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;CACPC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AAMA,MAAMC,cAAc;CAClBC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;AAMA,MAAMS,gBAAgB;CACpBP,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,UAAU;EACRJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,SAAS;EACPL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;AACF;;;;;AAuBA,SAAAe,IAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAa,MAAA,EAAAG,QAAAK,IAAAb,MAAAc,IAAAZ,SAAAa,IAAA,GAAAC,YAAAX;EAAAG,SAAAK;EAEX,MAAAb,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EAIA,MAAAI,SAHAH,OAAAE,KAAAA,IAAA,WAAAF,QAG0B,WAAWzB,YAAYU,QAAQF,cAAcE;EAChEpC,KAAAA;EACW+C,KAAA;EAEXK,KAAAA;EACAN,KAAA7C,YAAYH,MAAaQ,OAAMC,MAAO+C,KAAK,GAAGF,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFlDG,KAAA;GAAA,GACFG;GAAK,GACLN;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EALcC,KAAA;GAAAK,gBACCR;GAAMK,OACfH;GAGNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPM1C,GAAUkD,EAOhB;AAAC"}

package/dist/components/text/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 //#region src/components/text/index.tsx
 const styles = {
 	base: {
@@ -159,15 +160,59 @@ const tones = {
 		$$css: true
 	}
 };
-function Text({ block = false, render, tone = "default", variant = "bodyMedium", ...props$1 }) {
-	return useRender({
-		defaultTagName: block ? "p" : "span",
-		props: {
-			...props$1,
-			...mergeStyles(props(styles.base, styles[variant], tones[tone]), props$1)
-		},
-		render
-	});
+function Text(t0) {
+	const $ = c(13);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		const { block: t5, render: t6, tone: t7, variant: t8, ...props$1 } = t0;
+		render = t6;
+		const block = t5 === void 0 ? false : t5;
+		const tone = t7 === void 0 ? "default" : t7;
+		const variant = t8 === void 0 ? "bodyMedium" : t8;
+		t4 = useRender;
+		t3 = block ? "p" : "span";
+		t1 = props$1;
+		t2 = mergeStyles(props(styles.base, styles[variant], tones[tone]), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
+			render
+		};
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Text as default };

package/dist/components/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = RenderComponentProps<'span'> & {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":";;;;AAoBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AA2BA,SAAS,KAAK,EACZ,QAAQ,OACR,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CACZ,OAAO,UAAU;EAIf,gBAAgB,QAAQ,MAAM;EAC9B,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK,GAAG,OAAK;EAC/E;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kogj98","$$css","bodyLarge","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","tones","default","kMwMTN","error","inherit","muted","negative","positive","primary","TextProps","block","tone","variant","Text","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName"],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = RenderComponentProps<'span'> & {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":"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"}

package/dist/components/text-area/index.js

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldMessage, FieldTextArea } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TextField } from "react-aria-components";
 //#region src/components/text-area/index.tsx
@@ -16,30 +17,84 @@ import { TextField } from "react-aria-components";
 * shared with every other field; this component is what React Aria's
 * `TextField` puts around them.
 */
-function TextArea$1({ autosize = true, characterCount = false, description, error, floatingLabel = true, isDisabled = false, label, rows = 3, variant = "filled", ...props$1 }) {
+function TextArea$1(t0) {
+	const $ = c(24);
+	const { autosize: t1, characterCount: t2, description, error, floatingLabel: t3, isDisabled: t4, label, rows: t5, variant: t6, ...props$1 } = t0;
+	const autosize = t1 === void 0 ? true : t1;
+	const characterCount = t2 === void 0 ? false : t2;
+	const floatingLabel = t3 === void 0 ? true : t3;
+	const isDisabled = t4 === void 0 ? false : t4;
+	const rows = t5 === void 0 ? 3 : t5;
+	const variant = t6 === void 0 ? "filled" : t6;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(TextField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = TextField;
+	let t7;
+	if ($[0] !== error) {
+		t7 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t7;
+	} else t7 = $[1];
+	const t8 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t9;
+	if ($[2] !== autosize || $[3] !== rows) {
+		t9 = /* @__PURE__ */ jsx(FieldTextArea, {
+			autosize,
+			rows
+		});
+		$[2] = autosize;
+		$[3] = rows;
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] !== floatingLabel || $[6] !== label || $[7] !== t9 || $[8] !== variant) {
+		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			label,
 			multiline: true,
 			variant,
-			children: /* @__PURE__ */ jsx(FieldTextArea, {
-				autosize,
-				rows
-			})
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t9
+		});
+		$[5] = floatingLabel;
+		$[6] = label;
+		$[7] = t9;
+		$[8] = variant;
+		$[9] = t10;
+	} else t10 = $[9];
+	let t11;
+	if ($[10] !== characterCount || $[11] !== description || $[12] !== error || $[13] !== props$1.maxLength) {
+		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			description,
 			error,
 			maxLength: props$1.maxLength
-		})]
-	});
+		});
+		$[10] = characterCount;
+		$[11] = description;
+		$[12] = error;
+		$[13] = props$1.maxLength;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== T0 || $[16] !== isDisabled || $[17] !== props$1 || $[18] !== t10 || $[19] !== t11 || $[20] !== t7 || $[21] !== t8 || $[22] !== validationBehavior) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t7,
+			validationBehavior,
+			...props$1,
+			...t8,
+			children: [t10, t11]
+		});
+		$[15] = T0;
+		$[16] = isDisabled;
+		$[17] = props$1;
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = validationBehavior;
+		$[23] = t12;
+	} else t12 = $[23];
+	return t12;
 }
 //#endregion
 export { TextArea$1 as default };

package/dist/components/text-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, underline and message as TextField, holding a\n// text area rather than an input. The page gives the box 56dp by default\n// and 8dp of padding above and below, with the label vertically centred\n// while the field is empty; a box holding more than one line keeps the\n// padding and grows, which is the chrome's `multiline` box. The page draws\n// no resize handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  rows = 3,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} multiline variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":";;;;;;;;;;;;;;;;;;AAkFA,SAAS,WAAS,EAChB,WAAW,MACX,iBAAiB,OACjB,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,OAAO,GACP,UAAU,UACV,GAAG,WACa;CAChB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,WAAD;EAA0B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAArL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAAsB;GAAO,WAAA;GAAmB;GACvE,UAAA,oBAAC,eAAD;IAAyB;IAAgB;GAAK,CAAA;EACtC,CAAA,GACV,oBAAC,cAAD;GAA8B;GAA6B;GAAoB;GAAO,WAAW,QAAM;EAAU,CAAA,CACrG;;AAClB"}
+{"version":3,"file":"index.js","names":["TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","autosize","characterCount","description","error","floatingLabel","label","rows","variant","Omit","TextArea","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","t11","maxLength","t12"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, underline and message as TextField, holding a\n// text area rather than an input. The page gives the box 56dp by default\n// and 8dp of padding above and below, with the label vertically centred\n// while the field is empty; a box holding more than one line keeps the\n// padding and grows, which is the chrome's `multiline` box. The page draws\n// no resize handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  rows = 3,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} multiline variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":";;;;;;;;;;;;;;;;;;;AAkFA,SAAAuB,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAZ,UAAAa,IAAAZ,gBAAAa,IAAAZ,aAAAC,OAAAC,eAAAW,IAAAC,YAAAC,IAAAZ,OAAAC,MAAAY,IAAAX,SAAAY,IAAA,GAAAC,YAAAV;CAChB,MAAAV,WAAAa,OAAAQ,KAAAA,IAAA,OAAAR;CACA,MAAAZ,iBAAAa,OAAAO,KAAAA,IAAA,QAAAP;CAGA,MAAAV,gBAAAW,OAAAM,KAAAA,IAAA,OAAAN;CACA,MAAAC,aAAAC,OAAAI,KAAAA,IAAA,QAAAJ;CAEA,MAAAX,OAAAY,OAAAG,KAAAA,IAAA,IAAAH;CACA,MAAAX,UAAAY,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BzB,2BAA2B;CAC9C,MAAA0B,KAAAjC;CAAY,IAAAkC;CAAA,IAAAb,EAAA,OAAAR,OAAA;EAAoCqB,KAAA5B,YAAYO,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAyD,MAAAc,KAAA3B,oBAAoBV,MAAaO,YAAW+B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAhB,EAAA,OAAAX,YAAAW,EAAA,OAAAL,MAAA;EAEvLqB,KAAA,oBAAC,eAAD;GAAyB3B;GAAgBM;EAAI,CAAA;EAAIK,EAAA,KAAAX;EAAAW,EAAA,KAAAL;EAAAK,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAgB,MAAAhB,EAAA,OAAAJ,SAAA;EADnDqB,MAAA,oBAAC,UAAD;GAAyBxB;GAAsBC;GAAO,WAAA;GAAmBE;GACvEoB,UAAAA;EADO,CAAA;EAEEhB,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAgB;EAAAhB,EAAA,KAAAJ;EAAAI,EAAA,KAAAiB;CAAA,OAAAA,MAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAV,kBAAAU,EAAA,QAAAT,eAAAS,EAAA,QAAAR,SAAAQ,EAAA,QAAAS,QAAAU,WAAA;EACXD,MAAA,oBAAC,cAAD;GAA8B5B;GAA6BC;GAAoBC;GAAkB,WAAAiB,QAAKU;EAAU,CAAA;EAAInB,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAS,QAAAU;EAAAnB,EAAA,MAAAkB;CAAA,OAAAA,MAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAY,MAAAZ,EAAA,QAAAK,cAAAL,EAAA,QAAAS,WAAAT,EAAA,QAAAiB,OAAAjB,EAAA,QAAAkB,OAAAlB,EAAA,QAAAa,MAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAW,oBAAA;EAJjHS,MAAA,qBAAC,IAAD;GAA0Bf;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA5H,UAAA,CACHG,KAGAC,GAJgB;;EAKHlB,EAAA,MAAAY;EAAAZ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAW;EAAAX,EAAA,MAAAoB;CAAA,OAAAA,MAAApB,EAAA;CAAA,OALVoB;AAKU"}

package/dist/components/text-field/index.js

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TextField } from "react-aria-components";
 //#region src/components/text-field/index.tsx
@@ -21,32 +22,88 @@ import { TextField } from "react-aria-components";
 * shared with every other field; this component is what React Aria's
 * `TextField` puts around them.
 */
-function TextField$1({ characterCount = false, description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, numeric = false, prefix, suffix, trailingIcon, variant = "filled", ...props$1 }) {
+function TextField$1(t0) {
+	const $ = c(27);
+	const { characterCount: t1, description, error, floatingLabel: t2, isDisabled: t3, label, leadingIcon, numeric: t4, prefix, suffix, trailingIcon, variant: t5, ...props$1 } = t0;
+	const characterCount = t1 === void 0 ? false : t1;
+	const floatingLabel = t2 === void 0 ? true : t2;
+	const isDisabled = t3 === void 0 ? false : t3;
+	const numeric = t4 === void 0 ? false : t4;
+	const variant = t5 === void 0 ? "filled" : t5;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(TextField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = TextField;
+	let t6;
+	if ($[0] !== error) {
+		t6 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t6;
+	} else t6 = $[1];
+	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t8;
+	if ($[2] !== numeric || $[3] !== prefix || $[4] !== suffix) {
+		t8 = /* @__PURE__ */ jsx(FieldInput, {
+			numeric,
+			prefix,
+			suffix
+		});
+		$[2] = numeric;
+		$[3] = prefix;
+		$[4] = suffix;
+		$[5] = t8;
+	} else t8 = $[5];
+	let t9;
+	if ($[6] !== floatingLabel || $[7] !== label || $[8] !== leadingIcon || $[9] !== t8 || $[10] !== trailingIcon || $[11] !== variant) {
+		t9 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
 			variant,
-			children: /* @__PURE__ */ jsx(FieldInput, {
-				numeric,
-				prefix,
-				suffix
-			})
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t8
+		});
+		$[6] = floatingLabel;
+		$[7] = label;
+		$[8] = leadingIcon;
+		$[9] = t8;
+		$[10] = trailingIcon;
+		$[11] = variant;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== characterCount || $[14] !== description || $[15] !== error || $[16] !== props$1.maxLength) {
+		t10 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			description,
 			error,
 			maxLength: props$1.maxLength
-		})]
-	});
+		});
+		$[13] = characterCount;
+		$[14] = description;
+		$[15] = error;
+		$[16] = props$1.maxLength;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== T0 || $[19] !== isDisabled || $[20] !== props$1 || $[21] !== t10 || $[22] !== t6 || $[23] !== t7 || $[24] !== t9 || $[25] !== validationBehavior) {
+		t11 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t6,
+			validationBehavior,
+			...props$1,
+			...t7,
+			children: [t9, t10]
+		});
+		$[18] = T0;
+		$[19] = isDisabled;
+		$[20] = props$1;
+		$[21] = t10;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t9;
+		$[25] = validationBehavior;
+		$[26] = t11;
+	} else t11 = $[26];
+	return t11;
 }
 //#endregion
 export { TextField$1 as default };

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2FA,SAAS,YAAU,EACjB,iBAAiB,OACjB,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,UAAU,OACV,QACA,QACA,cACA,UAAU,UACV,GAAG,WACc;CACjB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,WAAD;EAA0B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAArL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAAsB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC3G,UAAA,oBAAC,YAAD;IAAqB;IAAiB;IAAgB;GAAO,CAAA;EACrD,CAAA,GACV,oBAAC,cAAD;GAA8B;GAA6B;GAAoB;GAAO,WAAW,QAAM;EAAU,CAAA,CACrG;;AAClB"}
+{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","characterCount","description","error","floatingLabel","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","Omit","t0","$","_c","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","t10","maxLength","t11"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2FA,SAAAI,YAAAsB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAd,gBAAAe,IAAAd,aAAAC,OAAAC,eAAAa,IAAAC,YAAAC,IAAAd,OAAAC,aAAAC,SAAAa,IAAAZ,QAAAC,QAAAC,cAAAC,SAAAU,IAAA,GAAAC,YAAAT;CACjB,MAAAZ,iBAAAe,OAAAO,KAAAA,IAAA,QAAAP;CAGA,MAAAZ,gBAAAa,OAAAM,KAAAA,IAAA,OAAAN;CACA,MAAAC,aAAAC,OAAAI,KAAAA,IAAA,QAAAJ;CAGA,MAAAZ,UAAAa,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAT,UAAAU,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BzB,2BAA2B;CAC9C,MAAA0B,KAAAjC;CAAY,IAAAkC;CAAA,IAAAZ,EAAA,OAAAX,OAAA;EAAoCuB,KAAA5B,YAAYK,KAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAyD,MAAAa,KAAA3B,oBAAoBV,MAAaO,YAAW+B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAf,EAAA,OAAAP,WAAAO,EAAA,OAAAN,UAAAM,EAAA,OAAAL,QAAA;EAEvLoB,KAAA,oBAAC,YAAD;GAAqBtB;GAAiBC;GAAgBC;EAAM,CAAA;EAAIK,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAV,iBAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,eAAAQ,EAAA,OAAAe,MAAAf,EAAA,QAAAJ,gBAAAI,EAAA,QAAAH,SAAA;EADlEmB,KAAA,oBAAC,UAAD;GAAyB1B;GAAsBC;GAAgBC,SAAAA;GAAuBI,UAAAA;GAAuBC;GAC3GkB,UAAAA;EADO,CAAA;EAEEf,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAe;EAAAf,EAAA,MAAAJ;EAAAI,EAAA,MAAAH;EAAAG,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAb,kBAAAa,EAAA,QAAAZ,eAAAY,EAAA,QAAAX,SAAAW,EAAA,QAAAQ,QAAAU,WAAA;EACXD,MAAA,oBAAC,cAAD;GAA8B9B;GAA6BC;GAAoBC;GAAkB,WAAAmB,QAAKU;EAAU,CAAA;EAAIlB,EAAA,MAAAb;EAAAa,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAQ,QAAAU;EAAAlB,EAAA,MAAAiB;CAAA,OAAAA,MAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAW,MAAAX,EAAA,QAAAI,cAAAJ,EAAA,QAAAQ,WAAAR,EAAA,QAAAiB,OAAAjB,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,MAAAb,EAAA,QAAAgB,MAAAhB,EAAA,QAAAU,oBAAA;EAJjHS,MAAA,qBAAC,IAAD;GAA0Bf;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA5H,UAAA,CACHG,IAGAC,GAJgB;;EAKHjB,EAAA,MAAAW;EAAAX,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAiB;EAAAjB,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAgB;EAAAhB,EAAA,MAAAU;EAAAV,EAAA,MAAAmB;CAAA,OAAAA,MAAAnB,EAAA;CAAA,OALVmB;AAKU"}