@dloizides/ui-forms 1.5.0 → 1.7.0

package/dist/index.js

@@ -1,51 +1,122 @@
 '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');
+var uiButtons = require('@dloizides/ui-buttons');
 
 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
+function FieldLabel({
+  label,
+  marker,
+  optionalLabel,
+  style,
+  requiredMarkStyle,
+  optionalMarkStyle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style, children: [
+    label,
+    " ",
+    marker === "required" ? (
+      // The asterisk is decorative — the control's `aria-required` conveys "required" to
+      // assistive tech, so a screen reader says "required" instead of "star".
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: requiredMarkStyle, children: "*" })
+    ) : null,
+    marker === "optional" && optionalLabel !== "" ? (
+      // Also decorative: "optional" is the ABSENCE of `aria-required`, which assistive tech
+      // already conveys. Rendering it to a screen reader would double-announce the same fact.
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { "aria-hidden": true, accessibilityElementsHidden: true, importantForAccessibility: "no", style: optionalMarkStyle, children: optionalLabel })
+    ) : null
+  ] });
+}
+
+// src/Field/fieldMarkers.ts
+var DEFAULT_OPTIONAL_LABEL = "(optional)";
+function resolveFieldMarker(required, optional) {
+  if (required) return "required";
+  if (optional) return "optional";
+  return "none";
+}
+var FIELD_FONT_SIZE = 13;
+var FIELD_FONT_WEIGHT = "600";
+var CONTROL_FONT_SIZE = 11;
+var CONTROL_FONT_WEIGHT = "700";
+var CONTROL_LETTER_SPACING = 0.4;
+var labelVariantStyles = reactNative.StyleSheet.create({
+  field: {
+    fontSize: FIELD_FONT_SIZE,
+    fontWeight: FIELD_FONT_WEIGHT
+  },
+  control: {
+    fontSize: CONTROL_FONT_SIZE,
+    fontWeight: CONTROL_FONT_WEIGHT,
+    letterSpacing: CONTROL_LETTER_SPACING,
+    textTransform: "uppercase"
+  }
+});
+function resolveLabelVariantStyle(variant) {
+  return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
+}
 var CONTAINER_MARGIN_BOTTOM = 16;
-var LABEL_FONT_SIZE = 13;
-var LABEL_FONT_WEIGHT = "600";
 var LABEL_MARGIN_BOTTOM = 4;
 var ERROR_FONT_SIZE = 12;
 var ERROR_MARGIN_TOP = 4;
+var HINT_FONT_SIZE = 12;
+var HINT_MARGIN_TOP = 4;
+var OPTIONAL_MARK_FONT_WEIGHT = "400";
 var styles = reactNative.StyleSheet.create({
   container: {
     marginBottom: CONTAINER_MARGIN_BOTTOM
   },
   label: {
-    marginBottom: LABEL_MARGIN_BOTTOM,
-    fontSize: LABEL_FONT_SIZE,
-    fontWeight: LABEL_FONT_WEIGHT
+    marginBottom: LABEL_MARGIN_BOTTOM
+  },
+  hintText: {
+    fontSize: HINT_FONT_SIZE,
+    marginTop: HINT_MARGIN_TOP
   },
   errorText: {
     fontSize: ERROR_FONT_SIZE,
     marginTop: ERROR_MARGIN_TOP
+  },
+  optionalMark: {
+    fontWeight: OPTIONAL_MARK_FONT_WEIGHT
   }
 });
 var fieldSeq = 0;
-function useFieldErrorId() {
-  const [id] = React3__default.default.useState(() => {
+function useFieldIds() {
+  const [ids] = React__default.default.useState(() => {
     fieldSeq += 1;
-    return `field-error-${String(fieldSeq)}`;
+    const seq = String(fieldSeq);
+    return { hintId: `field-hint-${seq}`, errorId: `field-error-${seq}` };
   });
-  return id;
+  return ids;
+}
+function isPresent(value) {
+  return typeof value === "string" && value !== "";
 }
 function hasFieldError(error) {
-  return typeof error === "string" && error !== "";
+  return isPresent(error);
+}
+function joinDescribedBy(hintId, errorId) {
+  const ids = [hintId, errorId].filter((id) => isPresent(id));
+  return ids.length > 0 ? ids.join(" ") : void 0;
 }
 var Field = ({
   label,
   children,
   required = false,
+  optional = false,
+  optionalLabel = DEFAULT_OPTIONAL_LABEL,
+  hint,
   error,
+  labelVariant,
+  labelStyle,
   containerStyle,
   testID
 }) => {
@@ -53,30 +124,89 @@ var Field = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = hasFieldError(error);
-  const errorId = useFieldErrorId();
-  const themeStyles = React3__default.default.useMemo(
+  const hasHint = isPresent(hint);
+  const labelText = label ?? "";
+  const hasLabel = labelText !== "";
+  const marker = resolveFieldMarker(required, optional);
+  const { hintId, errorId } = useFieldIds();
+  const themeStyles = React__default.default.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
+      // The optional marker is an aside, so it sits a step back from the label's own ink.
+      optionalMark: { color: colors.textSecondary },
+      hintText: { color: colors.textSecondary },
       errorText: { color: errorColor }
     }),
     [colors.textSecondary, errorColor]
   );
-  const control = typeof children === "function" ? children({ describedById: hasError ? errorId : void 0, hasError }) : children;
+  const describedById = joinDescribedBy(hasHint ? hintId : void 0, hasError ? errorId : void 0);
+  const control = typeof children === "function" ? children({ describedById, 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: [
-      label,
-      " ",
-      required ? (
-        // The asterisk is decorative — the control's `aria-required` conveys "required" to
-        // 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
-    ] }),
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      FieldLabel,
+      {
+        label: labelText,
+        marker,
+        optionalLabel,
+        optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
+        requiredMarkStyle: themeStyles.requiredMark,
+        style: [styles.label, resolveLabelVariantStyle(labelVariant), themeStyles.label, labelStyle]
+      }
+    ) : null,
     control,
+    hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles.hintText, themeStyles.hintText], children: hint }) : null,
     hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: errorId, role: "alert", style: [styles.errorText, themeStyles.errorText], children: error }) : null
   ] });
 };
+var ACTIONS_GAP = 12;
+var styles2 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: ACTIONS_GAP
+  }
+});
+var FormActions = ({
+  onSave,
+  onCancel,
+  saveLabel,
+  cancelLabel = "",
+  saveHint,
+  cancelHint,
+  saving = false,
+  saveDisabled = false,
+  containerStyle,
+  saveTestID = "save-button",
+  cancelTestID = "cancel-button",
+  testID
+}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.container, containerStyle], testID, children: [
+  typeof onCancel === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
+    uiButtons.Button,
+    {
+      accessibilityHint: cancelHint ?? cancelLabel,
+      accessibilityLabel: cancelLabel,
+      disabled: saving,
+      label: cancelLabel,
+      testID: cancelTestID,
+      variant: "outline",
+      onPress: onCancel
+    }
+  ) : null,
+  /* @__PURE__ */ jsxRuntime.jsx(
+    uiButtons.Button,
+    {
+      accessibilityHint: saveHint ?? saveLabel,
+      accessibilityLabel: saveLabel,
+      disabled: saveDisabled,
+      label: saveLabel,
+      loading: saving,
+      testID: saveTestID,
+      variant: "primary",
+      onPress: onSave
+    }
+  )
+] });
 var IS_WEB = reactNative.Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
@@ -109,34 +239,35 @@ 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;
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
     if (!IS_WEB) return base;
-    const ring = isFocused && !hasError ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(primary, FOCUS_RING_ALPHA)}` : "none";
+    const ringColor = hasError ? errorColor : primary;
+    const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
       transitionProperty: TRANSITION_PROPERTY,
       // Collapse the eased transition to instant when the user prefers reduced motion.
@@ -157,8 +288,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 +303,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,
@@ -202,7 +333,7 @@ var INPUT_PADDING_V = 10;
 var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
 var INPUT_BORDER_WIDTH = 1;
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   input: {
     paddingVertical: INPUT_PADDING_V,
     paddingHorizontal: INPUT_PADDING_H,
@@ -224,7 +355,7 @@ var FormField = ({
     describedById,
     hasError,
     requiredField: required,
-    style: styles2.input,
+    style: styles3.input,
     testID: "form-field-input",
     ...textInputProps
   }
@@ -244,6 +375,14 @@ 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;
+var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
+var ON_BRAND_SCALE = "onBrand";
+var MAIN_STEP = "500";
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
+}
 function withAlpha2(hex, alpha) {
   const normalized = hex.replace("#", "");
   const isShort = normalized.length === HEX_SHORT_LENGTH2;
@@ -254,18 +393,18 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles3 = reactNative.StyleSheet.create({
-  label: {
-    marginBottom: 8,
-    fontWeight: "600"
-  },
+var styles4 = reactNative.StyleSheet.create({
   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,
@@ -283,14 +422,26 @@ var styles3 = reactNative.StyleSheet.create({
   chipText: {},
   chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
+function chipIdentity(option, selected, config) {
+  return {
+    testID: `${config.prefix}-${String(option.value)}`,
+    // The English default is retained verbatim: erevna/katalogos assert the exact string
+    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
+    accessibilityHint: config.hint ?? `Selects ${option.label}`,
+    ariaPressed: config.multiple ? selected : void 0
+  };
+}
 function OutlineChip({
   option,
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   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;
@@ -298,18 +449,19 @@ function OutlineChip({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, styles3.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.chipText, styles4.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -318,26 +470,35 @@ function SolidChip({
   selected,
   disabled,
   colors,
+  testID,
+  accessibilityHint,
+  ariaPressed,
   onPress
 }) {
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
-  const textColor = selected ? WHITE_COLOR : colors.textStrong;
+  const textColor = selected ? colors.onPrimary : colors.textStrong;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
-      accessibilityHint: `Selects ${option.label}`,
+      accessibilityHint,
       accessibilityLabel: option.label,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
+      "aria-pressed": ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
-      style: styles3.chipWrapper,
-      testID: `chip-selector-chip-${String(option.value)}`,
+      style: styles4.chipWrapper,
+      testID,
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
+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,59 +507,53 @@ var ChipSelector = ({
   multiple = false,
   disabled = false,
   variant = "solid",
-  containerStyle
+  containerStyle,
+  required = false,
+  error,
+  testID,
+  chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
+  optionAccessibilityHint
 }) => {
   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,
       textStrong: colors.text,
       textMuted: colors.textSecondary,
       primary,
+      onPrimary: onBrandInk(palette),
       muted: colors.background,
       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]);
+  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
   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 selected = isSelected(option.value);
+    const chipProps = {
+      colors: chipColors,
+      disabled,
+      option,
+      selected,
+      ...chipIdentity(option, selected, {
+        prefix: chipTestIDPrefix,
+        hint: optionAccessibilityHint,
+        multiple
+      }),
+      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: styles4.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) }) });
 };
 var DESCRIPTION_FONT_SIZE = 12;
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -429,7 +584,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 };
@@ -438,13 +593,13 @@ var FormSwitch = ({
     reactNative.View,
     {
       style: [
-        styles4.container,
+        styles5.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Switch,
@@ -464,12 +619,12 @@ var FormSwitch = ({
   );
 };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
-var HINT_FONT_SIZE = 12;
+var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -498,7 +653,7 @@ var styles5 = reactNative.StyleSheet.create({
     fontWeight: "600"
   },
   hint: {
-    fontSize: HINT_FONT_SIZE,
+    fontSize: HINT_FONT_SIZE2,
     marginTop: 2
   }
 });
@@ -520,7 +675,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 };
@@ -551,14 +706,14 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles5.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles6.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.textColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -566,7 +721,9 @@ var FormCheckbox = ({
 };
 
 exports.ChipSelector = ChipSelector;
+exports.DEFAULT_OPTIONAL_LABEL = DEFAULT_OPTIONAL_LABEL;
 exports.Field = Field;
+exports.FormActions = FormActions;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;