jfs-components 0.1.25 → 0.1.30

package/lib/commonjs/components/ContentSheet/ContentSheet.js

@@ -13,6 +13,18 @@ var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const IS_WEB = _reactNative.Platform.OS === 'web';
+
+// Spring config — mirrors the Drawer's bottom pop-up spring so the two
+// bottom-sheet surfaces share the exact same entrance feel (slight bounce,
+// snappy). Keep in sync with `Drawer.tsx` SPRING_CONFIG.
+const SPRING_CONFIG = {
+  damping: 32,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1
+};
 function resolveContentSheetStyle(modes) {
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/bg', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/gap', modes);
@@ -21,6 +33,18 @@ function resolveContentSheetStyle(modes) {
   const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/bottom', modes);
   const radiusTop = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/radius/top', modes);
   const radiusBottom = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/radius/bottom', modes);
+
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes);
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontFamily', modes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes);
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const titleWrapPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/horizontal', modes);
   return {
     container: {
       backgroundColor,
@@ -36,7 +60,21 @@ function resolveContentSheetStyle(modes) {
       alignItems: 'stretch',
       overflow: 'hidden'
     },
-    paddingBottom
+    paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center'
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+      textAlign: 'center'
+    }
   };
 }
 const pinnedStyle = {
@@ -65,10 +103,12 @@ const pinnedStyle = {
 function ContentSheet({
   children,
   modes = _reactUtils.EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
   style,
   ...rest
 }) {
@@ -84,46 +124,100 @@ function ContentSheet({
     paddingBottom
   }, style], [pinToBottom, resolved.container, paddingBottom, style]);
 
+  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
+  // sheet is bottom-anchored, so a positive `translateY` equal to the window
+  // height parks it fully below the bottom edge. Springing it back to `0`
+  // produces the same bottom pop-up the Drawer uses. The shared value is
+  // initialised off-screen so the very first mount pops in (no flash).
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const entrance = (0, _reactNativeReanimated.useSharedValue)(windowHeight);
+  (0, _react.useEffect)(() => {
+    entrance.value = (0, _reactNativeReanimated.withSpring)(visible ? 0 : windowHeight, SPRING_CONFIG);
+  }, [visible, windowHeight, entrance]);
+
   // Switching between the keyboard-aware and plain implementation is keyed off
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
-  // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  // inside `KeyboardAwareSheet` always runs in a stable hook order. Both
+  // branches receive the `entrance` shared value so the bottom pop-up plays in
+  // every configuration.
+  const header = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: resolved.headerStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: resolved.titleStyle,
+      children: title
+    })
+  }) : null;
   if (avoidKeyboard && !IS_WEB) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardAwareSheet, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(KeyboardAwareSheet, {
       style: containerStyle,
       spacing: keyboardSpacing,
+      entrance: entrance,
       ...rest,
-      children: processedChildren
+      children: [header, processedChildren]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSheet, {
     style: containerStyle,
+    entrance: entrance,
     ...rest,
-    children: processedChildren
+    children: [header, processedChildren]
   });
 }
 /**
  * Native-only wrapper that lifts the sheet by the live keyboard height. The
  * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
- * sheet tracks the keyboard frame-for-frame without any JS work.
+ * sheet tracks the keyboard frame-for-frame without any JS work. The keyboard
+ * offset is summed with the entrance `translateY` (the bottom pop-up) inside a
+ * single `useAnimatedStyle` so both motions stay on the UI thread and never
+ * fight each other.
  */
 function KeyboardAwareSheet({
   style,
   spacing,
+  entrance,
   children,
   ...rest
 }) {
   const keyboard = (0, _reactNativeReanimated.useAnimatedKeyboard)();
-  const keyboardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const height = keyboard.height.value;
+    const keyboardOffset = height > 0 ? -(height + spacing) : 0;
+    return {
+      transform: [{
+        translateY: entrance.value + keyboardOffset
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [style, animatedStyle],
+    ...rest,
+    children: children
+  });
+}
+
+/**
+ * Entrance-only animated sheet (web, or when keyboard avoidance is disabled).
+ * Applies the same bottom pop-up `translateY` as `KeyboardAwareSheet`, minus
+ * the keyboard offset.
+ */
+function AnimatedSheet({
+  style,
+  entrance,
+  children,
+  ...rest
+}) {
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       transform: [{
-        translateY: height > 0 ? -(height + spacing) : 0
+        translateY: entrance.value
       }]
     };
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    style: [style, keyboardStyle],
+    style: [style, animatedStyle],
     ...rest,
     children: children
   });

package/lib/commonjs/components/FormUpload/Additem.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function resolveAdditemTokens(modes) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/background', modes);
+  const borderRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/radius', modes), 8);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/horizontal', modes), 6);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/vertical', modes), 8);
+  // The Figma design uses a fixed 44 × 44 dp cell. There is no
+  // `compareCardItem/size` token in the variables JSON, so we keep the size
+  // constant to match the design exactly.
+  const size = 44;
+  return {
+    backgroundColor,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    size
+  };
+}
+
+/** Figma defaults for the inner `IconCapsule` icons. Overridable via `modes`. */
+const ADDITEM_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Low',
+  'Icon Capsule Size': 'S'
+});
+
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+function Additem({
+  state = 'empty',
+  imageSource,
+  onPress,
+  onRemove,
+  picker,
+  onAssetsPicked,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  accessibilityLabel,
+  isDisabled = false,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? ADDITEM_DEFAULT_MODES : {
+    ...ADDITEM_DEFAULT_MODES,
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveAdditemTokens(modes), [modes]);
+  const handlePress = _react.default.useCallback(async () => {
+    if (isDisabled) return;
+    if (state === 'empty' && picker) {
+      try {
+        const result = await picker();
+        if (result.didCancel) return;
+        if (result.error) {
+          if (__DEV__) {
+            console.warn('[Additem] picker error:', result.error);
+          }
+          return;
+        }
+        if (result.assets.length > 0) {
+          onAssetsPicked?.(result.assets);
+        }
+      } catch (err) {
+        if (__DEV__) {
+          console.warn('[Additem] unexpected picker error:', err);
+        }
+      }
+      return;
+    }
+    onPress?.();
+  }, [isDisabled, onPress, onAssetsPicked, picker, state]);
+  const handleRemove = _react.default.useCallback(() => {
+    if (!isDisabled) {
+      onRemove?.();
+    }
+  }, [isDisabled, onRemove]);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (state === 'empty' ? 'Add attachment' : 'Attachment preview');
+  const containerStyle = (0, _react.useMemo)(() => ({
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    backgroundColor: tokens.backgroundColor,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens, isDisabled]);
+  const isPreview = state === 'preview';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled
+    },
+    testID: testID,
+    style: containerStyle,
+    children: isPreview ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        imageSource: imageSource,
+        width: "100%",
+        height: tokens.size - tokens.paddingVertical * 2,
+        resizeMode: "cover",
+        borderRadius: tokens.borderRadius - 2
+      }), onRemove != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: 'absolute',
+          top: 2,
+          right: 2
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+          iconName: "ic_close",
+          modes: modes,
+          onTouchEnd: handleRemove,
+          accessibilityRole: "button",
+          accessibilityLabel: "Remove attachment"
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      iconName: "ic_add",
+      modes: modes
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Additem);

package/lib/commonjs/components/FormUpload/FormUpload.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Form = require("../Form/Form");
+var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _Additem = _interopRequireDefault(require("./Additem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+}
+function resolveFormUploadTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
+  const rowGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes);
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes), '500');
+  return {
+    gap,
+    rowGap,
+    labelColor,
+    labelFontFamily,
+    labelFontSize,
+    labelLineHeight,
+    labelFontWeight
+  };
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
+}
+
+/** Figma defaults for the remove `IconCapsule` on filled preview cells. Overridable via `modes`. */
+const FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS'
+};
+
+/**
+ * `FormUpload` — a form-aware upload row built from reusable `Additem` cells.
+ *
+ * The component mirrors the Figma "FormUpload" design: a label, a horizontal
+ * row of upload/preview cells, and support text. It integrates with the
+ * existing `<Form>` context so server-side validation errors automatically
+ * show below the row, and it clears those errors when attachments change.
+ *
+ * Upload behaviour is provided through the `picker` prop so the library stays
+ * free of native image-picker dependencies. Pass any picker that returns the
+ * `AdditemPickerResult` shape and the empty cell becomes a real upload trigger
+ * on both iOS and Android.
+ */
+function FormUpload({
+  label,
+  supportText,
+  name,
+  attachments = [],
+  maxCount,
+  onAttachmentsChange,
+  picker,
+  errorMessage,
+  isInvalid = false,
+  isDisabled = false,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  rowStyle,
+  accessibilityLabel,
+  testID
+}) {
+  const formCtx = (0, _Form.useFormContext)();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const resolvedErrorMessage = errorMessage ?? formError;
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const modes = (0, _react.useMemo)(() => ({
+    ...baseModes,
+    'FormField States': resolvedIsInvalid ? 'Error' : 'Idle',
+    Status: resolvedIsInvalid ? 'Error' : 'Auto'
+  }), [baseModes, resolvedIsInvalid]);
+
+  // Empty cells rely on `Additem`'s built-in Neutral / Low / S defaults for the
+  // add icon. Preview cells use the tighter remove-icon treatment from Figma.
+  const previewAdditemModes = (0, _react.useMemo)(() => ({
+    ...FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveFormUploadTokens(modes), [modes]);
+  const handleAssetsPicked = (0, _react.useCallback)(assets => {
+    if (isDisabled) return;
+    const next = [...attachments, ...assets];
+    if (maxCount != null && next.length > maxCount) {
+      next.length = maxCount;
+    }
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, maxCount, onAttachmentsChange, isDisabled, name, formCtx]);
+  const handleRemove = (0, _react.useCallback)(index => {
+    if (isDisabled) return;
+    const next = attachments.filter((_, i) => i !== index);
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, onAttachmentsChange, isDisabled, name, formCtx]);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const rowStyleResolved = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: tokens.rowGap,
+    alignItems: 'flex-start'
+  }), [tokens.rowGap]);
+  const labelStyle = (0, _react.useMemo)(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens]);
+  const resolvedA11yLabel = accessibilityLabel ?? label ?? 'Attachment upload';
+  const canAddMore = maxCount == null || attachments.length < maxCount;
+  const renderContent = () => {
+    if (children) {
+      return (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [attachments.map((attachment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Additem.default, {
+        state: "preview",
+        imageSource: attachment.uri,
+        onRemove: () => handleRemove(index),
+        modes: previewAdditemModes,
+        isDisabled: isDisabled,
+        accessibilityLabel: attachment.name ?? `Attachment ${index + 1}`,
+        testID: `${testID}-item-${index}`
+      }, `${attachment.uri}-${index}`)), canAddMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Additem.default, {
+        state: "empty",
+        picker: picker,
+        onAssetsPicked: handleAssetsPicked,
+        modes: modes,
+        isDisabled: isDisabled,
+        testID: `${testID}-add`
+      })]
+    });
+  };
+  const supportLabel = resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText;
+  const supportStatus = resolvedIsInvalid ? 'Error' : 'Neutral';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: resolvedA11yLabel,
+    testID: testID,
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: labelStyle,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [rowStyleResolved, rowStyle],
+      children: renderContent()
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(FormUpload);