@kanso-labs/react-native-kanso-ui 0.8.0 → 0.9.0

package/dist/fab/index.js

@@ -0,0 +1,147 @@
+import { themedStyles } from "../theme/styles.js";
+import { palettesOf } from "../button/palettes.js";
+import { StyleSheet } from "react-native";
+//#region src/fab/index.ts
+const MEDIUM_SIZE = 80;
+const MEDIUM_CORNER = 20;
+/** The icon each size draws, from the pages' size token sets. */
+const FAB_ICON_SIZES = {
+	lg: 28,
+	md: 24,
+	xl: 36
+};
+/** The type role the extended form sets its label in at each size. */
+const EXTENDED_FAB_ROLES = {
+	lg: "titleLarge",
+	md: "titleMedium",
+	xl: "headlineSmall"
+};
+/**
+* Each size's corner, apart from its size so the press feedback can clip to
+* the same one.
+*/
+const fabCornersOf = themedStyles(({ radii }) => StyleSheet.create({
+	lg: { borderRadius: MEDIUM_CORNER },
+	md: { borderRadius: radii.lg },
+	xl: { borderRadius: radii.xl }
+}));
+/** The FAB on its own: a square of the size's edge. */
+const fabSizesOf = themedStyles(({ sizing }) => StyleSheet.create({
+	lg: {
+		height: MEDIUM_SIZE,
+		width: MEDIUM_SIZE
+	},
+	md: {
+		height: sizing.controlLg,
+		width: sizing.controlLg
+	},
+	xl: {
+		height: sizing.controlXl,
+		width: sizing.controlXl
+	}
+}));
+/**
+* The extended form: the size's height, with its padding at either end and
+* the gap before the label. The 26dp and 28dp paddings fall between steps of
+* the spacing scale and are written out, as on web.
+*
+* The height is a floor rather than a fixed size, so a label the device's
+* text size enlarges grows the button rather than spilling out of it, which
+* web's fixed height has no need to allow for.
+*/
+const extendedFabSizesOf = themedStyles(({ sizing, spacing }) => StyleSheet.create({
+	lg: {
+		columnGap: spacing.md,
+		minHeight: MEDIUM_SIZE,
+		paddingHorizontal: 26
+	},
+	md: {
+		columnGap: spacing.sm,
+		minHeight: sizing.controlLg,
+		paddingHorizontal: spacing.lg
+	},
+	xl: {
+		columnGap: spacing.lg,
+		minHeight: sizing.controlXl,
+		paddingHorizontal: 28
+	}
+}));
+/**
+* The six colour pairs, by variant and tone: each tone's container pair, and
+* the tone itself. Plain colours, for FabMenu's FAB, which eases from one
+* pair to another as its menu opens.
+*/
+const fabColorsOf = themedStyles(({ colors }) => ({
+	filled: {
+		primary: {
+			container: colors.primary,
+			content: colors.onPrimary
+		},
+		secondary: {
+			container: colors.secondary,
+			content: colors.onSecondary
+		},
+		tertiary: {
+			container: colors.tertiary,
+			content: colors.onTertiary
+		}
+	},
+	tonal: {
+		primary: {
+			container: colors.primaryContainer,
+			content: colors.onPrimaryContainer
+		},
+		secondary: {
+			container: colors.secondaryContainer,
+			content: colors.onSecondaryContainer
+		},
+		tertiary: {
+			container: colors.tertiaryContainer,
+			content: colors.onTertiaryContainer
+		}
+	}
+}));
+/**
+* The six colour pairs as the palettes a button draws, and the one disabled
+* container every button shares: on-surface at the two disabled opacities,
+* as src/button/palettes.ts draws it.
+*/
+const fabPalettesOf = themedStyles((theme) => {
+	const pairs = fabColorsOf(theme);
+	return {
+		disabled: palettesOf(theme).filledDisabled,
+		filled: palettesFor(pairs.filled),
+		tonal: palettesFor(pairs.tonal)
+	};
+});
+const fabShadowsOf = themedStyles(({ shadows }) => StyleSheet.create({
+	elevation3: { boxShadow: shadows.elevation3 },
+	elevation4: { boxShadow: shadows.elevation4 }
+}));
+/**
+* The shadow a FAB draws in its state: level 3 at rest and while pressed,
+* level 4 under a hovering pointer, and none while disabled, since a shadow
+* says a control is there to press.
+*/
+function fabShadowOf({ hovered, pressed }, isDisabled, theme) {
+	if (isDisabled) return;
+	return fabShadowsOf(theme)[hovered && !pressed ? "elevation4" : "elevation3"];
+}
+function palette({ container, content }) {
+	return {
+		container: { backgroundColor: container },
+		content,
+		label: { color: content }
+	};
+}
+function palettesFor(pairs) {
+	return {
+		primary: palette(pairs.primary),
+		secondary: palette(pairs.secondary),
+		tertiary: palette(pairs.tertiary)
+	};
+}
+//#endregion
+export { EXTENDED_FAB_ROLES, FAB_ICON_SIZES, extendedFabSizesOf, fabColorsOf, fabCornersOf, fabPalettesOf, fabShadowOf, fabSizesOf };
+
+//# sourceMappingURL=index.js.map

package/dist/fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ViewStyle","StyleSheet","Palette","ResolvedTheme","TypeRole","palettesOf","themedStyles","FabSize","FabTone","FabVariant","MEDIUM_SIZE","MEDIUM_CORNER","FAB_ICON_SIZES","Readonly","Record","lg","md","xl","EXTENDED_FAB_ROLES","fabCornersOf","radii","create","borderRadius","fabSizesOf","sizing","height","width","controlLg","controlXl","extendedFabSizesOf","spacing","columnGap","minHeight","paddingHorizontal","sm","FabColors","container","content","fabColorsOf","colors","filled","primary","onPrimary","secondary","onSecondary","tertiary","onTertiary","tonal","primaryContainer","onPrimaryContainer","secondaryContainer","onSecondaryContainer","tertiaryContainer","onTertiaryContainer","fabPalettesOf","theme","disabled","pairs","filledDisabled","palettesFor","fabShadowsOf","shadows","elevation3","boxShadow","elevation4","fabShadowOf","hovered","pressed","isDisabled","undefined","palette","backgroundColor","label","color"],"sources":["../../src/fab/index.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native'\n\nimport { StyleSheet } from 'react-native'\n\nimport type { Palette } from '../button/palettes'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { TypeRole } from '../typography/roles'\n\nimport { palettesOf } from '../button/palettes'\nimport { themedStyles } from '../theme/styles'\n\n// The FAB's metrics and colours, shared by Fab and by the FAB that opens\n// FabMenu, which is the same button until its menu opens, as web's\n// src/fab/styles.ts is shared. Apart from either component, and outside\n// `src/components`, which holds the public components alone. Fab's header\n// gives the values and where they come from.\n\n/**\n * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at 80dp\n * and `xl` the large FAB at 96dp.\n */\ntype FabSize = 'lg' | 'md' | 'xl'\n\n/** The colour role a FAB is drawn in. */\ntype FabTone = 'primary' | 'secondary' | 'tertiary'\n\n/**\n * `tonal` draws the tone's container pair, the pages' default; `filled`\n * draws the tone itself.\n */\ntype FabVariant = 'filled' | 'tonal'\n\n// The medium FAB's container and corner, between the steps of the control\n// and radius scales, so written out as web writes them.\nconst MEDIUM_SIZE = 80\nconst MEDIUM_CORNER = 20\n\n/** The icon each size draws, from the pages' size token sets. */\nconst FAB_ICON_SIZES: Readonly<Record<FabSize, number>> = {\n  lg: 28,\n  md: 24,\n  xl: 36,\n}\n\n/** The type role the extended form sets its label in at each size. */\nconst EXTENDED_FAB_ROLES: Readonly<Record<FabSize, TypeRole>> = {\n  lg: 'titleLarge',\n  md: 'titleMedium',\n  xl: 'headlineSmall',\n}\n\n/**\n * Each size's corner, apart from its size so the press feedback can clip to\n * the same one.\n */\nconst fabCornersOf = themedStyles(({ radii }) =>\n  StyleSheet.create({\n    lg: { borderRadius: MEDIUM_CORNER },\n    md: { borderRadius: radii.lg },\n    xl: { borderRadius: radii.xl },\n  }),\n)\n\n/** The FAB on its own: a square of the size's edge. */\nconst fabSizesOf = themedStyles(({ sizing }) =>\n  StyleSheet.create({\n    lg: { height: MEDIUM_SIZE, width: MEDIUM_SIZE },\n    md: { height: sizing.controlLg, width: sizing.controlLg },\n    xl: { height: sizing.controlXl, width: sizing.controlXl },\n  }),\n)\n\n/**\n * The extended form: the size's height, with its padding at either end and\n * the gap before the label. The 26dp and 28dp paddings fall between steps of\n * the spacing scale and are written out, as on web.\n *\n * The height is a floor rather than a fixed size, so a label the device's\n * text size enlarges grows the button rather than spilling out of it, which\n * web's fixed height has no need to allow for.\n */\nconst extendedFabSizesOf = themedStyles(({ sizing, spacing }) =>\n  StyleSheet.create({\n    lg: {\n      columnGap: spacing.md,\n      minHeight: MEDIUM_SIZE,\n      paddingHorizontal: 26,\n    },\n    md: {\n      columnGap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: spacing.lg,\n    },\n    xl: {\n      columnGap: spacing.lg,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: 28,\n    },\n  }),\n)\n\n/** A FAB's container colour and the colour drawn on it. */\ntype FabColors = { readonly container: string; readonly content: string }\n\n/**\n * The six colour pairs, by variant and tone: each tone's container pair, and\n * the tone itself. Plain colours, for FabMenu's FAB, which eases from one\n * pair to another as its menu opens.\n */\nconst fabColorsOf = themedStyles(\n  ({\n    colors,\n  }): Readonly<Record<FabVariant, Readonly<Record<FabTone, FabColors>>>> => ({\n    filled: {\n      primary: { container: colors.primary, content: colors.onPrimary },\n      secondary: { container: colors.secondary, content: colors.onSecondary },\n      tertiary: { container: colors.tertiary, content: colors.onTertiary },\n    },\n    tonal: {\n      primary: {\n        container: colors.primaryContainer,\n        content: colors.onPrimaryContainer,\n      },\n      secondary: {\n        container: colors.secondaryContainer,\n        content: colors.onSecondaryContainer,\n      },\n      tertiary: {\n        container: colors.tertiaryContainer,\n        content: colors.onTertiaryContainer,\n      },\n    },\n  }),\n)\n\n/**\n * The six colour pairs as the palettes a button draws, and the one disabled\n * container every button shares: on-surface at the two disabled opacities,\n * as src/button/palettes.ts draws it.\n */\nconst fabPalettesOf = themedStyles(\n  (\n    theme,\n  ): {\n    readonly disabled: Palette\n    readonly filled: Readonly<Record<FabTone, Palette>>\n    readonly tonal: Readonly<Record<FabTone, Palette>>\n  } => {\n    const pairs = fabColorsOf(theme)\n\n    return {\n      disabled: palettesOf(theme).filledDisabled,\n      filled: palettesFor(pairs.filled),\n      tonal: palettesFor(pairs.tonal),\n    }\n  },\n)\n\nconst fabShadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation3: { boxShadow: shadows.elevation3 },\n    elevation4: { boxShadow: shadows.elevation4 },\n  }),\n)\n\n/**\n * The shadow a FAB draws in its state: level 3 at rest and while pressed,\n * level 4 under a hovering pointer, and none while disabled, since a shadow\n * says a control is there to press.\n */\nfunction fabShadowOf(\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  if (isDisabled) {\n    return undefined\n  }\n\n  return fabShadowsOf(theme)[hovered && !pressed ? 'elevation4' : 'elevation3']\n}\n\nfunction palette({ container, content }: FabColors): Palette {\n  return {\n    container: { backgroundColor: container },\n    content,\n    label: { color: content },\n  }\n}\n\nfunction palettesFor(\n  pairs: Readonly<Record<FabTone, FabColors>>,\n): Readonly<Record<FabTone, Palette>> {\n  return {\n    primary: palette(pairs.primary),\n    secondary: palette(pairs.secondary),\n    tertiary: palette(pairs.tertiary),\n  }\n}\n\nexport {\n  EXTENDED_FAB_ROLES,\n  extendedFabSizesOf,\n  FAB_ICON_SIZES,\n  fabColorsOf,\n  fabCornersOf,\n  fabPalettesOf,\n  fabShadowOf,\n  fabSizesOf,\n}\nexport type { FabColors, FabSize, FabTone, FabVariant }\n"],"mappings":";;;;AAkCA,MAAMU,cAAc;AACpB,MAAMC,gBAAgB;;AAGtB,MAAMC,iBAAoD;CACxDG,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;AAGA,MAAMC,qBAA0D;CAC9DH,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;;;;AAMA,MAAME,eAAeb,cAAc,EAAEc,YACnCnB,WAAWoB,OAAO;CAChBN,IAAI,EAAEO,cAAcX,cAAc;CAClCK,IAAI,EAAEM,cAAcF,MAAML,GAAG;CAC7BE,IAAI,EAAEK,cAAcF,MAAMH,GAAG;AAC/B,CAAC,CACH;;AAGA,MAAMM,aAAajB,cAAc,EAAEkB,aACjCvB,WAAWoB,OAAO;CAChBN,IAAI;EAAEU,QAAQf;EAAagB,OAAOhB;CAAY;CAC9CM,IAAI;EAAES,QAAQD,OAAOG;EAAWD,OAAOF,OAAOG;CAAU;CACxDV,IAAI;EAAEQ,QAAQD,OAAOI;EAAWF,OAAOF,OAAOI;CAAU;AAC1D,CAAC,CACH;;;;;;;;;;AAWA,MAAMC,qBAAqBvB,cAAc,EAAEkB,QAAQM,cACjD7B,WAAWoB,OAAO;CAChBN,IAAI;EACFgB,WAAWD,QAAQd;EACnBgB,WAAWtB;EACXuB,mBAAmB;CACrB;CACAjB,IAAI;EACFe,WAAWD,QAAQI;EACnBF,WAAWR,OAAOG;EAClBM,mBAAmBH,QAAQf;CAC7B;CACAE,IAAI;EACFc,WAAWD,QAAQf;EACnBiB,WAAWR,OAAOI;EAClBK,mBAAmB;CACrB;AACF,CAAC,CACH;;;;;;AAUA,MAAMK,cAAchC,cACjB,EACCiC,cACyE;CACzEC,QAAQ;EACNC,SAAS;GAAEL,WAAWG,OAAOE;GAASJ,SAASE,OAAOG;EAAU;EAChEC,WAAW;GAAEP,WAAWG,OAAOI;GAAWN,SAASE,OAAOK;EAAY;EACtEC,UAAU;GAAET,WAAWG,OAAOM;GAAUR,SAASE,OAAOO;EAAW;CACrE;CACAC,OAAO;EACLN,SAAS;GACPL,WAAWG,OAAOS;GAClBX,SAASE,OAAOU;EAClB;EACAN,WAAW;GACTP,WAAWG,OAAOW;GAClBb,SAASE,OAAOY;EAClB;EACAN,UAAU;GACRT,WAAWG,OAAOa;GAClBf,SAASE,OAAOc;EAClB;CACF;AACF,EACF;;;;;;AAOA,MAAMC,gBAAgBhD,cAElBiD,UAKG;CACH,MAAME,QAAQnB,YAAYiB,KAAK;CAE/B,OAAO;EACLC,UAAUnD,WAAWkD,KAAK,CAAC,CAACG;EAC5BlB,QAAQmB,YAAYF,MAAMjB,MAAM;EAChCO,OAAOY,YAAYF,MAAMV,KAAK;CAChC;AACF,CACF;AAEA,MAAMa,eAAetD,cAAc,EAAEuD,cACnC5D,WAAWoB,OAAO;CAChByC,YAAY,EAAEC,WAAWF,QAAQC,WAAW;CAC5CE,YAAY,EAAED,WAAWF,QAAQG,WAAW;AAC9C,CAAC,CACH;;;;;;AAOA,SAASC,YACP,EACEC,SACAC,WAEFC,YACAb,OACuB;CACvB,IAAIa,YACF;CAGF,OAAOR,aAAaL,KAAK,CAAC,CAACW,WAAW,CAACC,UAAU,eAAe;AAClE;AAEA,SAASG,QAAQ,EAAElC,WAAWC,WAA+B;CAC3D,OAAO;EACLD,WAAW,EAAEmC,iBAAiBnC,UAAU;EACxCC;EACAmC,OAAO,EAAEC,OAAOpC,QAAQ;CAC1B;AACF;AAEA,SAASsB,YACPF,OACoC;CACpC,OAAO;EACLhB,SAAS6B,QAAQb,MAAMhB,OAAO;EAC9BE,WAAW2B,QAAQb,MAAMd,SAAS;EAClCE,UAAUyB,QAAQb,MAAMZ,QAAQ;CAClC;AACF"}

package/dist/field/index.js

@@ -321,31 +321,52 @@ function FieldBox(t0) {
 * in `described`, so a reader hears the unit the value is read against as a
 * sighted one sees it beside the value: on iOS and Android as its hint, and
 * under React Native Web through `aria-describedby`, which drops the hint.
+*
+* `multiline` makes it a text area, `rows` lines of body large tall at the
+* least, its text from the top. iOS and Android grow a multi-line input with
+* what it holds by themselves, so a height floor is all `autosize` asks of
+* them, and `autosize={false}` sets the height instead, which they scroll
+* inside. React Native Web's textarea keeps the height it is given, so there
+* the control lies over a hidden copy of `value` that takes the height the
+* text would, as web's text area lies over its replica. A control that grows
+* is therefore handed its `value`.
 */
 function FieldInput(t0) {
-	const $ = c(23);
+	const $ = c(26);
 	let prefix;
 	let props;
 	let suffix;
 	let t1;
 	let t2;
+	let t3;
+	let t4;
+	let t5;
 	if ($[0] !== t0) {
-		({described: t1, numeric: t2, prefix, suffix, ...props} = t0);
+		({autosize: t1, described: t2, multiline: t3, numeric: t4, prefix, rows: t5, suffix, ...props} = t0);
 		$[0] = t0;
 		$[1] = prefix;
 		$[2] = props;
 		$[3] = suffix;
 		$[4] = t1;
 		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
 	} else {
 		prefix = $[1];
 		props = $[2];
 		suffix = $[3];
 		t1 = $[4];
 		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
 	}
-	const described = t1 === void 0 ? NO_PARTS : t1;
-	const numeric = t2 === void 0 ? false : t2;
+	const autosize = t1 === void 0 ? true : t1;
+	const described = t2 === void 0 ? NO_PARTS : t2;
+	const multiline = t3 === void 0 ? false : t3;
+	const numeric = t4 === void 0 ? false : t4;
+	const rows = t5 === void 0 ? 1 : t5;
 	const box = use(BoxContext);
 	const theme = useTheme();
 	const styles = fieldStylesOf(theme);
@@ -360,72 +381,84 @@ function FieldInput(t0) {
 	const affixed = prefix !== void 0 || suffix !== void 0;
 	const clearance = box.underLabel ? marginTopOf(typography.bodySmallLineHeight * fontScale) : void 0;
 	const affixStyle = composeStyles(role, colorOf(muted));
-	let t3;
-	if ($[6] !== described || $[7] !== id || $[8] !== prefix || $[9] !== suffix) {
-		t3 = descriptionOf([
+	const lines = typography.bodyLargeLineHeight * fontScale * (multiline ? rows : 1);
+	const copied = multiline && autosize && Platform.OS === "web";
+	const extent = multiline && !autosize ? heightOf(lines) : minHeightOf(lines);
+	let t6;
+	if ($[9] !== described || $[10] !== id || $[11] !== prefix || $[12] !== suffix) {
+		t6 = descriptionOf([
 			...affixPart(`${id}-prefix`, prefix),
 			...affixPart(`${id}-suffix`, suffix),
 			...described
 		]);
-		$[6] = described;
-		$[7] = id;
-		$[8] = prefix;
-		$[9] = suffix;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== box) {
-		t4 = webStateOf(box);
-		$[11] = box;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[9] = described;
+		$[10] = id;
+		$[11] = prefix;
+		$[12] = suffix;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== box) {
+		t7 = webStateOf(box);
+		$[14] = box;
+		$[15] = t7;
+	} else t7 = $[15];
 	const control = /* @__PURE__ */ jsx(TextInput, {
 		...Platform.OS === "web" ? INHERITS_DIRECTION : void 0,
 		...props,
-		...t3,
-		...t4,
+		...t6,
+		...t7,
 		"aria-disabled": box.disabled,
 		cursorColor: caret,
+		multiline,
 		placeholderTextColor: muted,
 		selectionColor: caret,
-		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, minHeightOf(typography.bodyLargeLineHeight * fontScale), affixed ? void 0 : clearance),
+		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, multiline ? styles.inputMultiline : void 0, copied ? styles.inputOverCopy : extent, affixed || copied ? void 0 : clearance),
 		underlineColorAndroid: "transparent"
 	});
+	if (copied) return /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(styles.copied, clearance),
+		children: [/* @__PURE__ */ jsx(Text, {
+			"aria-hidden": true,
+			style: composeStyles(role, styles.copy, extent),
+			children: `${props.value ?? ""} `
+		}), control]
+	});
 	if (!affixed) return control;
-	let t5;
-	if ($[13] !== affixStyle || $[14] !== box.floated || $[15] !== id || $[16] !== prefix) {
-		t5 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+	let t8;
+	if ($[16] !== affixStyle || $[17] !== box.floated || $[18] !== id || $[19] !== prefix) {
+		t8 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-prefix`,
 			style: affixStyle,
 			children: prefix
 		});
-		$[13] = affixStyle;
-		$[14] = box.floated;
-		$[15] = id;
-		$[16] = prefix;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== affixStyle || $[19] !== box.floated || $[20] !== id || $[21] !== suffix) {
-		t6 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+		$[16] = affixStyle;
+		$[17] = box.floated;
+		$[18] = id;
+		$[19] = prefix;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== affixStyle || $[22] !== box.floated || $[23] !== id || $[24] !== suffix) {
+		t9 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-suffix`,
 			style: affixStyle,
 			children: suffix
 		});
-		$[18] = affixStyle;
-		$[19] = box.floated;
-		$[20] = id;
-		$[21] = suffix;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[21] = affixStyle;
+		$[22] = box.floated;
+		$[23] = id;
+		$[24] = suffix;
+		$[25] = t9;
+	} else t9 = $[25];
 	return /* @__PURE__ */ jsxs(View, {
 		style: composeStyles(styles.affixLine, clearance),
 		children: [
-			t5,
+			t8,
 			control,
-			t6
+			t9
 		]
 	});
 }
@@ -789,6 +822,9 @@ function focusOf(control) {
 		control.current?.focus();
 	};
 }
+function heightOf(height) {
+	return { height };
+}
 function iconStyleOf(color) {
 	return {
 		color,
@@ -917,6 +953,11 @@ function FieldStroke(t0) {
 	} else t2 = $[4];
 	return t2;
 }
+/**
+* Says an error on iOS as it arrives, where a live region says nothing. An
+* error the field opened with is not said, and neither is one that has not
+* changed.
+*/
 function useErrorAnnouncement(error) {
 	const $ = c(3);
 	const said = useRef(error);
@@ -1005,6 +1046,6 @@ function widthTo(onMeasure) {
 	};
 }
 //#endregion
-export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion };
+export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useErrorAnnouncement, useFieldFocus, useStrokeMotion };
 
 //# sourceMappingURL=index.js.map