@dloizides/ui-forms 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.6.0
+
+- **`ChipSelector` now composes `Field` internally — its label was drifting.** It rendered its OWN
+  `<Text>` label whose metrics differed from `Field`'s on three of four axes: `marginBottom: 8`
+  (vs 4), NO `fontSize` at all so it fell back to RN's ~14 (vs 13), and `colors.text`
+  (vs `textSecondary`). A `ChipSelector` next to a `FormField` in a row/grid therefore started a
+  different distance down the column and read as a different weight of text. Found at 4 sites in
+  aml-v2 (`TenantWatchlistsEditor`, `CoverageSelector`, `CustomCoverageFields`,
+  `AdvancedMatching`); fixing it in the package fixes every consumer with zero app churn.
+  The local label styles are deleted — there is now exactly one label implementation in the kit.
+- **`ChipSelectorProps` is unchanged and fully backward-compatible** — every existing prop keeps
+  its name, type and default, and `label` stays OPTIONAL. With no label (or an empty one) NO label
+  row is rendered, so composing `Field` cannot introduce a phantom gap above the chips.
+- **`ChipSelector` gains `required`, `error` and `testID`** (all optional, all additive) now that
+  `Field` provides them for free. `error` renders the same `role="alert"` line as `FormField` and
+  is tied to the chip group via `aria-describedby` + `aria-invalid` (web only; no-op on native).
+- **Spacing:** a `ChipSelector` now carries `Field`'s `marginBottom: 16` like every other field
+  (it previously had none). The chips' own 8px trailing gutter is cancelled on the group so the
+  block's total bottom spacing is exactly 16 — the same as a `FormField`, not 24. Pass
+  `containerStyle` to override, as before.
+- **`Field`'s `label` is now optional** (widened from `label: string`, so existing callers are
+  unaffected). An absent or empty label renders no label row, letting a control whose label lives
+  elsewhere still use the shared shell for its error line and spacing.
+- `FormSwitch` / `FormCheckbox` are deliberately NOT changed — see `src/labelRoles.test.tsx`.
+  Their labels are INLINE control labels (beside the control in a row, the row's primary text),
+  not field headers stacked above a control, so they have no alignment defect to fix and `Field`'s
+  smaller/dimmer header treatment would be a regression. They were already identical to each
+  other; a new test now enforces that they stay so.
+
 ## 1.5.0
 
 - **Add `Field` — the generic label-over-control wrapper.** `FormField` is hard-wired to a text

package/README.md

@@ -1,75 +1,107 @@
-# @dloizides/ui-forms
-
-Themable, brand-agnostic React Native (RN-web) **form** components for the dloizides.com
-portfolio: `Field`, `FormField`, `ChipSelector`, `FormSwitch`. They read theme colours from the shared
-`@dloizides/ui-feedback` UI context (`useUi`) — mount one `UiProvider` / `FeedbackUiProvider`
-at your app root and these components pick up your theme automatically.
-
-## Install
-
-```bash
-npm install @dloizides/ui-forms @dloizides/ui-feedback
-```
-
-Peer dependencies: `@dloizides/ui-feedback >= 1.1.0`, `react >= 18`, `react-native >= 0.74`
-(use `react-native-web` on web).
-
-## Usage
-
-```tsx
-import { FormField, ChipSelector, FormSwitch } from '@dloizides/ui-forms';
-
-<FormField label="Email" required error={errors.email} value={email} onChangeText={setEmail} />
-<ChipSelector label="Plan" options={plans} value={plan} onChange={setPlan} />
-<FormSwitch label="Email notifications" value={notify} onValueChange={setNotify} />
-```
-
-## `Field` — label any control, not just a text input
-
-`FormField` is hard-wired to a text input. For **any other control** — a dropdown, a date picker,
-a chip selector — wrap it in `Field` to get the identical label row, required mark, error line and
-bottom spacing. This is what keeps a dropdown aligned with the `FormField` next to it: without it
-the dropdown's box starts a label-row higher and the row loses its vertical rhythm.
-
-```tsx
-import { Field } from '@dloizides/ui-forms';
-
-<Field label="Currency" required error={errors.currency}>
-  <ModalDropdown options={currencies} value={currency} onChange={setCurrency} />
-</Field>
-```
-
-`FormField` composes `Field` internally, so the two can never drift out of alignment.
-
-To wire the error line into a custom control's own `aria-describedby` / invalid state, pass a
-**function** child — it receives `{ describedById, hasError }` (`describedById` is `undefined`
-when there is no error):
-
-```tsx
-<Field label="Country" error={errors.country}>
-  {({ describedById, hasError }) => (
-    <CountryPicker aria-describedby={describedById} hasError={hasError} value={country} onChange={setCountry} />
-  )}
-</Field>
-```
-
-| Prop | Type | Notes |
-|------|------|-------|
-| `label` | `string` | required |
-| `children` | `ReactNode \| (ctx) => ReactNode` | the control |
-| `required` | `boolean` | renders a decorative `*` (hidden from assistive tech) |
-| `error` | `string` | renders a `role="alert"` line, linked via the child's `describedById` |
-| `containerStyle` | `ViewStyle` | merged over the container |
-| `testID` | `string` | on the container |
-
-The injected theme needs `colors.{surface,text,textSecondary,border}`, `palette.primary['500']`
-and `semantic.error['500']` — supplied via `@dloizides/ui-feedback`'s provider. Without a provider
-the components fall back to a neutral default theme.
-
-## testIDs
-
-`form-field-input`, `chip-selector-chip-<value>`, `form-switch` (overridable on FormSwitch).
-
-## License
-
-MIT
+# @dloizides/ui-forms
+
+Themable, brand-agnostic React Native (RN-web) **form** components for the dloizides.com
+portfolio: `Field`, `FormField`, `ChipSelector`, `FormSwitch`. They read theme colours from the shared
+`@dloizides/ui-feedback` UI context (`useUi`) — mount one `UiProvider` / `FeedbackUiProvider`
+at your app root and these components pick up your theme automatically.
+
+## Install
+
+```bash
+npm install @dloizides/ui-forms @dloizides/ui-feedback
+```
+
+Peer dependencies: `@dloizides/ui-feedback >= 1.1.0`, `react >= 18`, `react-native >= 0.74`
+(use `react-native-web` on web).
+
+## Usage
+
+```tsx
+import { FormField, ChipSelector, FormSwitch } from '@dloizides/ui-forms';
+
+<FormField label="Email" required error={errors.email} value={email} onChangeText={setEmail} />
+<ChipSelector label="Plan" options={plans} value={plan} onChange={setPlan} />
+<FormSwitch label="Email notifications" value={notify} onValueChange={setNotify} />
+```
+
+## `Field` — label any control, not just a text input
+
+`FormField` is hard-wired to a text input. For **any other control** — a dropdown, a date picker,
+a chip selector — wrap it in `Field` to get the identical label row, required mark, error line and
+bottom spacing. This is what keeps a dropdown aligned with the `FormField` next to it: without it
+the dropdown's box starts a label-row higher and the row loses its vertical rhythm.
+
+```tsx
+import { Field } from '@dloizides/ui-forms';
+
+<Field label="Currency" required error={errors.currency}>
+  <ModalDropdown options={currencies} value={currency} onChange={setCurrency} />
+</Field>
+```
+
+`FormField` **and** `ChipSelector` compose `Field` internally, so the label row can never drift
+out of alignment between them — there is exactly one label implementation in the kit.
+
+To wire the error line into a custom control's own `aria-describedby` / invalid state, pass a
+**function** child — it receives `{ describedById, hasError }` (`describedById` is `undefined`
+when there is no error):
+
+```tsx
+<Field label="Country" error={errors.country}>
+  {({ describedById, hasError }) => (
+    <CountryPicker aria-describedby={describedById} hasError={hasError} value={country} onChange={setCountry} />
+  )}
+</Field>
+```
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `label` | `string` | optional — an absent or empty label renders NO label row |
+| `children` | `ReactNode \| (ctx) => ReactNode` | the control |
+| `required` | `boolean` | renders a decorative `*` (hidden from assistive tech) |
+| `error` | `string` | renders a `role="alert"` line, linked via the child's `describedById` |
+| `containerStyle` | `ViewStyle` | merged over the container |
+| `testID` | `string` | on the container |
+
+The injected theme needs `colors.{surface,text,textSecondary,border}`, `palette.primary['500']`
+and `semantic.error['500']` — supplied via `@dloizides/ui-feedback`'s provider. Without a provider
+the components fall back to a neutral default theme.
+
+## `ChipSelector`
+
+```tsx
+<ChipSelector
+  label="Plan"
+  required
+  error={errors.plan}
+  options={plans}
+  value={plan}
+  onChange={setPlan}
+  variant="outline"
+/>
+```
+
+Its label, required mark, error line and bottom spacing come from `Field`. `label` is optional:
+with no label no label row is rendered, so it drops into a toolbar or filter bar cleanly.
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `label` | `string` | optional — no label means no label row |
+| `options` | `Array<{ value, label }>` | `value` is a `string` or `number` |
+| `value` | `T \| T[]` | array when `multiple` |
+| `onChange` | `(value: T) => void` | fires the pressed value; the parent owns toggle logic |
+| `multiple` | `boolean` | selection is an array |
+| `disabled` | `boolean` | disables every chip |
+| `variant` | `'solid' \| 'outline'` | `solid` (default) = filled pill; `outline` = tinted outline |
+| `required` | `boolean` | renders `Field`'s decorative `*` |
+| `error` | `string` | `role="alert"` line, tied to the chip group via `aria-describedby` |
+| `containerStyle` | `ViewStyle` | merged over the container |
+| `testID` | `string` | on the container |
+
+## testIDs
+
+`form-field-input`, `chip-selector-chip-<value>`, `form-switch` (overridable on FormSwitch).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -25,7 +25,13 @@ interface FieldChildContext {
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
-    label: string;
+    /**
+     * Label shown above the control. Optional so a control whose label is supplied elsewhere (or
+     * which genuinely has none) can still use the shared shell for its error line + spacing: an
+     * absent or empty label renders NO label row at all, rather than an empty one that would add a
+     * phantom gap and misalign the control against its labelled siblings.
+     */
+    label?: string;
     children: FieldChildren;
     required?: boolean;
     error?: string;
@@ -117,6 +123,12 @@ declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
  *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
  *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
  *    Hover (web) lifts the border/ink to the primary colour.
+ *
+ * The label row, the error line and the container spacing come from the shared `Field` wrapper —
+ * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
+ * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
+ * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
+ * column and read as a different weight of text. Now there is exactly one label implementation.
  */
 
 /** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
@@ -126,6 +138,7 @@ interface ChipOption<T> {
     label: string;
 }
 interface ChipSelectorProps<T> {
+    /** Optional — with no label, no label row is rendered (no phantom gap above the chips). */
     label?: string;
     options: Array<ChipOption<T>>;
     value: T | T[];
@@ -135,8 +148,13 @@ interface ChipSelectorProps<T> {
     /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
     variant?: ChipVariant;
     containerStyle?: ViewStyle;
+    /** Marks the selection mandatory — renders `Field`'s decorative `*` next to the label. */
+    required?: boolean;
+    /** Validation message under the chips, wired to the chip group via `aria-describedby`. */
+    error?: string;
+    testID?: string;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, required, error, testID, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.

package/dist/index.d.ts

@@ -25,7 +25,13 @@ interface FieldChildContext {
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
-    label: string;
+    /**
+     * Label shown above the control. Optional so a control whose label is supplied elsewhere (or
+     * which genuinely has none) can still use the shared shell for its error line + spacing: an
+     * absent or empty label renders NO label row at all, rather than an empty one that would add a
+     * phantom gap and misalign the control against its labelled siblings.
+     */
+    label?: string;
     children: FieldChildren;
     required?: boolean;
     error?: string;
@@ -117,6 +123,12 @@ declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
  *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
  *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
  *    Hover (web) lifts the border/ink to the primary colour.
+ *
+ * The label row, the error line and the container spacing come from the shared `Field` wrapper —
+ * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
+ * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
+ * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
+ * column and read as a different weight of text. Now there is exactly one label implementation.
  */
 
 /** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
@@ -126,6 +138,7 @@ interface ChipOption<T> {
     label: string;
 }
 interface ChipSelectorProps<T> {
+    /** Optional — with no label, no label row is rendered (no phantom gap above the chips). */
     label?: string;
     options: Array<ChipOption<T>>;
     value: T | T[];
@@ -135,8 +148,13 @@ interface ChipSelectorProps<T> {
     /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
     variant?: ChipVariant;
     containerStyle?: ViewStyle;
+    /** Marks the selection mandatory — renders `Field`'s decorative `*` next to the label. */
+    required?: boolean;
+    /** Validation message under the chips, wired to the chip group via `aria-describedby`. */
+    error?: string;
+    testID?: string;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, required, error, testID, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/Field/Field.tsx
 var CONTAINER_MARGIN_BOTTOM = 16;
@@ -32,7 +32,7 @@ var styles = reactNative.StyleSheet.create({
 });
 var fieldSeq = 0;
 function useFieldErrorId() {
-  const [id] = React3__default.default.useState(() => {
+  const [id] = React__default.default.useState(() => {
     fieldSeq += 1;
     return `field-error-${String(fieldSeq)}`;
   });
@@ -53,8 +53,9 @@ var Field = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = hasFieldError(error);
+  const hasLabel = typeof label === "string" && label !== "";
   const errorId = useFieldErrorId();
-  const themeStyles = React3__default.default.useMemo(
+  const themeStyles = React__default.default.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
@@ -64,7 +65,7 @@ var Field = ({
   );
   const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
       label,
       " ",
       required ? (
@@ -72,7 +73,7 @@ var Field = ({
         // assistive tech, so a screen reader says "required" instead of "star".
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: themeStyles.requiredMark, children: "*" })
       ) : null
-    ] }),
+    ] }) : null,
     control,
     hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
   ] });
@@ -109,27 +110,27 @@ function useThemedInput(options = {}) {
   const { hasError = false, onFocus, onBlur } = options;
   const { theme } = uiFeedback.useUi();
   const { colors, palette, semantic } = theme;
-  const [isFocused, setIsFocused] = React3.useState(false);
-  const [isHovered, setIsHovered] = React3.useState(false);
-  const handleFocus = React3.useCallback(
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const handleFocus = React.useCallback(
     (e) => {
       setIsFocused(true);
       onFocus?.(e);
     },
     [onFocus]
   );
-  const handleBlur = React3.useCallback(
+  const handleBlur = React.useCallback(
     (e) => {
       setIsFocused(false);
       onBlur?.(e);
     },
     [onBlur]
   );
-  const handleHoverIn = React3.useCallback(() => setIsHovered(true), []);
-  const handleHoverOut = React3.useCallback(() => setIsHovered(false), []);
+  const handleHoverIn = React.useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = React.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
   const errorColor = semantic.error["500"];
-  const style = React3.useMemo(() => {
+  const style = React.useMemo(() => {
     const restBorder = hasError ? errorColor : colors.border;
     const focusBorder = hasError ? errorColor : primary;
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
@@ -157,8 +158,8 @@ function useThemedInput(options = {}) {
     primary,
     errorColor
   ]);
-  const focusBind = React3.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
-  const hoverBind = React3.useMemo(
+  const focusBind = React.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
+  const hoverBind = React.useMemo(
     () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
@@ -172,7 +173,7 @@ function useThemedInput(options = {}) {
   };
 }
 var IS_WEB2 = reactNative.Platform.OS === "web";
-var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+var ThemedTextInput = React__default.default.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
   const {
     style: themedStyle,
     placeholderTextColor: themedPlaceholder,
@@ -244,6 +245,7 @@ var RGB_R_END = 2;
 var RGB_G_END = 4;
 var RGB_B_END = 6;
 var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+var CHIP_GUTTER = 8;
 function withAlpha2(hex, alpha) {
   const normalized = hex.replace("#", "");
   const isShort = normalized.length === HEX_SHORT_LENGTH2;
@@ -255,17 +257,17 @@ function withAlpha2(hex, alpha) {
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
 var styles3 = reactNative.StyleSheet.create({
-  label: {
-    marginBottom: 8,
-    fontWeight: "600"
-  },
   chipContainer: {
     flexDirection: "row",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    // Each chip's bottom gutter also hangs off the LAST row, stacking on `Field`'s container
+    // margin (8 + 16 = 24) and dropping the block below the `FormField` beside it. Cancelling it
+    // is standard gutter compensation: inner rows keep their 8px, the block ends at Field's 16.
+    marginBottom: -CHIP_GUTTER
   },
   chipWrapper: {
-    marginRight: 8,
-    marginBottom: 8
+    marginRight: CHIP_GUTTER,
+    marginBottom: CHIP_GUTTER
   },
   chip: {
     paddingHorizontal: 12,
@@ -290,7 +292,7 @@ function OutlineChip({
   colors,
   onPress
 }) {
-  const [hovered, setHovered] = React3__default.default.useState(false);
+  const [hovered, setHovered] = React__default.default.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
   const backgroundColor = selected ? colors.tint : colors.muted;
@@ -338,6 +340,11 @@ function SolidChip({
     }
   );
 }
+var IS_WEB3 = reactNative.Platform.OS === "web";
+function groupA11yProps(describedById, hasError) {
+  if (!IS_WEB3) return {};
+  return { "aria-invalid": hasError ? true : void 0, "aria-describedby": describedById };
+}
 var ChipSelector = ({
   label,
   options,
@@ -346,12 +353,14 @@ var ChipSelector = ({
   multiple = false,
   disabled = false,
   variant = "solid",
-  containerStyle
+  containerStyle,
+  required = false,
+  error,
+  testID
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const hasLabel = typeof label === "string" && label !== "";
-  const chipColors = React3__default.default.useMemo(() => {
+  const chipColors = React__default.default.useMemo(() => {
     const primary = palette.primary["500"];
     return {
       border: colors.border,
@@ -362,40 +371,23 @@ var ChipSelector = ({
       tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
     };
   }, [colors.border, colors.text, colors.textSecondary, colors.background, palette.primary]);
-  const labelStyle = React3__default.default.useMemo(() => ({ color: colors.text }), [colors.text]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
-    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, labelStyle], children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.chipContainer, children: options.map((option) => {
-      const selected = isSelected(option.value);
-      const onPress = () => onChange(option.value);
-      return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(
-        OutlineChip,
-        {
-          colors: chipColors,
-          disabled,
-          option,
-          selected,
-          onPress
-        },
-        String(option.value)
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        SolidChip,
-        {
-          colors: chipColors,
-          disabled,
-          option,
-          selected,
-          onPress
-        },
-        String(option.value)
-      );
-    }) })
-  ] });
+  function renderChip(option) {
+    const chipProps = {
+      colors: chipColors,
+      disabled,
+      option,
+      selected: isSelected(option.value),
+      onPress: () => onChange(option.value)
+    };
+    const key = String(option.value);
+    return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(OutlineChip, { ...chipProps }, key) : /* @__PURE__ */ jsxRuntime.jsx(SolidChip, { ...chipProps }, key);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, testID, children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
 };
 var DESCRIPTION_FONT_SIZE = 12;
 var styles4 = reactNative.StyleSheet.create({
@@ -429,7 +421,7 @@ var FormSwitch = ({
   const { theme } = uiFeedback.useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React3__default.default.useMemo(() => {
+  const themeStyles = React__default.default.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -520,7 +512,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React3__default.default.useMemo(() => {
+  const themeStyles = React__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };