@dloizides/ui-forms 1.18.7 → 1.20.0

package/dist/index.d.mts

@@ -264,10 +264,41 @@ interface FormCellProps {
     basis?: number;
     /** `false` pins the cell to its basis instead of letting it absorb the row's slack. */
     grow?: boolean;
+    /** Puts an unlabelled control (a button) on the input line of the labelled cells beside it. */
+    alignToControl?: boolean;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const FormCell: ({ children, minWidth, basis, grow, style, testID, }: FormCellProps) => React.ReactElement;
+declare const FormCell: ({ children, minWidth, basis, grow, alignToControl, style, testID, }: FormCellProps) => React.ReactElement;
+
+interface AlignToControlProps {
+    children: React.ReactNode;
+    labelVariant?: FieldLabelVariant;
+    spacing?: FieldSpacing;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Puts a button or other unlabelled control on the input line of the labelled `Field`s beside it. */
+declare const AlignToControl: ({ children, labelVariant, spacing, style, testID, }: AlignToControlProps) => React.ReactElement;
+
+interface InlineFieldRowProps {
+    field: React.ReactNode;
+    action: React.ReactNode;
+    fieldMaxWidth: number;
+    inlineMinWidth?: number;
+    gap?: number;
+    testID?: string;
+}
+/** A labelled field and its action: stacked on phones, one row on desktop with the action on the input line. */
+declare const InlineFieldRow: ({ field, action, fieldMaxWidth, inlineMinWidth, gap, testID, }: InlineFieldRowProps) => React.ReactElement;
+
+declare const INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+interface InlineFieldRowLayout {
+    inline: boolean;
+    fieldMaxWidth: number | undefined;
+}
+/** Field and action share one row only at `inlineMinWidth` and wider; below it they stack. */
+declare function inlineFieldRowLayout(windowWidth: number, fieldMaxWidth: number, inlineMinWidth?: number): InlineFieldRowLayout;
 
 /**
  * `FormSection` — a titled group of fields. The React answer to v1's `<fieldset>` / `<legend>`.
@@ -470,6 +501,8 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
+    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    editable?: boolean;
 }
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
@@ -1029,4 +1062,4 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -264,10 +264,41 @@ interface FormCellProps {
     basis?: number;
     /** `false` pins the cell to its basis instead of letting it absorb the row's slack. */
     grow?: boolean;
+    /** Puts an unlabelled control (a button) on the input line of the labelled cells beside it. */
+    alignToControl?: boolean;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const FormCell: ({ children, minWidth, basis, grow, style, testID, }: FormCellProps) => React.ReactElement;
+declare const FormCell: ({ children, minWidth, basis, grow, alignToControl, style, testID, }: FormCellProps) => React.ReactElement;
+
+interface AlignToControlProps {
+    children: React.ReactNode;
+    labelVariant?: FieldLabelVariant;
+    spacing?: FieldSpacing;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Puts a button or other unlabelled control on the input line of the labelled `Field`s beside it. */
+declare const AlignToControl: ({ children, labelVariant, spacing, style, testID, }: AlignToControlProps) => React.ReactElement;
+
+interface InlineFieldRowProps {
+    field: React.ReactNode;
+    action: React.ReactNode;
+    fieldMaxWidth: number;
+    inlineMinWidth?: number;
+    gap?: number;
+    testID?: string;
+}
+/** A labelled field and its action: stacked on phones, one row on desktop with the action on the input line. */
+declare const InlineFieldRow: ({ field, action, fieldMaxWidth, inlineMinWidth, gap, testID, }: InlineFieldRowProps) => React.ReactElement;
+
+declare const INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+interface InlineFieldRowLayout {
+    inline: boolean;
+    fieldMaxWidth: number | undefined;
+}
+/** Field and action share one row only at `inlineMinWidth` and wider; below it they stack. */
+declare function inlineFieldRowLayout(windowWidth: number, fieldMaxWidth: number, inlineMinWidth?: number): InlineFieldRowLayout;
 
 /**
  * `FormSection` — a titled group of fields. The React answer to v1's `<fieldset>` / `<legend>`.
@@ -470,6 +501,8 @@ interface UseThemedInputOptions {
     onFocus?: (e: FocusEvent) => void;
     /** Consumer blur handler — composed with the internal focus-state toggle. */
     onBlur?: (e: BlurEvent) => void;
+    /** `false` renders the read-only treatment: the recessed ground fill and the secondary ink. */
+    editable?: boolean;
 }
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
@@ -1029,4 +1062,4 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.js

@@ -4,10 +4,10 @@ var React2 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
+var designTokens = require('@dloizides/design-tokens');
 var uiButtons = require('@dloizides/ui-buttons');
 var reactDom = require('react-dom');
 var a11y = require('@dloizides/a11y');
-var designTokens = require('@dloizides/design-tokens');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -146,6 +146,11 @@ function useFormGridMetrics() {
 function useIsGapOwned() {
   return React2__default.default.useContext(GapOwnedContext);
 }
+var ERROR_LIGHT_STEPS = ["500", "600", "700"];
+var ERROR_DARK_STEPS = ["300", "200", "400", "100", "500"];
+function fieldErrorInk(theme) {
+  return designTokens.readableScaleInk({ ...theme.semantic.error }, theme.colors.surface, ERROR_LIGHT_STEPS, ERROR_DARK_STEPS);
+}
 var ERROR_FONT_SIZE = 12;
 var HINT_FONT_SIZE = 12;
 var OPTIONAL_MARK_FONT_WEIGHT = "400";
@@ -201,8 +206,8 @@ var Field = ({
   const { theme } = uiFeedback.useUi();
   const gapOwned = useIsGapOwned();
   const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, gapOwned));
-  const { colors, semantic } = theme;
-  const errorColor = semantic.error["500"];
+  const { colors } = theme;
+  const errorColor = fieldErrorInk(theme);
   const hasError = hasFieldError(error);
   const hasHint = isPresent(hint);
   const labelText = label ?? "";
@@ -248,6 +253,7 @@ var FORM_GRID_DEFAULT_MIN_WIDTH = 220;
 var FORM_GRID_DEFAULT_BASIS = 260;
 var styles2 = reactNative.StyleSheet.create({
   grid: {
+    alignItems: "flex-start",
     flexDirection: "row",
     flexWrap: "wrap"
   }
@@ -263,6 +269,36 @@ var FormGrid = ({
   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 LABEL_LINE_PLACEHOLDER = "\xA0";
+var styles3 = reactNative.StyleSheet.create({
+  labelLine: {
+    userSelect: "none"
+  }
+});
+var AlignToControl = ({
+  children,
+  labelVariant,
+  spacing,
+  style,
+  testID
+}) => {
+  const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, useIsGapOwned()));
+  const labelLineTestID = testID !== void 0 ? `${testID}-label-line` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [spacingStyles.container, style], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        accessibilityElementsHidden: true,
+        "aria-hidden": true,
+        importantForAccessibility: "no",
+        style: [spacingStyles.label, resolveLabelVariantStyle(labelVariant), styles3.labelLine],
+        testID: labelLineTestID,
+        children: LABEL_LINE_PLACEHOLDER
+      }
+    ),
+    children
+  ] });
+};
 var GROW = 1;
 var NO_GROW = 0;
 var FormCell = ({
@@ -270,6 +306,7 @@ var FormCell = ({
   minWidth,
   basis,
   grow = true,
+  alignToControl = false,
   style,
   testID
 }) => {
@@ -281,11 +318,54 @@ var FormCell = ({
     flexBasis: resolvedBasis,
     flexGrow: grow ? GROW : NO_GROW
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [cellStyle, style], testID, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [cellStyle, style], testID, children: alignToControl ? /* @__PURE__ */ jsxRuntime.jsx(AlignToControl, { children }) : children });
+};
+
+// src/InlineFieldRow/inlineFieldRowLayout.ts
+var INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+function inlineFieldRowLayout(windowWidth, fieldMaxWidth, inlineMinWidth = INLINE_FIELD_ROW_MIN_WIDTH) {
+  const inline = windowWidth >= inlineMinWidth;
+  return { inline, fieldMaxWidth: inline ? fieldMaxWidth : void 0 };
+}
+var styles4 = reactNative.StyleSheet.create({
+  action: {
+    flexShrink: 0
+  },
+  field: {
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  row: {
+    alignItems: "flex-start",
+    flexDirection: "row"
+  }
+});
+var InlineFieldRow = ({
+  field,
+  action,
+  fieldMaxWidth,
+  inlineMinWidth,
+  gap = FORM_GRID_DEFAULT_GAP,
+  testID
+}) => {
+  const { width } = reactNative.useWindowDimensions();
+  const layout = inlineFieldRowLayout(width, fieldMaxWidth, inlineMinWidth);
+  const rowStyle = React2.useMemo(() => [styles4.row, { gap }], [gap]);
+  const fieldStyle = React2.useMemo(() => [styles4.field, { maxWidth: layout.fieldMaxWidth }], [layout.fieldMaxWidth]);
+  if (!layout.inline)
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      field,
+      action
+    ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: rowStyle, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyle, children: field }),
+    /* @__PURE__ */ jsxRuntime.jsx(AlignToControl, { style: styles4.action, children: action })
+  ] });
 };
 var SECTION_GAP = 10;
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   section: {
     gap: SECTION_GAP
   },
@@ -320,7 +400,7 @@ var FormSection = ({
     // The section spaces its children with `gap`, so it owns their vertical rhythm exactly as a
     // `FormGrid` owns a row's — without this a `Field` placed directly in a section would stack its
     // 16px margin on the section's gap and recreate the F3 bug one level up.
-    /* @__PURE__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { role: "group", style: [styles3.section, style], testID, ...a11y, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { role: "group", style: [styles5.section, style], testID, ...a11y, children: [
       hasTitle ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.Text,
         {
@@ -329,13 +409,13 @@ var FormSection = ({
           children: title
         }
       ) : null,
-      hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.description, { color: colors.textSecondary }], children: description }) : null,
+      hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.description, { color: colors.textSecondary }], children: description }) : null,
       children
     ] }) })
   );
 };
 var ACTIONS_GAP = 12;
-var styles4 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
@@ -355,7 +435,7 @@ var FormActions = ({
   saveTestID = "save-button",
   cancelTestID = "cancel-button",
   testID
-}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles4.container, containerStyle], testID, children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, containerStyle], testID, children: [
   typeof onCancel === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
     uiButtons.Button,
     {
@@ -635,9 +715,9 @@ function withAlpha(color, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function useThemedInput(options = {}) {
-  const { hasError = false, onFocus, onBlur } = options;
+  const { hasError = false, onFocus, onBlur, editable = true } = options;
   const { theme } = uiFeedback.useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const [isFocused, setIsFocused] = React2.useState(false);
   const [isHovered, setIsHovered] = React2.useState(false);
   const handleFocus = React2.useCallback(
@@ -657,13 +737,14 @@ function useThemedInput(options = {}) {
   const handleHoverIn = React2.useCallback(() => setIsHovered(true), []);
   const handleHoverOut = React2.useCallback(() => setIsHovered(false), []);
   const primary = palette.primary["500"];
-  const errorColor = semantic.error["500"];
+  const errorColor = fieldErrorInk(theme);
   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 };
+    const editableFill = isFocused ? colors.surface : colors.surfaceElevated;
+    const backgroundColor = editable ? editableFill : colors.background;
+    const base = { color: editable ? colors.text : colors.textSecondary, borderColor, backgroundColor };
     if (!IS_WEB5) return base;
     const ringColor = hasError ? errorColor : uiButtons.themeFocusRingColor(theme);
     const ring = isFocused ? designTokens.focusRingOutline(ringColor) : NO_RING;
@@ -683,6 +764,9 @@ function useThemedInput(options = {}) {
     colors.border,
     colors.surface,
     colors.surfaceElevated,
+    colors.background,
+    colors.textSecondary,
+    editable,
     primary,
     errorColor,
     theme
@@ -735,7 +819,7 @@ var ThemedTextInput = React2__default.default.forwardRef(function ThemedTextInpu
     placeholderTextColor: themedPlaceholder,
     focusBind,
     hoverBind
-  } = useThemedInput({ hasError, onFocus, onBlur });
+  } = useThemedInput({ hasError, onFocus, onBlur, editable: rest.editable });
   const webA11y = webFieldA11y({ describedById, hasError, required: requiredField });
   const boxStyle = unstyledBox ? null : controlStyles.input;
   const multilineStyle = rest.multiline === true && !unstyledBox ? boxStyles.multiline : null;
@@ -1171,7 +1255,7 @@ function chipIdentity(option, selected, config) {
     ariaChecked: isRadio ? selected : void 0
   };
 }
-var styles5 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1257,7 +1341,7 @@ var ChipSelector = ({
         reactNative.View,
         {
           accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
-          style: styles5.chipContainer,
+          style: styles7.chipContainer,
           ...webFieldA11y({ describedById, hasError }),
           ...radio.groupProps,
           children: options.map(renderChip)
@@ -1267,7 +1351,7 @@ var ChipSelector = ({
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles6 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -1328,15 +1412,15 @@ var FormSwitch = ({
         accessible: false,
         disabled,
         onPress: toggle,
-        style: [styles6.container, containerStyle],
+        style: [styles8.container, containerStyle],
         tabIndex: -1,
         testID: `${testID}-row`,
         children: [
-          /* @__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.jsxs(reactNative.View, { style: styles8.textColumn, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles8.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Switch,
             {
               accessibilityHint: accessibilityHint ?? label,
@@ -1359,7 +1443,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles7 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -1451,18 +1535,18 @@ var FormCheckbox = ({
       onPress: toggle,
       role: "checkbox",
       style: [
-        styles7.container,
-        hasHint ? null : styles7.centered,
+        styles9.container,
+        hasHint ? null : styles9.centered,
         containerStyle,
         disabled ? { opacity: DISABLED_OPACITY } : null
       ],
       testID,
       ...keyboardProps,
       children: [
-        /* @__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, { nativeID: hintId, style: [styles7.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.textColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles9.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -1588,7 +1672,7 @@ function TypeaheadControl({
   testID
 }) {
   const { theme } = uiFeedback.useUi();
-  const { colors, palette, semantic } = theme;
+  const { colors, palette } = theme;
   const anchorRef = React2.useRef(null);
   const [isOpen, setIsOpen] = React2.useState(false);
   const exactPick = React2.useMemo(() => options.some((o) => o.label === value), [options, value]);
@@ -1636,7 +1720,7 @@ function TypeaheadControl({
         onFocus: () => setIsOpen(true),
         onBlur: handleBlur,
         onSubmitEditing: handleSubmit,
-        style: [controlStyles.input, { borderColor: hasError ? semantic.error["500"] : colors.border, backgroundColor: colors.surface, color: colors.text }],
+        style: [controlStyles.input, { borderColor: hasError ? fieldErrorInk(theme) : colors.border, backgroundColor: colors.surface, color: colors.text }],
         testID: `${testID}-input`
       }
     ),
@@ -1654,7 +1738,7 @@ function TypeaheadControl({
         usePortal: true
       }
     ) : null,
-    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { role: "alert", style: [controlStyles.error, { color: semantic.error["500"] }], testID: `${testID}-error`, children: error }) : null
+    hasError ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { role: "alert", style: [controlStyles.error, { color: fieldErrorInk(theme) }], testID: `${testID}-error`, children: error }) : null
   ] });
 }
 var WEB_DATE_PROPS = typeof document !== "undefined" ? { type: "date" } : {};
@@ -1754,6 +1838,7 @@ function toggleGroupSelection(selected, groupKeys, order) {
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
 
+exports.AlignToControl = AlignToControl;
 exports.AnchoredMenu = AnchoredMenu;
 exports.ChipSelector = ChipSelector;
 exports.DEFAULT_MAX_RECENTS = DEFAULT_MAX_RECENTS;
@@ -1769,11 +1854,14 @@ exports.FormField = FormField;
 exports.FormGrid = FormGrid;
 exports.FormSection = FormSection;
 exports.FormSwitch = FormSwitch;
+exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
+exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
 exports.ThemedTextInput = ThemedTextInput;
 exports.TypeaheadControl = TypeaheadControl;
 exports.controlStyles = controlStyles;
 exports.groupAriaChecked = groupAriaChecked;
+exports.inlineFieldRowLayout = inlineFieldRowLayout;
 exports.isUnmatched = isUnmatched;
 exports.resolveGroupSelection = resolveGroupSelection;
 exports.suggestOptions = suggestOptions;