@dloizides/ui-forms 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.22.0
+
+KEFI-EDITOR-UI-2 "Extract stepper and upload-with-link field to @dloizides/ui-forms", extracted from kefi-web.
+
+- New `StepperTabs`, `StepperNav` and pure `resolveStepNeighbours`: step tabs sharing the row width, back and next under the step. Generic over the step key; every string is a prop.
+- New `UploadWithLinkField`: preview, an upload control slot and a link input revealed on request. The slot keeps ui-forms free of ui-media; pass `ImagePickerButton`.
+
 ## 1.20.0
 
 **Horizontal form fields line up (D-ALL-22 "Horizontal form fields are aligned").**

package/dist/index.d.mts

@@ -1062,4 +1062,70 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-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 };
+/** One step; `label` is pre-localized and shown on its tab. */
+interface StepperStep<TKey extends string | number = string> {
+    key: TKey;
+    label: string;
+}
+interface StepNeighbours<TKey extends string | number = string> {
+    previous: StepperStep<TKey> | null;
+    next: StepperStep<TKey> | null;
+}
+/** The steps either side of `current`; both null when `current` is not a step. */
+declare function resolveStepNeighbours<TKey extends string | number>(steps: readonly StepperStep<TKey>[], current: TKey): StepNeighbours<TKey>;
+
+interface StepperTabsProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    /** Pre-localized accessibility hint for every tab. */
+    stepHint: string;
+    /** Row testID; each tab is `${testID}-${step.key}`. */
+    testID: string;
+}
+/** A row of step tabs sharing the width; each label wraps inside its own tab. */
+declare const StepperTabs: <TKey extends string | number = string>({ steps, current, onStep, stepHint, testID, }: StepperTabsProps<TKey>) => React.ReactElement;
+
+interface StepperNavLabels<TKey extends string | number = string> {
+    back: string;
+    backHint: string;
+    /** The next button's label, built from the step it leads to. */
+    next: (step: StepperStep<TKey>) => string;
+    nextHint: string;
+}
+interface StepperNavProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    labels: StepperNavLabels<TKey>;
+    /** Row testID; the buttons are `${testID}-back` and `${testID}-next`. */
+    testID: string;
+}
+/** Back and next under a step: back is disabled on the first step, next is absent on the last. */
+declare const StepperNav: <TKey extends string | number = string>({ steps, current, onStep, labels, testID, }: StepperNavProps<TKey>) => React.ReactElement;
+
+/** Every string the field shows; all pre-localized. */
+interface UploadWithLinkLabels {
+    title: string;
+    help?: string;
+    pasteToggle: string;
+    pasteToggleHint: string;
+    link: string;
+    linkHint: string;
+    linkPlaceholder: string;
+}
+interface UploadWithLinkFieldProps {
+    value: string | null | undefined;
+    onChange: (url: string) => void;
+    labels: UploadWithLinkLabels;
+    /** The upload control, e.g. ui-media `ImagePickerButton`; its transport stays with the app. */
+    uploadControl: React.ReactNode;
+    /** The link input; the others are `${testID}-preview` and `${testID}-paste`. */
+    testID: string;
+    disabled?: boolean;
+    previewSize?: number;
+}
+/** An image field: preview, an upload control, and a link input revealed on request. */
+declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
+
+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 StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -1062,4 +1062,70 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-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 };
+/** One step; `label` is pre-localized and shown on its tab. */
+interface StepperStep<TKey extends string | number = string> {
+    key: TKey;
+    label: string;
+}
+interface StepNeighbours<TKey extends string | number = string> {
+    previous: StepperStep<TKey> | null;
+    next: StepperStep<TKey> | null;
+}
+/** The steps either side of `current`; both null when `current` is not a step. */
+declare function resolveStepNeighbours<TKey extends string | number>(steps: readonly StepperStep<TKey>[], current: TKey): StepNeighbours<TKey>;
+
+interface StepperTabsProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    /** Pre-localized accessibility hint for every tab. */
+    stepHint: string;
+    /** Row testID; each tab is `${testID}-${step.key}`. */
+    testID: string;
+}
+/** A row of step tabs sharing the width; each label wraps inside its own tab. */
+declare const StepperTabs: <TKey extends string | number = string>({ steps, current, onStep, stepHint, testID, }: StepperTabsProps<TKey>) => React.ReactElement;
+
+interface StepperNavLabels<TKey extends string | number = string> {
+    back: string;
+    backHint: string;
+    /** The next button's label, built from the step it leads to. */
+    next: (step: StepperStep<TKey>) => string;
+    nextHint: string;
+}
+interface StepperNavProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    labels: StepperNavLabels<TKey>;
+    /** Row testID; the buttons are `${testID}-back` and `${testID}-next`. */
+    testID: string;
+}
+/** Back and next under a step: back is disabled on the first step, next is absent on the last. */
+declare const StepperNav: <TKey extends string | number = string>({ steps, current, onStep, labels, testID, }: StepperNavProps<TKey>) => React.ReactElement;
+
+/** Every string the field shows; all pre-localized. */
+interface UploadWithLinkLabels {
+    title: string;
+    help?: string;
+    pasteToggle: string;
+    pasteToggleHint: string;
+    link: string;
+    linkHint: string;
+    linkPlaceholder: string;
+}
+interface UploadWithLinkFieldProps {
+    value: string | null | undefined;
+    onChange: (url: string) => void;
+    labels: UploadWithLinkLabels;
+    /** The upload control, e.g. ui-media `ImagePickerButton`; its transport stays with the app. */
+    uploadControl: React.ReactNode;
+    /** The link input; the others are `${testID}-preview` and `${testID}-paste`. */
+    testID: string;
+    disabled?: boolean;
+    previewSize?: number;
+}
+/** An image field: preview, an upload control, and a link input revealed on request. */
+declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
+
+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 StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.js

@@ -1437,12 +1437,18 @@ var FormSwitch = ({
     )
   );
 };
+
+// src/FormCheckbox/checkboxColors.ts
+var checkboxBoxColors = (colors, brand, checked) => checked ? { backgroundColor: brand, borderColor: brand } : { backgroundColor: "transparent", borderColor: colors.textSecondary };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
 var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
+var FOCUS_RING_WIDTH = 2;
+var WEB_NO_DEFAULT_OUTLINE = { outlineStyle: "none" };
+var FOCUS_RING_INSET = -6;
 var styles9 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -1467,6 +1473,15 @@ var styles9 = reactNative.StyleSheet.create({
     // Nudge the box to sit on the label's first text line.
     marginTop: 1
   },
+  focusRing: {
+    position: "absolute",
+    top: FOCUS_RING_INSET,
+    left: FOCUS_RING_INSET,
+    right: FOCUS_RING_INSET,
+    bottom: FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_WIDTH,
+    borderRadius: BOX_RADIUS - FOCUS_RING_INSET
+  },
   check: {
     fontSize: CHECK_FONT_SIZE,
     fontWeight: "700",
@@ -1502,13 +1517,15 @@ var FormCheckbox = ({
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
   const { hintId } = useFieldIds();
+  const [focused, setFocused] = React2__default.default.useState(false);
   const themeStyles = React2__default.default.useMemo(() => {
-    const boxOn = { backgroundColor: brand, borderColor: brand };
-    const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
+    const boxOn = checkboxBoxColors(colors, brand, true);
+    const boxOff = checkboxBoxColors(colors, brand, false);
+    const ring = { borderColor: brand };
     const labelStyle = { color: colors.text };
     const hintStyle = { color: colors.textSecondary };
-    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };
-  }, [brand, colors.border, colors.text, colors.textSecondary]);
+    return { boxOn, boxOff, ring, label: labelStyle, hint: hintStyle };
+  }, [brand, colors]);
   const toggle = () => {
     const next = !value;
     if (onValueChange) onValueChange(next);
@@ -1532,18 +1549,24 @@ var FormCheckbox = ({
       "aria-checked": value,
       "aria-describedby": hasHint ? hintId : void 0,
       disabled,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
       onPress: toggle,
       role: "checkbox",
       style: [
         styles9.container,
         hasHint ? null : styles9.centered,
         containerStyle,
-        disabled ? { opacity: DISABLED_OPACITY } : null
+        disabled ? { opacity: DISABLED_OPACITY } : null,
+        reactNative.Platform.OS === "web" ? WEB_NO_DEFAULT_OUTLINE : null
       ],
       testID,
       ...keyboardProps,
       children: [
-        /* @__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.box, value ? themeStyles.boxOn : themeStyles.boxOff], testID: `${testID}-box`, children: [
+          focused ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: [styles9.focusRing, themeStyles.ring], testID: `${testID}-focus-ring` }) : null,
+          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
@@ -1837,6 +1860,192 @@ function toggleGroupSelection(selected, groupKeys, order) {
   });
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
+var ROW_GAP = 4;
+var TAB_PADDING = 4;
+var INDICATOR_WIDTH = 2;
+var TAB_FONT_SIZE = 12;
+var styles10 = reactNative.StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "nowrap", gap: ROW_GAP },
+  tab: {
+    borderBottomWidth: INDICATOR_WIDTH,
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+    minHeight: a11y.MIN_TOUCH_TARGET_PX,
+    minWidth: 0,
+    paddingHorizontal: TAB_PADDING
+  },
+  text: { fontSize: TAB_FONT_SIZE, textAlign: "center" },
+  textSelected: { fontWeight: "700" }
+});
+var StepperTab = ({
+  step,
+  selected,
+  hint,
+  onStep,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const ring = uiButtons.useFocusRing();
+  const indicator = selected ? theme.palette.primary["500"] : theme.colors.border;
+  const webKeyProps = {
+    onKeyDown: (event) => {
+      if (event.key !== " ") return;
+      event.preventDefault?.();
+      onStep(step.key);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: step.label,
+      accessibilityRole: "tab",
+      accessibilityState: { selected },
+      "aria-selected": selected,
+      style: [styles10.tab, { borderBottomColor: indicator }, ring.ringStyle],
+      testID,
+      onBlur: ring.onBlur,
+      onFocus: ring.onFocus,
+      onPress: () => onStep(step.key),
+      ...webKeyProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.text, { color: theme.colors.text }, selected ? styles10.textSelected : void 0], children: step.label })
+    }
+  );
+};
+var StepperTabs = ({
+  steps,
+  current,
+  onStep,
+  stepHint,
+  testID
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "tablist", style: styles10.row, testID, children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
+  StepperTab,
+  {
+    hint: stepHint,
+    selected: step.key === current,
+    step,
+    testID: `${testID}-${step.key}`,
+    onStep
+  },
+  step.key
+)) });
+
+// src/Stepper/stepperModel.ts
+function resolveStepNeighbours(steps, current) {
+  const index = steps.findIndex((step) => step.key === current);
+  if (index < 0) return { previous: null, next: null };
+  return { previous: steps[index - 1] ?? null, next: steps[index + 1] ?? null };
+}
+var ROW_GAP2 = 8;
+var styles11 = reactNative.StyleSheet.create({
+  cell: { flex: 1, minWidth: 0 },
+  row: { flexDirection: "row", gap: ROW_GAP2 }
+});
+var StepperNav = ({
+  steps,
+  current,
+  onStep,
+  labels,
+  testID
+}) => {
+  const { previous, next } = resolveStepNeighbours(steps, current);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.row, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.backHint,
+        accessibilityLabel: labels.back,
+        autoLoading: false,
+        disabled: previous === null,
+        label: labels.back,
+        testID: `${testID}-back`,
+        variant: "outline",
+        onPress: () => {
+          if (previous !== null) onStep(previous.key);
+        }
+      }
+    ) }),
+    next === null ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.nextHint,
+        accessibilityLabel: labels.next(next),
+        autoLoading: false,
+        label: labels.next(next),
+        testID: `${testID}-next`,
+        onPress: () => onStep(next.key)
+      }
+    ) })
+  ] });
+};
+var DEFAULT_PREVIEW_PX = 48;
+var PREVIEW_RADIUS = 8;
+var GAP = 8;
+var TITLE_FONT_SIZE = 14;
+var HELP_FONT_SIZE = 13;
+var styles12 = reactNative.StyleSheet.create({
+  help: { flex: 1, fontSize: HELP_FONT_SIZE },
+  root: { gap: GAP },
+  tile: { alignItems: "center", flexDirection: "row", gap: GAP },
+  title: { fontSize: TITLE_FONT_SIZE, fontWeight: "700" },
+  toggle: { alignSelf: "flex-start", justifyContent: "center", minHeight: a11y.MIN_TOUCH_TARGET_PX },
+  toggleText: { fontSize: TITLE_FONT_SIZE, fontWeight: "700", textDecorationLine: "underline" }
+});
+var UploadWithLinkField = ({
+  value,
+  onChange,
+  labels,
+  uploadControl,
+  testID,
+  disabled = false,
+  previewSize = DEFAULT_PREVIEW_PX
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const ring = uiButtons.useFocusRing();
+  const url = value ?? "";
+  const [pasting, setPasting] = React2.useState(url !== "");
+  const previewBox = { borderRadius: PREVIEW_RADIUS, height: previewSize, width: previewSize };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.title, { color: theme.colors.text }], children: labels.title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.tile, children: [
+      url === "" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [previewBox, { backgroundColor: theme.colors.border }] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Image, { accessible: false, source: { uri: url }, style: previewBox, testID: `${testID}-preview` }),
+      labels.help === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.help, { color: theme.colors.text }], children: labels.help })
+    ] }),
+    uploadControl,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityHint: labels.pasteToggleHint,
+        accessibilityLabel: labels.pasteToggle,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: pasting },
+        "aria-expanded": pasting,
+        style: [styles12.toggle, ring.ringStyle],
+        testID: `${testID}-paste`,
+        onBlur: ring.onBlur,
+        onFocus: ring.onFocus,
+        onPress: () => setPasting(!pasting),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.toggleText, { color: theme.colors.text }], children: labels.pasteToggle })
+      }
+    ),
+    pasting ? /* @__PURE__ */ jsxRuntime.jsx(
+      FormField,
+      {
+        accessibilityHint: labels.linkHint,
+        editable: !disabled,
+        label: labels.link,
+        placeholder: labels.linkPlaceholder,
+        testID,
+        value: url,
+        onChangeText: onChange
+      }
+    ) : null
+  ] });
+};
 
 exports.AlignToControl = AlignToControl;
 exports.AnchoredMenu = AnchoredMenu;
@@ -1857,13 +2066,17 @@ exports.FormSwitch = FormSwitch;
 exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
 exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
+exports.StepperNav = StepperNav;
+exports.StepperTabs = StepperTabs;
 exports.ThemedTextInput = ThemedTextInput;
 exports.TypeaheadControl = TypeaheadControl;
+exports.UploadWithLinkField = UploadWithLinkField;
 exports.controlStyles = controlStyles;
 exports.groupAriaChecked = groupAriaChecked;
 exports.inlineFieldRowLayout = inlineFieldRowLayout;
 exports.isUnmatched = isUnmatched;
 exports.resolveGroupSelection = resolveGroupSelection;
+exports.resolveStepNeighbours = resolveStepNeighbours;
 exports.suggestOptions = suggestOptions;
 exports.toggleGroupSelection = toggleGroupSelection;
 exports.useRecentValues = useRecentValues;