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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewProps","ViewStyle","StyleSheet","View","IndicatorTone","IndicatorLabels","IndicatorLine","readingOf","useEased","useIndicatorColors","useMeasuredWidth","DETERMINATE_EASING","stylesOf","indicatorStylesOf","useTheme","composeStyles","MeterProps","Omit","formatOptions","Intl","NumberFormatOptions","label","locale","maxValue","minValue","ref","showValue","style","tone","MeterTone","value","valueLabel","styles","create","line","alignSelf","Extract","Meter","t0","$","_c","ariaLabel","props","t1","t2","t3","t4","t5","undefined","theme","colors","t6","reading","t7","motion","durationMedium1","duration","easing","shown","percentage","onLayout","width","t8","t9","t10","text","t11","root","t12","t13","t14","t15","t16","_c","indicatorStylesOf"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { IndicatorTone } from '../../indicator'\n\nimport {\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n} from '../../indicator'\nimport {\n  DETERMINATE_EASING,\n  stylesOf as indicatorStylesOf,\n} from '../../indicator/styles'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task, as on web: the same three parts at the same 4dp,\n// the same label row above them, and the same motion when the number changes.\n// All of that is `src/indicator`, shared with ProgressIndicator, so what is\n// here is the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. The root says `meter` rather than `progressbar`, as\n// React Aria's `Meter` does on web, and a screen reader says the two\n// differently: one is how full something is, the other how far along\n// something is. That is also why a meter has no indeterminate state: a\n// measurement whose value is unknown is not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for a\n// task, since progress does not become good or bad on its way to done. A\n// measurement does, so `negative` and `positive` recolour the active\n// indicator and the stop indicator and leave the track alone. A column of\n// meters then reads as one scale with bars of different colours. Which tone a\n// value deserves is the call site's to decide: nothing here reads the number\n// and picks one.\n//\n// The value is shown by default, where a progress indicator hides it. A meter\n// is the number, and `formatOptions` is what makes it read as a percentage,\n// bytes or a plain count, in `locale`.\n\ntype MeterProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * How the value reads.\n   * @default { style: 'percent' }\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * What is being measured, shown above the line. A screen reader reads it as\n   * the meter's name; a meter whose surroundings name it takes `aria-label`\n   * instead and leaves this out.\n   */\n  readonly label?: string\n  /**\n   * The BCP 47 locale the value is written in. Defaults to the device's.\n   */\n  readonly locale?: string\n  /**\n   * The top of the scale.\n   * @default 100\n   */\n  readonly maxValue?: number\n  /**\n   * The bottom of the scale.\n   * @default 0\n   */\n  readonly minValue?: number\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  readonly showValue?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track in\n   * its secondary container so a column of meters still shares one track.\n   * @default 'primary'\n   */\n  readonly tone?: MeterTone\n  /**\n   * The measurement, between `minValue` and `maxValue`.\n   * @default 0\n   */\n  readonly value?: number\n  /** The value as words, in place of the number `formatOptions` writes. */\n  readonly valueLabel?: string\n}\n\nconst styles = StyleSheet.create({\n  // The row the line is drawn across, measured for the width it is drawn to.\n  line: {\n    alignSelf: 'stretch',\n  },\n})\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>\n\n/**\n * How full something is, on a scale it names: disk used, storage left, a\n * rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads, in `locale`. For how far along\n * a task is, reach for ProgressIndicator instead: a meter has no indeterminate\n * state, because a measurement always has a value.\n *\n * ```tsx\n * <Meter label=\"Label\" tone=\"negative\" value={94} />\n * ```\n *\n * A screen reader hears it as a meter named by its label, with its value as\n * `formatOptions` writes it. `style`, `ref` and `testID` land on the meter as\n * a whole, which is the view a layout positions.\n */\nfunction Meter({\n  'aria-label': ariaLabel,\n  formatOptions,\n  label,\n  locale,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  style,\n  tone = 'primary',\n  value = 0,\n  valueLabel,\n  ...props\n}: MeterProps) {\n  const theme = useTheme()\n  const colors = useIndicatorColors(tone)\n  const reading = readingOf({\n    formatOptions,\n    locale,\n    maxValue,\n    minValue,\n    value,\n    valueLabel,\n  })\n  const shown = useEased(reading.percentage, {\n    duration: theme.motion.durationMedium1,\n    easing: DETERMINATE_EASING,\n  })\n  const { onLayout, width } = useMeasuredWidth()\n\n  return (\n    <View\n      accessible\n      aria-label={label ?? ariaLabel}\n      aria-valuemax={maxValue}\n      aria-valuemin={minValue}\n      aria-valuenow={reading.value}\n      aria-valuetext={reading.text}\n      role=\"meter\"\n      {...props}\n      style={composeStyles<ViewStyle>(indicatorStylesOf(theme).root, style)}\n    >\n      <IndicatorLabels\n        label={label}\n        value={showValue ? reading.text : undefined}\n      />\n      <View onLayout={onLayout} style={styles.line}>\n        <IndicatorLine colors={colors} percentage={shown} width={width} />\n      </View>\n    </View>\n  )\n}\n\nexport { Meter }\nexport type { MeterProps, MeterTone }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewProps","ViewStyle","StyleSheet","View","IndicatorTone","useLocaleOf","IndicatorLabels","IndicatorLine","readingOf","useEased","useIndicatorColors","useMeasuredWidth","DETERMINATE_EASING","stylesOf","indicatorStylesOf","useTheme","composeStyles","MeterProps","Omit","formatOptions","Intl","NumberFormatOptions","label","locale","maxValue","minValue","ref","showValue","style","tone","MeterTone","value","valueLabel","styles","create","line","alignSelf","Extract","Meter","t0","$","_c","ariaLabel","props","t1","t2","t3","t4","t5","undefined","theme","colors","writtenIn","t6","reading","t7","motion","durationMedium1","duration","easing","shown","percentage","onLayout","width","t8","t9","t10","text","t11","root","t12","t13","t14","t15","t16","_c","indicatorStylesOf"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { IndicatorTone } from '../../indicator'\n\nimport { useLocaleOf } from '../../i18n/provider'\nimport {\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n} from '../../indicator'\nimport {\n  DETERMINATE_EASING,\n  stylesOf as indicatorStylesOf,\n} from '../../indicator/styles'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task, as on web: the same three parts at the same 4dp,\n// the same label row above them, and the same motion when the number changes.\n// All of that is `src/indicator`, shared with ProgressIndicator, so what is\n// here is the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. The root says `meter` rather than `progressbar`, as\n// React Aria's `Meter` does on web, and a screen reader says the two\n// differently: one is how full something is, the other how far along\n// something is. That is also why a meter has no indeterminate state: a\n// measurement whose value is unknown is not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for a\n// task, since progress does not become good or bad on its way to done. A\n// measurement does, so `negative` and `positive` recolour the active\n// indicator and the stop indicator and leave the track alone. A column of\n// meters then reads as one scale with bars of different colours. Which tone a\n// value deserves is the call site's to decide: nothing here reads the number\n// and picks one.\n//\n// The value is shown by default, where a progress indicator hides it. A meter\n// is the number, and `formatOptions` is what makes it read as a percentage,\n// bytes or a plain count, in `locale`.\n\ntype MeterProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * How the value reads.\n   * @default { style: 'percent' }\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * What is being measured, shown above the line. A screen reader reads it as\n   * the meter's name; a meter whose surroundings name it takes `aria-label`\n   * instead and leaves this out.\n   */\n  readonly label?: string\n  /**\n   * The BCP 47 locale the value is written in. Defaults to the\n   * `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  /**\n   * The top of the scale.\n   * @default 100\n   */\n  readonly maxValue?: number\n  /**\n   * The bottom of the scale.\n   * @default 0\n   */\n  readonly minValue?: number\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  readonly showValue?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track in\n   * its secondary container so a column of meters still shares one track.\n   * @default 'primary'\n   */\n  readonly tone?: MeterTone\n  /**\n   * The measurement, between `minValue` and `maxValue`.\n   * @default 0\n   */\n  readonly value?: number\n  /** The value as words, in place of the number `formatOptions` writes. */\n  readonly valueLabel?: string\n}\n\nconst styles = StyleSheet.create({\n  // The row the line is drawn across, measured for the width it is drawn to.\n  line: {\n    alignSelf: 'stretch',\n  },\n})\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>\n\n/**\n * How full something is, on a scale it names: disk used, storage left, a\n * rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads, in `locale`. For how far along\n * a task is, reach for ProgressIndicator instead: a meter has no indeterminate\n * state, because a measurement always has a value.\n *\n * ```tsx\n * <Meter label=\"Label\" tone=\"negative\" value={94} />\n * ```\n *\n * A screen reader hears it as a meter named by its label, with its value as\n * `formatOptions` writes it. `style`, `ref` and `testID` land on the meter as\n * a whole, which is the view a layout positions.\n */\nfunction Meter({\n  'aria-label': ariaLabel,\n  formatOptions,\n  label,\n  locale,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  style,\n  tone = 'primary',\n  value = 0,\n  valueLabel,\n  ...props\n}: MeterProps) {\n  const theme = useTheme()\n  const colors = useIndicatorColors(tone)\n  const writtenIn = useLocaleOf(locale)\n  const reading = readingOf({\n    formatOptions,\n    locale: writtenIn,\n    maxValue,\n    minValue,\n    value,\n    valueLabel,\n  })\n  const shown = useEased(reading.percentage, {\n    duration: theme.motion.durationMedium1,\n    easing: DETERMINATE_EASING,\n  })\n  const { onLayout, width } = useMeasuredWidth()\n\n  return (\n    <View\n      accessible\n      aria-label={label ?? ariaLabel}\n      aria-valuemax={maxValue}\n      aria-valuemin={minValue}\n      aria-valuenow={reading.value}\n      aria-valuetext={reading.text}\n      role=\"meter\"\n      {...props}\n      style={composeStyles<ViewStyle>(indicatorStylesOf(theme).root, style)}\n    >\n      <IndicatorLabels\n        label={label}\n        value={showValue ? reading.text : undefined}\n      />\n      <View onLayout={onLayout} style={styles.line}>\n        <IndicatorLine colors={colors} percentage={shown} width={width} />\n      </View>\n    </View>\n  )\n}\n\nexport { Meter }\nexport type { MeterProps, MeterTone }\n"],"mappings":"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"}

package/dist/components/number-field/index.d.ts

@@ -6,7 +6,9 @@ import { ComponentRef, Ref } from "react";
 type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'autoComplete' | 'autoCorrect' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'inputMode' | 'keyboardType' | 'maxLength' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'spellCheck' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**
    * The name of the stepper that lowers the value, for a screen reader. Left
-   * out, it is the English "Decrease" followed by the field's own label.
+   * out, it is the name React Aria gives web's in the `I18nProvider`'s
+   * locale, or the device's outside one, around the field's own label:
+   * "Decrease Label" in English.
    */
   readonly decrementLabel?: string;
   /** The value the field opens with, when it keeps its own. */
@@ -39,7 +41,9 @@ type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilit
   readonly formatOptions?: Intl.NumberFormatOptions;
   /**
    * The name of the stepper that raises the value, for a screen reader. Left
-   * out, it is the English "Increase" followed by the field's own label.
+   * out, it is the name React Aria gives web's in the `I18nProvider`'s
+   * locale, or the device's outside one, around the field's own label:
+   * "Increase Label" in English.
    */
   readonly incrementLabel?: string;
   /**
@@ -70,7 +74,7 @@ type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilit
   readonly label: string;
   /**
    * The BCP 47 locale the value is written and read in. Defaults to the
-   * device's.
+   * `I18nProvider`'s, or the device's outside one.
    */
   readonly locale?: string;
   /** The highest value the field takes. A committed value is clamped to it. */

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

@@ -3,7 +3,8 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { withOpacity } from "../../theme/color.js";
-import { localeOf } from "../../number/locale.js";
+import { messagesFor } from "../../i18n/index.js";
+import { useLocaleOf } from "../../i18n/provider.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
@@ -99,7 +100,7 @@ function marginVerticalOf(margin) {
 * ```
 */
 function NumberField(t0) {
-	const $ = c(110);
+	const $ = c(126);
 	let decrementLabel;
 	let defaultValue;
 	let description;
@@ -205,30 +206,45 @@ function NumberField(t0) {
 	const variant = t8 === void 0 ? "filled" : t8;
 	const id = useId();
 	const control = useRef(null);
-	const writtenIn = localeOf(locale);
-	const state = useNumberFieldState({
-		defaultValue,
-		formatOptions,
-		isDisabled,
-		isReadOnly,
-		locale: writtenIn,
-		maxValue,
-		minValue,
-		onChange,
-		step,
-		value
-	});
+	const writtenIn = useLocaleOf(locale);
 	let t9;
-	if ($[31] !== state.numberValue) {
-		t9 = Number.isNaN(state.numberValue);
-		$[31] = state.numberValue;
-		$[32] = t9;
-	} else t9 = $[32];
-	const empty = t9;
-	const t10 = empty ? "" : String(state.numberValue);
-	let t11;
-	if ($[33] !== empty || $[34] !== error || $[35] !== isDisabled || $[36] !== isReadOnly || $[37] !== isRequired || $[38] !== name || $[39] !== state.numberValue || $[40] !== t10 || $[41] !== validate) {
-		t11 = {
+	if ($[31] !== defaultValue || $[32] !== formatOptions || $[33] !== isDisabled || $[34] !== isReadOnly || $[35] !== maxValue || $[36] !== minValue || $[37] !== onChange || $[38] !== step || $[39] !== value || $[40] !== writtenIn) {
+		t9 = {
+			defaultValue,
+			formatOptions,
+			isDisabled,
+			isReadOnly,
+			locale: writtenIn,
+			maxValue,
+			minValue,
+			onChange,
+			step,
+			value
+		};
+		$[31] = defaultValue;
+		$[32] = formatOptions;
+		$[33] = isDisabled;
+		$[34] = isReadOnly;
+		$[35] = maxValue;
+		$[36] = minValue;
+		$[37] = onChange;
+		$[38] = step;
+		$[39] = value;
+		$[40] = writtenIn;
+		$[41] = t9;
+	} else t9 = $[41];
+	const state = useNumberFieldState(t9);
+	let t10;
+	if ($[42] !== state.numberValue) {
+		t10 = Number.isNaN(state.numberValue);
+		$[42] = state.numberValue;
+		$[43] = t10;
+	} else t10 = $[43];
+	const empty = t10;
+	const t11 = empty ? "" : String(state.numberValue);
+	let t12;
+	if ($[44] !== empty || $[45] !== error || $[46] !== isDisabled || $[47] !== isReadOnly || $[48] !== isRequired || $[49] !== name || $[50] !== state.numberValue || $[51] !== t11 || $[52] !== validate) {
+		t12 = {
 			control,
 			error,
 			isDisabled,
@@ -236,222 +252,228 @@ function NumberField(t0) {
 			isReadOnly,
 			isRequired,
 			name,
-			submitted: t10,
+			submitted: t11,
 			validate,
 			value: state.numberValue
 		};
-		$[33] = empty;
-		$[34] = error;
-		$[35] = isDisabled;
-		$[36] = isReadOnly;
-		$[37] = isRequired;
-		$[38] = name;
-		$[39] = state.numberValue;
-		$[40] = t10;
-		$[41] = validate;
-		$[42] = t11;
-	} else t11 = $[42];
-	const validation = useFieldValidation(t11);
+		$[44] = empty;
+		$[45] = error;
+		$[46] = isDisabled;
+		$[47] = isReadOnly;
+		$[48] = isRequired;
+		$[49] = name;
+		$[50] = state.numberValue;
+		$[51] = t11;
+		$[52] = validate;
+		$[53] = t12;
+	} else t12 = $[53];
+	const validation = useFieldValidation(t12);
 	const shownError = validation.error;
-	let t12;
-	if ($[43] !== onBlur || $[44] !== state || $[45] !== validation.onBlur) {
-		t12 = commitBefore(state, blurThen(validation.onBlur, onBlur));
-		$[43] = onBlur;
-		$[44] = state;
-		$[45] = validation.onBlur;
-		$[46] = t12;
-	} else t12 = $[46];
 	let t13;
-	if ($[47] !== onFocus || $[48] !== t12) {
-		t13 = {
-			onBlur: t12,
+	if ($[54] !== onBlur || $[55] !== state || $[56] !== validation.onBlur) {
+		t13 = commitBefore(state, blurThen(validation.onBlur, onBlur));
+		$[54] = onBlur;
+		$[55] = state;
+		$[56] = validation.onBlur;
+		$[57] = t13;
+	} else t13 = $[57];
+	let t14;
+	if ($[58] !== onFocus || $[59] !== t13) {
+		t14 = {
+			onBlur: t13,
 			onFocus
 		};
-		$[47] = onFocus;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
-	const focus = useFieldFocus(t13);
-	const hasDecimals = (new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0) > 0;
+		$[58] = onFocus;
+		$[59] = t13;
+		$[60] = t14;
+	} else t14 = $[60];
+	const focus = useFieldFocus(t14);
+	let t15;
+	if ($[61] !== formatOptions || $[62] !== writtenIn) {
+		t15 = new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0;
+		$[61] = formatOptions;
+		$[62] = writtenIn;
+		$[63] = t15;
+	} else t15 = $[63];
+	const hasDecimals = t15 > 0;
 	const announced = useStepAnnouncement(state.inputValue);
 	const [stepperFocused, setStepperFocused] = useState(false);
-	let t14;
-	let t15;
-	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = () => control.current;
-		t15 = [];
-		$[50] = t14;
-		$[51] = t15;
+	let t16;
+	let t17;
+	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = () => control.current;
+		t17 = [];
+		$[64] = t16;
+		$[65] = t17;
 	} else {
-		t14 = $[50];
-		t15 = $[51];
+		t16 = $[64];
+		t17 = $[65];
 	}
-	useImperativeHandle(inputRef, t14, t15);
-	const t16 = decrementLabel ?? `Decrease ${label}`;
-	const t17 = incrementLabel ?? `Increase ${label}`;
-	const t18 = steppers === "horizontal";
-	let t19;
-	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = () => {
-			setStepperFocused(false);
-		};
-		$[52] = t19;
-	} else t19 = $[52];
-	let t20;
-	if ($[53] !== announced || $[54] !== state.canDecrement || $[55] !== state.canIncrement || $[56] !== state.decrement || $[57] !== state.increment || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== validation.onEdit || $[62] !== variant) {
-		let t21;
-		if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
-			t21 = () => {
+	useImperativeHandle(inputRef, t16, t17);
+	let t18;
+	if ($[66] !== announced || $[67] !== decrementLabel || $[68] !== incrementLabel || $[69] !== label || $[70] !== state.canDecrement || $[71] !== state.canIncrement || $[72] !== state.decrement || $[73] !== state.increment || $[74] !== steppers || $[75] !== validation.onEdit || $[76] !== variant || $[77] !== writtenIn) {
+		let t19;
+		if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+			t19 = () => {
+				setStepperFocused(false);
+			};
+			$[79] = t19;
+		} else t19 = $[79];
+		let t20;
+		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+			t20 = () => {
 				setStepperFocused(true);
 			};
-			$[64] = t21;
-		} else t21 = $[64];
-		t20 = steppersOf({
+			$[80] = t20;
+		} else t20 = $[80];
+		t18 = steppersOf({
 			canDecrement: state.canDecrement,
 			canIncrement: state.canIncrement,
-			decrementLabel: t16,
-			incrementLabel: t17,
-			inline: t18,
+			decrementLabel: decrementLabel ?? messagesFor(writtenIn).decrease.replace("{label}", label),
+			incrementLabel: incrementLabel ?? messagesFor(writtenIn).increase.replace("{label}", label),
+			inline: steppers === "horizontal",
 			onBlur: t19,
 			onDecrement: announced(stepThen(state.decrement, validation.onEdit)),
-			onFocus: t21,
+			onFocus: t20,
 			onIncrement: announced(stepThen(state.increment, validation.onEdit)),
 			outlined: variant === "outlined"
 		});
-		$[53] = announced;
-		$[54] = state.canDecrement;
-		$[55] = state.canIncrement;
-		$[56] = state.decrement;
-		$[57] = state.increment;
-		$[58] = t16;
-		$[59] = t17;
-		$[60] = t18;
-		$[61] = validation.onEdit;
-		$[62] = variant;
-		$[63] = t20;
-	} else t20 = $[63];
-	const t21 = focus.focused || stepperFocused;
-	const t22 = shownError !== void 0;
-	const t23 = state.inputValue !== "";
-	const t24 = focus.handlers;
-	let t25;
-	if ($[65] !== description || $[66] !== id || $[67] !== shownError) {
-		t25 = describedBy(id, {
+		$[66] = announced;
+		$[67] = decrementLabel;
+		$[68] = incrementLabel;
+		$[69] = label;
+		$[70] = state.canDecrement;
+		$[71] = state.canIncrement;
+		$[72] = state.decrement;
+		$[73] = state.increment;
+		$[74] = steppers;
+		$[75] = validation.onEdit;
+		$[76] = variant;
+		$[77] = writtenIn;
+		$[78] = t18;
+	} else t18 = $[78];
+	const t19 = focus.focused || stepperFocused;
+	const t20 = shownError !== void 0;
+	const t21 = state.inputValue !== "";
+	const t22 = focus.handlers;
+	let t23;
+	if ($[81] !== description || $[82] !== id || $[83] !== shownError) {
+		t23 = describedBy(id, {
 			description,
 			error: shownError
 		});
-		$[65] = description;
-		$[66] = id;
-		$[67] = shownError;
-		$[68] = t25;
-	} else t25 = $[68];
-	const t26 = !isDisabled && !isReadOnly;
+		$[81] = description;
+		$[82] = id;
+		$[83] = shownError;
+		$[84] = t23;
+	} else t23 = $[84];
+	const t24 = !isDisabled && !isReadOnly;
+	let t25;
+	if ($[85] !== hasDecimals || $[86] !== minValue) {
+		t25 = keyboardOf(minValue, hasDecimals);
+		$[85] = hasDecimals;
+		$[86] = minValue;
+		$[87] = t25;
+	} else t25 = $[87];
+	let t26;
+	if ($[88] !== state || $[89] !== validation.onEdit) {
+		t26 = editInto(state, validation.onEdit);
+		$[88] = state;
+		$[89] = validation.onEdit;
+		$[90] = t26;
+	} else t26 = $[90];
 	let t27;
-	if ($[69] !== hasDecimals || $[70] !== minValue) {
-		t27 = keyboardOf(minValue, hasDecimals);
-		$[69] = hasDecimals;
-		$[70] = minValue;
-		$[71] = t27;
-	} else t27 = $[71];
+	if ($[91] !== onSubmitEditing || $[92] !== state) {
+		t27 = commitBefore(state, onSubmitEditing);
+		$[91] = onSubmitEditing;
+		$[92] = state;
+		$[93] = t27;
+	} else t27 = $[93];
 	let t28;
-	if ($[72] !== state || $[73] !== validation.onEdit) {
-		t28 = editInto(state, validation.onEdit);
-		$[72] = state;
-		$[73] = validation.onEdit;
-		$[74] = t28;
-	} else t28 = $[74];
-	let t29;
-	if ($[75] !== onSubmitEditing || $[76] !== state) {
-		t29 = commitBefore(state, onSubmitEditing);
-		$[75] = onSubmitEditing;
-		$[76] = state;
-		$[77] = t29;
-	} else t29 = $[77];
-	let t30;
-	if ($[78] !== focus.handlers || $[79] !== label || $[80] !== numeric || $[81] !== props || $[82] !== returnKeyType || $[83] !== state.inputValue || $[84] !== t25 || $[85] !== t26 || $[86] !== t27 || $[87] !== t28 || $[88] !== t29) {
-		t30 = /* @__PURE__ */ jsx(FieldInput, {
+	if ($[94] !== focus.handlers || $[95] !== label || $[96] !== numeric || $[97] !== props || $[98] !== returnKeyType || $[99] !== state.inputValue || $[100] !== t23 || $[101] !== t24 || $[102] !== t25 || $[103] !== t26 || $[104] !== t27) {
+		t28 = /* @__PURE__ */ jsx(FieldInput, {
 			...props,
-			...t24,
+			...t22,
 			"aria-label": label,
 			autoComplete: "off",
 			autoCorrect: false,
-			described: t25,
-			editable: t26,
-			keyboardType: t27,
+			described: t23,
+			editable: t24,
+			keyboardType: t25,
 			numeric,
-			onChangeText: t28,
-			onSubmitEditing: t29,
+			onChangeText: t26,
+			onSubmitEditing: t27,
 			ref: control,
 			returnKeyType,
 			spellCheck: false,
 			value: state.inputValue
 		});
-		$[78] = focus.handlers;
-		$[79] = label;
-		$[80] = numeric;
-		$[81] = props;
-		$[82] = returnKeyType;
-		$[83] = state.inputValue;
-		$[84] = t25;
-		$[85] = t26;
-		$[86] = t27;
-		$[87] = t28;
-		$[88] = t29;
-		$[89] = t30;
-	} else t30 = $[89];
-	let t31;
-	if ($[90] !== floatingLabel || $[91] !== isDisabled || $[92] !== isRequired || $[93] !== label || $[94] !== t20 || $[95] !== t21 || $[96] !== t22 || $[97] !== t23 || $[98] !== t30 || $[99] !== variant) {
-		t31 = /* @__PURE__ */ jsx(FieldBox, {
+		$[94] = focus.handlers;
+		$[95] = label;
+		$[96] = numeric;
+		$[97] = props;
+		$[98] = returnKeyType;
+		$[99] = state.inputValue;
+		$[100] = t23;
+		$[101] = t24;
+		$[102] = t25;
+		$[103] = t26;
+		$[104] = t27;
+		$[105] = t28;
+	} else t28 = $[105];
+	let t29;
+	if ($[106] !== floatingLabel || $[107] !== isDisabled || $[108] !== isRequired || $[109] !== label || $[110] !== t18 || $[111] !== t19 || $[112] !== t20 || $[113] !== t21 || $[114] !== t28 || $[115] !== variant) {
+		t29 = /* @__PURE__ */ jsx(FieldBox, {
 			control,
-			end: t20,
+			end: t18,
 			floatingLabel,
 			isDisabled,
-			isFocused: t21,
-			isInvalid: t22,
-			isPopulated: t23,
+			isFocused: t19,
+			isInvalid: t20,
+			isPopulated: t21,
 			isRequired,
 			label,
 			variant,
-			children: t30
+			children: t28
 		});
-		$[90] = floatingLabel;
-		$[91] = isDisabled;
-		$[92] = isRequired;
-		$[93] = label;
-		$[94] = t20;
-		$[95] = t21;
-		$[96] = t22;
-		$[97] = t23;
-		$[98] = t30;
-		$[99] = variant;
-		$[100] = t31;
-	} else t31 = $[100];
-	let t32;
-	if ($[101] !== description || $[102] !== id || $[103] !== shownError) {
-		t32 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[106] = floatingLabel;
+		$[107] = isDisabled;
+		$[108] = isRequired;
+		$[109] = label;
+		$[110] = t18;
+		$[111] = t19;
+		$[112] = t20;
+		$[113] = t21;
+		$[114] = t28;
+		$[115] = variant;
+		$[116] = t29;
+	} else t29 = $[116];
+	let t30;
+	if ($[117] !== description || $[118] !== id || $[119] !== shownError) {
+		t30 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error: shownError,
 			id
 		});
-		$[101] = description;
-		$[102] = id;
-		$[103] = shownError;
-		$[104] = t32;
-	} else t32 = $[104];
-	let t33;
-	if ($[105] !== ref || $[106] !== style || $[107] !== t31 || $[108] !== t32) {
-		t33 = /* @__PURE__ */ jsxs(View, {
+		$[117] = description;
+		$[118] = id;
+		$[119] = shownError;
+		$[120] = t30;
+	} else t30 = $[120];
+	let t31;
+	if ($[121] !== ref || $[122] !== style || $[123] !== t29 || $[124] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(View, {
 			ref,
 			style,
-			children: [t31, t32]
+			children: [t29, t30]
 		});
-		$[105] = ref;
-		$[106] = style;
-		$[107] = t31;
-		$[108] = t32;
-		$[109] = t33;
-	} else t33 = $[109];
-	return t33;
+		$[121] = ref;
+		$[122] = style;
+		$[123] = t29;
+		$[124] = t30;
+		$[125] = t31;
+	} else t31 = $[125];
+	return t31;
 }
 function outwardSlop(half, place) {
 	const slop = hitSlop(half, STEPPER_WIDTH);