@dloizides/ui-forms 1.9.1 → 1.12.0

package/dist/index.js

@@ -1,25 +1,63 @@
 'use strict';
 
-var React = require('react');
+var React2 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 var uiButtons = require('@dloizides/ui-buttons');
+var a11y = require('@dloizides/a11y');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/Field/Field.tsx
+function attachControlId(child, candidateId, describedById) {
+  if (!React2__default.default.isValidElement(child) || child.type === React2__default.default.Fragment) {
+    return { node: child };
+  }
+  const props = child.props;
+  const existing = props.id ?? props.nativeID;
+  const element = child;
+  const controlId = existing !== void 0 && existing !== "" ? existing : candidateId;
+  const injected = { id: controlId };
+  if (describedById !== void 0 && props.describedById === void 0) {
+    injected.describedById = describedById;
+  }
+  return { node: React2__default.default.cloneElement(element, injected), controlId };
+}
+var IS_WEB = reactNative.Platform.OS === "web";
+function isAttributeHost(node) {
+  return typeof node === "object" && node !== null && typeof node.setAttribute === "function";
+}
+function useHtmlFor(controlId) {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    const node = ref.current;
+    if (!IS_WEB || !isAttributeHost(node)) return;
+    const target = controlId !== void 0 && controlId !== "" ? node.ownerDocument?.getElementById(controlId) : null;
+    if (target === null || target === void 0) {
+      node.removeAttribute("for");
+      return;
+    }
+    node.setAttribute("for", controlId);
+  }, [controlId]);
+  return ref;
+}
+var IS_WEB2 = reactNative.Platform.OS === "web";
 function FieldLabel({
   label,
   marker,
   optionalLabel,
+  controlId,
+  labelId,
   style,
   requiredMarkStyle,
   optionalMarkStyle
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style, children: [
+  const webProps = IS_WEB2 ? { role: "label" } : {};
+  const labelRef = useHtmlFor(controlId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { id: labelId, ref: labelRef, style, ...webProps, children: [
     label,
     " ",
     marker === "required" ? (
@@ -96,15 +134,15 @@ var labelVariantStyles = reactNative.StyleSheet.create({
 function resolveLabelVariantStyle(variant) {
   return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
 }
-var FormGridContext = React__default.default.createContext(null);
-var GapOwnedContext = React__default.default.createContext(false);
+var FormGridContext = React2__default.default.createContext(null);
+var GapOwnedContext = React2__default.default.createContext(false);
 var FormGridProvider = FormGridContext.Provider;
 var GapOwnedProvider = GapOwnedContext.Provider;
 function useFormGridMetrics() {
-  return React__default.default.useContext(FormGridContext);
+  return React2__default.default.useContext(FormGridContext);
 }
 function useIsGapOwned() {
-  return React__default.default.useContext(GapOwnedContext);
+  return React2__default.default.useContext(GapOwnedContext);
 }
 var ERROR_FONT_SIZE = 12;
 var HINT_FONT_SIZE = 12;
@@ -122,10 +160,15 @@ var styles = reactNative.StyleSheet.create({
 });
 var fieldSeq = 0;
 function useFieldIds() {
-  const [ids] = React__default.default.useState(() => {
+  const [ids] = React2__default.default.useState(() => {
     fieldSeq += 1;
     const seq = String(fieldSeq);
-    return { hintId: `field-hint-${seq}`, errorId: `field-error-${seq}` };
+    return {
+      hintId: `field-hint-${seq}`,
+      errorId: `field-error-${seq}`,
+      controlId: `field-control-${seq}`,
+      labelId: `field-label-${seq}`
+    };
   });
   return ids;
 }
@@ -163,8 +206,8 @@ var Field = ({
   const labelText = label ?? "";
   const hasLabel = labelText !== "";
   const marker = resolveFieldMarker(required, optional);
-  const { hintId, errorId } = useFieldIds();
-  const themeStyles = React__default.default.useMemo(
+  const { hintId, errorId, controlId, labelId } = useFieldIds();
+  const themeStyles = React2__default.default.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
@@ -176,12 +219,16 @@ var Field = ({
     [colors.textSecondary, errorColor]
   );
   const describedById = joinDescribedBy(hasHint ? hintId : void 0, hasError ? errorId : void 0);
-  const control = typeof children === "function" ? children({ describedById, hasError }) : children;
+  const isRenderChild = typeof children === "function";
+  const attached = isRenderChild ? { node: children({ describedById, hasError, controlId, labelId }), controlId } : attachControlId(children, controlId, describedById);
+  const control = attached.node;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [spacingStyles.container, containerStyle], testID, children: [
     hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(
       FieldLabel,
       {
+        controlId: attached.controlId,
         label: labelText,
+        labelId,
         marker,
         optionalLabel,
         optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
@@ -211,7 +258,7 @@ var FormGrid = ({
   style,
   testID
 }) => {
-  const metrics = React__default.default.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
+  const metrics = React2__default.default.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
   return /* @__PURE__ */ jsxRuntime.jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
 };
 var GROW = 1;
@@ -246,7 +293,7 @@ var styles3 = reactNative.StyleSheet.create({
 });
 var sectionSeq = 0;
 function useSectionLegendId() {
-  const [id] = React__default.default.useState(() => {
+  const [id] = React2__default.default.useState(() => {
     sectionSeq += 1;
     return `form-section-legend-${String(sectionSeq)}`;
   });
@@ -333,7 +380,90 @@ var FormActions = ({
     }
   )
 ] });
-var IS_WEB = reactNative.Platform.OS === "web";
+var FIELD_GAP = 4;
+var LABEL_FONT = 11;
+var LABEL_LETTER_SPACING = 0.4;
+var INPUT_RADIUS = 8;
+var INPUT_PAD_H = 12;
+var INPUT_PAD_V = 10;
+var INPUT_FONT = 14;
+var INPUT_BORDER = 1;
+var DATE_ROW_GAP = 8;
+var CHEVRON_FONT = 10;
+var MENU_TOP_GAP = 4;
+var MENU_RADIUS = 8;
+var MENU_PAD_V = 4;
+var MENU_OPT_PAD_H = 12;
+var MENU_OPT_PAD_V = 8;
+var MENU_MIN_WIDTH = 160;
+var MENU_MAX_HEIGHT = 260;
+var MENU_Z = 1e3;
+var MENU_ELEVATION = 8;
+var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
+var OPTION_FONT = 14;
+var ERROR_FONT = 12;
+var ERROR_GAP = 3;
+var controlStyles = reactNative.StyleSheet.create({
+  /**
+   * The shared bordered box every dense text control renders in.
+   *
+   * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+   * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+   * is stated rather than left to emerge from font size + padding.
+   */
+  input: {
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V,
+    fontSize: INPUT_FONT,
+    minHeight: a11y.MIN_TOUCH_TARGET_PX
+  },
+  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
+  selectTrigger: {
+    minHeight: a11y.MIN_TOUCH_TARGET_PX,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: DATE_ROW_GAP,
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V
+  },
+  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
+  chevron: { fontSize: CHEVRON_FONT },
+  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
+  dateCol: { gap: FIELD_GAP, flex: 1 },
+  /**
+   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
+   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
+   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
+   * too would make one field shout twice.
+   */
+  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
+  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
+  anchor: { position: "relative" },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: MENU_TOP_GAP,
+    minWidth: MENU_MIN_WIDTH,
+    maxHeight: MENU_MAX_HEIGHT,
+    borderWidth: INPUT_BORDER,
+    borderRadius: MENU_RADIUS,
+    paddingVertical: MENU_PAD_V,
+    zIndex: MENU_Z,
+    boxShadow: MENU_BOX_SHADOW,
+    elevation: MENU_ELEVATION,
+    overflow: "hidden"
+  },
+  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  optionText: { fontSize: OPTION_FONT },
+  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
+});
+var IS_WEB3 = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
@@ -348,7 +478,7 @@ var GREEN_START = 3;
 var BLUE_START = 5;
 var CHANNEL_END_OFFSET = 2;
 function prefersReducedMotion() {
-  if (!IS_WEB || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  if (!IS_WEB3 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function withAlpha(color, alpha) {
@@ -365,33 +495,33 @@ function useThemedInput(options = {}) {
   const { hasError = false, onFocus, onBlur } = options;
   const { theme } = uiFeedback.useUi();
   const { colors, palette, semantic } = theme;
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isHovered, setIsHovered] = React.useState(false);
-  const handleFocus = React.useCallback(
+  const [isFocused, setIsFocused] = React2.useState(false);
+  const [isHovered, setIsHovered] = React2.useState(false);
+  const handleFocus = React2.useCallback(
     (e) => {
       setIsFocused(true);
       onFocus?.(e);
     },
     [onFocus]
   );
-  const handleBlur = React.useCallback(
+  const handleBlur = React2.useCallback(
     (e) => {
       setIsFocused(false);
       onBlur?.(e);
     },
     [onBlur]
   );
-  const handleHoverIn = React.useCallback(() => setIsHovered(true), []);
-  const handleHoverOut = React.useCallback(() => setIsHovered(false), []);
+  const handleHoverIn = React2.useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = React2.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
   const errorColor = semantic.error["500"];
-  const style = React.useMemo(() => {
+  const style = React2.useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
-    if (!IS_WEB) return base;
+    if (!IS_WEB3) return base;
     const ringColor = hasError ? errorColor : primary;
     const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
@@ -414,9 +544,9 @@ function useThemedInput(options = {}) {
     primary,
     errorColor
   ]);
-  const focusBind = React.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
-  const hoverBind = React.useMemo(
-    () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
+  const focusBind = React2.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
+  const hoverBind = React2.useMemo(
+    () => IS_WEB3 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
   return {
@@ -428,9 +558,9 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var IS_WEB2 = reactNative.Platform.OS === "web";
+var IS_WEB4 = reactNative.Platform.OS === "web";
 function webFieldA11y({ describedById, hasError = false, required = false }) {
-  if (!IS_WEB2) {
+  if (!IS_WEB4) {
     return {};
   }
   return {
@@ -439,7 +569,24 @@ function webFieldA11y({ describedById, hasError = false, required = false }) {
     "aria-required": required ? true : void 0
   };
 }
-var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+var MULTILINE_MIN_HEIGHT = 96;
+var boxStyles = reactNative.StyleSheet.create({
+  multiline: {
+    minHeight: MULTILINE_MIN_HEIGHT,
+    textAlignVertical: "top"
+  }
+});
+var ThemedTextInput = React2__default.default.forwardRef(function ThemedTextInput2({
+  hasError = false,
+  describedById,
+  requiredField = false,
+  unstyledBox = false,
+  onFocus,
+  onBlur,
+  style,
+  placeholderTextColor,
+  ...rest
+}, ref) {
   const {
     style: themedStyle,
     placeholderTextColor: themedPlaceholder,
@@ -447,6 +594,8 @@ var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput
     hoverBind
   } = useThemedInput({ hasError, onFocus, onBlur });
   const webA11y = webFieldA11y({ describedById, hasError, required: requiredField });
+  const boxStyle = unstyledBox ? null : controlStyles.input;
+  const multilineStyle = rest.multiline === true && !unstyledBox ? boxStyles.multiline : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TextInput,
     {
@@ -457,41 +606,39 @@ var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput
       ...hoverBind,
       onFocus: focusBind.onFocus,
       onBlur: focusBind.onBlur,
-      style: [style, themedStyle]
+      style: [boxStyle, multilineStyle, style, themedStyle]
     }
   );
 });
-var INPUT_PADDING_V = 10;
-var INPUT_PADDING_H = 12;
-var INPUT_BORDER_RADIUS = 8;
-var INPUT_BORDER_WIDTH = 1;
-var styles5 = reactNative.StyleSheet.create({
-  input: {
-    paddingVertical: INPUT_PADDING_V,
-    paddingHorizontal: INPUT_PADDING_H,
-    borderRadius: INPUT_BORDER_RADIUS,
-    borderWidth: INPUT_BORDER_WIDTH
-  }
-});
 var FormField = ({
   label,
+  labelHidden = false,
   required = false,
   error,
   containerStyle,
   ...textInputProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(
-  ThemedTextInput,
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Field,
   {
-    accessibilityHint: `Enter ${label}`,
-    accessibilityLabel: label,
-    describedById,
-    hasError,
-    requiredField: required,
-    style: styles5.input,
-    testID: "form-field-input",
-    ...textInputProps
+    containerStyle,
+    error,
+    label: labelHidden ? void 0 : label,
+    required,
+    children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsxRuntime.jsx(
+      ThemedTextInput,
+      {
+        accessibilityHint: `Enter ${label}`,
+        accessibilityLabel: label,
+        describedById,
+        hasError,
+        id: controlId,
+        requiredField: required,
+        testID: "form-field-input",
+        ...textInputProps
+      }
+    )
   }
-) });
+);
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
 var SOLID_RADIUS = 20;
@@ -525,7 +672,7 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles6 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -577,7 +724,7 @@ function OutlineChip({
   ariaPressed,
   onPress
 }) {
-  const [hovered, setHovered] = React__default.default.useState(false);
+  const [hovered, setHovered] = React2__default.default.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
   const backgroundColor = selected ? colors.tint : colors.muted;
@@ -596,7 +743,7 @@ function OutlineChip({
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.chipText, styles6.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.chipText, styles5.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -624,7 +771,7 @@ function SolidChip({
       hitSlop: CHIP_HIT_SLOP,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -646,7 +793,7 @@ var ChipSelector = ({
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const chipColors = React__default.default.useMemo(() => {
+  const chipColors = React2__default.default.useMemo(() => {
     const primary = palette.primary["500"];
     return {
       border: colors.border,
@@ -689,12 +836,12 @@ var ChipSelector = ({
       required,
       spacing,
       testID,
-      children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
     }
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles7 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -725,7 +872,7 @@ var FormSwitch = ({
   const { theme } = uiFeedback.useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React2__default.default.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -734,13 +881,13 @@ var FormSwitch = ({
     reactNative.View,
     {
       style: [
-        styles7.container,
+        styles6.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Switch,
@@ -765,7 +912,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles8 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -816,7 +963,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React2__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };
@@ -847,101 +994,26 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles8.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles7.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles8.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
   );
 };
-var FIELD_GAP = 4;
-var LABEL_FONT = 11;
-var LABEL_LETTER_SPACING = 0.4;
-var INPUT_RADIUS = 8;
-var INPUT_PAD_H = 12;
-var INPUT_PAD_V = 10;
-var INPUT_FONT = 14;
-var INPUT_BORDER = 1;
-var DATE_ROW_GAP = 8;
-var CHEVRON_FONT = 10;
-var MENU_TOP_GAP = 4;
-var MENU_RADIUS = 8;
-var MENU_PAD_V = 4;
-var MENU_OPT_PAD_H = 12;
-var MENU_OPT_PAD_V = 8;
-var MENU_MIN_WIDTH = 160;
-var MENU_MAX_HEIGHT = 260;
-var MENU_Z = 1e3;
-var MENU_ELEVATION = 8;
-var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
-var OPTION_FONT = 14;
-var ERROR_FONT = 12;
-var ERROR_GAP = 3;
-var controlStyles = reactNative.StyleSheet.create({
-  /** The shared bordered box every dense text control renders in. */
-  input: {
-    borderWidth: INPUT_BORDER,
-    borderRadius: INPUT_RADIUS,
-    paddingHorizontal: INPUT_PAD_H,
-    paddingVertical: INPUT_PAD_V,
-    fontSize: INPUT_FONT
-  },
-  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
-  selectTrigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: DATE_ROW_GAP,
-    borderWidth: INPUT_BORDER,
-    borderRadius: INPUT_RADIUS,
-    paddingHorizontal: INPUT_PAD_H,
-    paddingVertical: INPUT_PAD_V
-  },
-  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
-  chevron: { fontSize: CHEVRON_FONT },
-  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
-  dateCol: { gap: FIELD_GAP, flex: 1 },
-  /**
-   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
-   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
-   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
-   * too would make one field shout twice.
-   */
-  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
-  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
-  anchor: { position: "relative" },
-  menu: {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    marginTop: MENU_TOP_GAP,
-    minWidth: MENU_MIN_WIDTH,
-    maxHeight: MENU_MAX_HEIGHT,
-    borderWidth: INPUT_BORDER,
-    borderRadius: MENU_RADIUS,
-    paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
-    boxShadow: MENU_BOX_SHADOW,
-    elevation: MENU_ELEVATION,
-    overflow: "hidden"
-  },
-  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
-  optionText: { fontSize: OPTION_FONT },
-  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
-});
-var IS_WEB3 = typeof document !== "undefined";
+var IS_WEB5 = typeof document !== "undefined";
 var ESCAPE_KEY = "Escape";
 var ACTIVE_WEIGHT = "700";
 var IDLE_WEIGHT = "400";
 function useDismiss(anchorRef, menuRef, onDismiss) {
-  React.useEffect(() => {
-    if (!IS_WEB3) return void 0;
+  React2.useEffect(() => {
+    if (!IS_WEB5) return void 0;
     const onMouseDown = (event) => {
       const anchorNode = anchorRef.current;
       const menuNode = menuRef.current;
@@ -971,7 +1043,7 @@ function AnchoredMenu({
   testID,
   anchorRef
 }) {
-  const menuRef = React__default.default.useRef(null);
+  const menuRef = React2__default.default.useRef(null);
   useDismiss(anchorRef, menuRef, onDismiss);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
@@ -1010,25 +1082,26 @@ function SelectControl({
   placeholder = "",
   accessibilityLabel,
   accessibilityHint,
+  labelledById,
   optionHint = "",
   style,
   testID
 }) {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const anchorRef = React.useRef(null);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const selectedLabel = React.useMemo(() => {
+  const anchorRef = React2.useRef(null);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const selectedLabel = React2.useMemo(() => {
     const found = options.find((o) => o.value === value);
     return found?.label ?? placeholder;
   }, [options, placeholder, value]);
-  const close = React.useCallback(() => {
+  const close = React2.useCallback(() => {
     setIsOpen(false);
   }, []);
-  const toggle = React.useCallback(() => {
+  const toggle = React2.useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
-  const select = React.useCallback(
+  const select = React2.useCallback(
     (next) => {
       onChange(next);
       setIsOpen(false);
@@ -1044,6 +1117,7 @@ function SelectControl({
         accessibilityHint,
         accessibilityState: { expanded: isOpen },
         "aria-expanded": isOpen,
+        "aria-labelledby": labelledById,
         onPress: toggle,
         style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surface }],
         testID: `${testID}-trigger`,
@@ -1120,22 +1194,22 @@ function TypeaheadControl({
 }) {
   const { theme } = uiFeedback.useUi();
   const { colors, palette, semantic } = theme;
-  const anchorRef = React.useRef(null);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const exactPick = React.useMemo(() => options.some((o) => o.label === value), [options, value]);
-  const suggestions = React.useMemo(
+  const anchorRef = React2.useRef(null);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const exactPick = React2.useMemo(() => options.some((o) => o.label === value), [options, value]);
+  const suggestions = React2.useMemo(
     () => exactPick ? [] : suggestOptions(options, value, minChars, maxSuggestions),
     [exactPick, options, value, minChars, maxSuggestions]
   );
   const showMenu = isOpen && suggestions.length > 0;
-  const handleChange = React.useCallback(
+  const handleChange = React2.useCallback(
     (next) => {
       onChange(next);
       setIsOpen(true);
     },
     [onChange]
   );
-  const pick = React.useCallback(
+  const pick = React2.useCallback(
     (optionValue) => {
       const opt = options.find((o) => o.value === optionValue);
       onChange(opt?.label ?? optionValue);
@@ -1143,10 +1217,10 @@ function TypeaheadControl({
     },
     [options, onChange]
   );
-  const handleBlur = React.useCallback(() => {
+  const handleBlur = React2.useCallback(() => {
     setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
   }, []);
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = React2.useCallback(() => {
     setIsOpen(false);
     onSubmit?.();
   }, [onSubmit]);