@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/FilePicker/FilePicker.js

@@ -0,0 +1,791 @@
+"use strict";
+
+/**
+ * FilePicker — attachment picking UI with pluggable native sources.
+ *
+ * The library owns the UI and behaviour: trigger (dashed card / list row /
+ * custom render prop), the source-chooser sheet (shared OptionSheet), enforced
+ * validation (maxFiles / maxSizeMB / accept / custom), the canonical file
+ * shape, per-file status + progress display, remove/retry affordances,
+ * a11y, haptics and theming.
+ *
+ * What it deliberately does NOT own:
+ *   - Native picking. Camera / gallery / document access lives in app-level
+ *     `sources` adapters (`pick(): Promise<PickedFileInput[]>`), so the
+ *     library stays zero-dependency and each app wires the native modules it
+ *     already ships. Throwing inside `pick` surfaces as a field error;
+ *     returning `[]` is a cancel.
+ *   - Networking. Uploads belong to the app's API client / outbox; the app
+ *     reflects them back via per-file `status` / `progress` and gets retry
+ *     taps through `onRetry`.
+ *   - Heavy processing. The async `process` hook runs per accepted file
+ *     (compression, EXIF strip, local copy) before it lands in `files` —
+ *     plug the app's image pipeline in there.
+ */
+
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { defaultIcons } from "../AppIcon/defaultIcons.js";
+import { OptionSheet } from "../OptionSheet/OptionSheet.js";
+import { Spinner } from "../Spinner/index.js";
+
+/** What a source's `pick()` resolves with — the library normalizes the rest. */
+
+/** Everything a custom `renderFile` template needs to paint one file. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let fileIdSeq = 0;
+const nextFileId = () => `wfp-${++fileIdSeq}`;
+const DEFAULT_LABELS = {
+  trigger: 'Attach file',
+  addMore: 'Add more',
+  sheetTitle: 'Add from',
+  removeFile: name => `Remove ${name}`,
+  retry: 'Retry upload',
+  errorTooMany: max => `You can attach up to ${max} files.`,
+  errorTooLarge: (name, maxSizeMB) => `${name} is larger than ${maxSizeMB} MB.`,
+  errorWrongType: name => `${name} is not an accepted file type.`
+};
+export const formatFileSize = bytes => {
+  if (bytes === undefined || bytes <= 0) {
+    return '';
+  }
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded = value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
+  return `${rounded} ${units[unit]}`;
+};
+export const matchesAccept = (type, accept) => {
+  if (!accept || accept.length === 0) {
+    return true;
+  }
+  if (!type) {
+    return false;
+  }
+  return accept.some(glob => {
+    if (glob === '*/*' || glob === '*') {
+      return true;
+    }
+    if (glob.endsWith('/*')) {
+      return type.startsWith(glob.slice(0, glob.length - 1));
+    }
+    return type === glob;
+  });
+};
+const isImage = file => file.type?.startsWith('image/') === true || !file.type && /\.(png|jpe?g|gif|webp|heic)$/i.test(file.name);
+const imageSourceOf = file => file.thumbnailUrl ?? (isImage(file) ? file.uri ?? file.url : undefined);
+
+/** Uppercase extension for the non-image tile, capped for layout ("PDF", "DOCX", "FILE"). */
+const extensionOf = name => {
+  const dot = name.lastIndexOf('.');
+  if (dot <= 0 || dot === name.length - 1) {
+    return 'FILE';
+  }
+  return name.slice(dot + 1).toUpperCase().slice(0, 4);
+};
+const FilePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    files: filesProp,
+    defaultFiles,
+    onChange,
+    sources,
+    maxFiles,
+    maxSizeMB,
+    accept,
+    validate,
+    process,
+    variant = 'card',
+    renderFile,
+    renderTrigger,
+    disabled = false,
+    helperText,
+    error: errorProp,
+    labels: labelsProp,
+    haptic,
+    onPick,
+    onRemove,
+    onError,
+    onFilePress,
+    onRetry,
+    style,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const labels = useMemo(() => ({
+    ...DEFAULT_LABELS,
+    ...labelsProp
+  }), [labelsProp]);
+  const tokens = theme.components.filePicker;
+  const thumbnailSize = tokens?.thumbnailSize ?? 84;
+  const borderRadius = tokens?.borderRadius ?? theme.radius.md;
+  const dashedBorderColor = tokens?.dashedBorderColor ?? theme.colors.primary;
+  const [files, setFilesState] = useControllableState({
+    value: filesProp,
+    defaultValue: defaultFiles ?? [],
+    onChange
+  });
+
+  // Async pick/process callbacks need the latest list, not a stale closure.
+  const filesRef = useRef(files);
+  filesRef.current = files;
+  const setFiles = useCallback(next => {
+    filesRef.current = next;
+    setFilesState(next);
+  }, [setFilesState]);
+  const [localError, setLocalError] = useState(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const fieldError = errorProp ?? localError ?? undefined;
+  const atCapacity = typeof maxFiles === 'number' && files.length >= maxFiles;
+  const reportErrors = useCallback((messages, file) => {
+    if (messages.length === 0) {
+      return;
+    }
+    setLocalError(messages[0]);
+    messages.forEach(m => onError?.(m, file));
+    if (haptic !== false) {
+      triggerHaptic('notificationError');
+    }
+  }, [onError, haptic]);
+  const runSource = useCallback(async source => {
+    let picked;
+    try {
+      picked = await source.pick();
+    } catch (e) {
+      reportErrors([e instanceof Error ? e.message : String(e)]);
+      return;
+    }
+    if (!picked || picked.length === 0) {
+      return;
+    }
+    const normalized = picked.map(p => ({
+      id: nextFileId(),
+      name: p.name ?? p.uri.split('/').pop() ?? 'file',
+      uri: p.uri,
+      type: p.type,
+      size: p.size,
+      meta: p.meta,
+      status: 'idle'
+    }));
+    const errors = [];
+    let candidates = normalized;
+    if (typeof maxFiles === 'number') {
+      const capacity = Math.max(0, maxFiles - filesRef.current.length);
+      if (candidates.length > capacity) {
+        errors.push(labels.errorTooMany(maxFiles));
+        candidates = candidates.slice(0, capacity);
+      }
+    }
+    const accepted = [];
+    for (const file of candidates) {
+      // `?? 0` here used to let an unknown size through as "0 bytes"; some
+      // document providers report no size at all. Only enforce when known.
+      if (typeof maxSizeMB === 'number' && typeof file.size === 'number' && file.size > maxSizeMB * 1024 * 1024) {
+        errors.push(labels.errorTooLarge(file.name, maxSizeMB));
+        continue;
+      }
+      if (!matchesAccept(file.type, accept)) {
+        errors.push(labels.errorWrongType(file.name));
+        continue;
+      }
+      const customError = validate?.(file);
+      if (customError) {
+        errors.push(customError);
+        continue;
+      }
+      accepted.push(file);
+    }
+    reportErrors(errors);
+    if (accepted.length === 0) {
+      return;
+    }
+    if (!process) {
+      setFiles([...filesRef.current, ...accepted]);
+      setLocalError(errors.length > 0 ? errors[0] : null);
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) {
+        triggerHaptic(h);
+      }
+      onPick?.(accepted);
+      return;
+    }
+
+    // With a process hook: land files immediately as 'processing', then
+    // swap each for its processed result (or drop it on failure).
+    const processing = accepted.map(f => ({
+      ...f,
+      status: 'processing'
+    }));
+    setFiles([...filesRef.current, ...processing]);
+    const succeeded = [];
+    for (const file of processing) {
+      try {
+        const result = await process({
+          ...file,
+          status: 'idle'
+        });
+        const finished = {
+          ...result,
+          id: file.id,
+          status: result.status ?? 'idle'
+        };
+        setFiles(filesRef.current.map(f => f.id === file.id ? finished : f));
+        succeeded.push(finished);
+      } catch (e) {
+        setFiles(filesRef.current.filter(f => f.id !== file.id));
+        reportErrors([e instanceof Error ? e.message : String(e)], file);
+      }
+    }
+    if (succeeded.length > 0) {
+      if (errors.length === 0) {
+        setLocalError(null);
+      }
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) {
+        triggerHaptic(h);
+      }
+      onPick?.(succeeded);
+    }
+  }, [maxFiles, maxSizeMB, accept, validate, process, labels, reportErrors, setFiles, onPick, haptic]);
+  const open = useCallback(sourceKey => {
+    if (disabled || atCapacity) {
+      return;
+    }
+    const source = sourceKey ? sources.find(s => s.key === sourceKey) : sources.length === 1 ? sources[0] : undefined;
+    if (source) {
+      void runSource(source);
+      return;
+    }
+    if (sources.length > 1) {
+      setSheetOpen(true);
+    }
+  }, [disabled, atCapacity, sources, runSource]);
+  const removeFile = useCallback(file => {
+    if (disabled) {
+      return;
+    }
+    setFiles(filesRef.current.filter(f => f.id !== file.id));
+    setLocalError(null);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    onRemove?.(file);
+  }, [disabled, setFiles, onRemove, haptic]);
+  const clear = useCallback(() => {
+    setFiles([]);
+    setLocalError(null);
+  }, [setFiles]);
+  useImperativeHandle(ref, () => ({
+    open,
+    clear
+  }), [open, clear]);
+  const a11ySummary = files.length === 0 ? labels.trigger : `${files.length} file${files.length === 1 ? '' : 's'} attached`;
+  const a11yLabel = accessibilityLabel ?? `Attachments. ${a11ySummary}`;
+  const statusText = file => {
+    switch (file.status) {
+      case 'processing':
+        return 'Processing…';
+      case 'uploading':
+        return `Uploading ${Math.round((file.progress ?? 0) * 100)}%`;
+      case 'done':
+        return 'Uploaded';
+      case 'error':
+        return file.error ?? 'Failed';
+      default:
+        return '';
+    }
+  };
+  const fileA11yLabel = file => [file.name, formatFileSize(file.size), statusText(file)].filter(Boolean).join(', ');
+  const attachmentIcon = theme.icons?.attachment ?? defaultIcons.attachment;
+  const renderStatusOverlay = file => {
+    if (file.status === 'processing') {
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.tileOverlay, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: /*#__PURE__*/_jsx(Spinner, {
+          size: "sm"
+        })
+      });
+    }
+    if (file.status === 'uploading') {
+      const pct = Math.round((file.progress ?? 0) * 100);
+      return /*#__PURE__*/_jsxs(View, {
+        style: [styles.tileOverlay, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.tileOverlayText, {
+            color: theme.colors.text.inverse
+          }],
+          children: `${pct}%`
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.tileProgressTrack, {
+            backgroundColor: theme.colors.border.primary
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.tileProgressFill, {
+              width: `${pct}%`,
+              backgroundColor: theme.colors.primary
+            }]
+          })
+        })]
+      });
+    }
+    if (file.status === 'done') {
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.doneBadge, {
+          backgroundColor: theme.colors.success
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.doneBadgeText, {
+            color: theme.colors.text.inverse
+          }],
+          children: "\u2713"
+        })
+      });
+    }
+    return null;
+  };
+  const renderThumbnail = file => {
+    const src = imageSourceOf(file);
+    if (src) {
+      return /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: src
+        },
+        style: styles.thumbnailImage
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.extensionTile, {
+        backgroundColor: theme.colors.background.secondary
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.extensionText, {
+          color: theme.colors.text.secondary,
+          ...fontFor(theme, 'semibold')
+        }],
+        children: extensionOf(file.name)
+      })
+    });
+  };
+  const removeButton = file => /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => removeFile(file),
+    disabled: disabled,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: labels.removeFile(file.name),
+    style: [styles.removeButton, {
+      backgroundColor: theme.colors.background.overlay
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.removeButtonText, {
+        color: theme.colors.text.inverse
+      }],
+      children: "\xD7"
+    })
+  });
+  const retryButton = file => onRetry && file.status === 'error' ? /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => onRetry(file),
+    disabled: disabled,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: labels.retry,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.retryText, {
+        color: theme.colors.primary
+      }],
+      children: "\u21BB"
+    })
+  }) : null;
+  const defaultCardFile = state => {
+    const {
+      file
+    } = state;
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.tile, {
+        width: thumbnailSize,
+        height: thumbnailSize,
+        borderRadius,
+        ...smoothCorners,
+        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary
+      }],
+      children: [renderThumbnail(file), renderStatusOverlay(file), file.status === 'error' ? /*#__PURE__*/_jsx(View, {
+        style: [styles.tileOverlay, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: retryButton(file)
+      }) : null, removeButton(file)]
+    });
+  };
+  const defaultListFile = state => {
+    const {
+      file
+    } = state;
+    const status = statusText(file);
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.listRow, {
+        borderRadius,
+        ...smoothCorners,
+        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary,
+        backgroundColor: theme.colors.background.primary
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.listThumb, {
+          borderRadius: theme.radius.sm,
+          ...smoothCorners
+        }],
+        children: [renderThumbnail(file), file.status === 'processing' ? /*#__PURE__*/_jsx(View, {
+          style: [styles.tileOverlay, {
+            backgroundColor: theme.colors.background.overlay
+          }],
+          children: /*#__PURE__*/_jsx(Spinner, {
+            size: "sm"
+          })
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.listTextWrap,
+        children: [/*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          ellipsizeMode: "middle",
+          style: [styles.listName, {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.sm,
+            ...fontFor(theme, 'medium')
+          }],
+          children: file.name
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [styles.listSubtitle, {
+            color: file.status === 'error' ? theme.colors.error : theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          children: [formatFileSize(file.size), status].filter(Boolean).join(' · ')
+        }), file.status === 'uploading' ? /*#__PURE__*/_jsx(View, {
+          style: [styles.listProgressTrack, {
+            backgroundColor: theme.colors.border.primary
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.listProgressFill, {
+              width: `${Math.round((file.progress ?? 0) * 100)}%`,
+              backgroundColor: theme.colors.primary
+            }]
+          })
+        }) : null]
+      }), retryButton(file), /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => removeFile(file),
+        disabled: disabled,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.removeFile(file.name),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.listRemoveText, {
+            color: theme.colors.text.tertiary
+          }],
+          children: "\xD7"
+        })
+      })]
+    });
+  };
+  const renderOneFile = (file, index) => {
+    const state = {
+      file,
+      index,
+      disabled,
+      remove: () => removeFile(file),
+      retry: onRetry ? () => onRetry(file) : undefined
+    };
+    const content = renderFile ? renderFile(state) : variant === 'card' ? defaultCardFile(state) : defaultListFile(state);
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onFilePress ? () => onFilePress(file) : undefined,
+      disabled: disabled || !onFilePress,
+      accessibilityLabel: fileA11yLabel(file),
+      children: content
+    }, file.id);
+  };
+  const triggerState = {
+    open,
+    disabled: disabled || atCapacity,
+    fileCount: files.length,
+    atCapacity
+  };
+  const dashedTrigger = compact => /*#__PURE__*/_jsxs(Pressable, {
+    onPress: () => open(),
+    disabled: disabled || atCapacity,
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      disabled: disabled || atCapacity
+    },
+    style: ({
+      pressed
+    }) => [styles.trigger, compact ? styles.triggerCompact : null, {
+      borderRadius,
+      ...smoothCorners,
+      borderColor: dashedBorderColor,
+      backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
+      opacity: disabled || atCapacity ? 0.55 : 1
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.triggerRow,
+      children: [attachmentIcon ? attachmentIcon({
+        size: 16,
+        color: theme.colors.primary
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.triggerText, {
+          color: theme.colors.primary,
+          fontSize: theme.typography.fontSize.sm,
+          ...fontFor(theme, 'medium')
+        }],
+        children: files.length === 0 ? labels.trigger : labels.addMore
+      })]
+    }), !compact && helperText ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.helperText, {
+        color: theme.colors.text.tertiary,
+        fontSize: theme.typography.fontSize.xs
+      }],
+      children: helperText
+    }) : null]
+  });
+  const addMoreTile = /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => open(),
+    disabled: disabled || atCapacity,
+    accessibilityRole: "button",
+    accessibilityLabel: labels.addMore,
+    style: ({
+      pressed
+    }) => [styles.tile, styles.addTile, {
+      width: thumbnailSize,
+      height: thumbnailSize,
+      borderRadius,
+      ...smoothCorners,
+      borderColor: dashedBorderColor,
+      backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent',
+      opacity: disabled || atCapacity ? 0.55 : 1
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.addTileText, {
+        color: theme.colors.primary
+      }],
+      children: "+"
+    })
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    testID: testID,
+    accessibilityLabel: a11yLabel,
+    children: [variant === 'card' ? files.length === 0 ? renderTrigger ? renderTrigger(triggerState) : dashedTrigger(false) : /*#__PURE__*/_jsxs(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [styles.strip, {
+        columnGap: theme.spacing.sm
+      }],
+      children: [files.map(renderOneFile), renderTrigger ? renderTrigger(triggerState) : !atCapacity && !disabled ? addMoreTile : null]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: {
+        rowGap: theme.spacing.sm
+      },
+      children: [renderTrigger ? renderTrigger(triggerState) : !atCapacity ? dashedTrigger(files.length > 0) : null, files.map(renderOneFile)]
+    }), fieldError ? /*#__PURE__*/_jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      style: [styles.errorText, {
+        color: theme.colors.error,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      children: fieldError
+    }) : null, /*#__PURE__*/_jsx(OptionSheet, {
+      open: sheetOpen,
+      onClose: () => setSheetOpen(false),
+      title: labels.sheetTitle,
+      options: sources,
+      labelOf: s => s.label,
+      getValue: s => s.key,
+      disabledOf: () => false,
+      descriptionOf: s => s.description,
+      iconOf: s => s.icon,
+      isSelected: () => false,
+      onSelect: s => {
+        setSheetOpen(false);
+        void runSource(s);
+      }
+    })]
+  });
+});
+FilePicker.displayName = 'FilePicker';
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  trigger: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 16
+  },
+  triggerCompact: {
+    paddingVertical: 10
+  },
+  triggerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: 8
+  },
+  triggerText: {
+    includeFontPadding: false
+  },
+  helperText: {
+    includeFontPadding: false,
+    marginTop: 6,
+    textAlign: 'center'
+  },
+  strip: {
+    paddingVertical: 2
+  },
+  tile: {
+    borderWidth: 1,
+    overflow: 'hidden'
+  },
+  addTile: {
+    borderStyle: 'dashed',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  addTileText: {
+    fontSize: 28,
+    includeFontPadding: false
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover'
+  },
+  extensionTile: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  extensionText: {
+    fontSize: 12,
+    letterSpacing: 1,
+    includeFontPadding: false
+  },
+  tileOverlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tileOverlayText: {
+    fontSize: 12,
+    includeFontPadding: false,
+    marginBottom: 6
+  },
+  tileProgressTrack: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    bottom: 8,
+    height: 3,
+    borderRadius: 2,
+    ...smoothCorners,
+    overflow: 'hidden'
+  },
+  tileProgressFill: {
+    height: '100%',
+    borderRadius: 2,
+    ...smoothCorners
+  },
+  doneBadge: {
+    position: 'absolute',
+    right: 4,
+    bottom: 4,
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    ...smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  doneBadgeText: {
+    fontSize: 11,
+    includeFontPadding: false
+  },
+  removeButton: {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    ...smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  removeButtonText: {
+    fontSize: 13,
+    lineHeight: 15,
+    includeFontPadding: false
+  },
+  retryText: {
+    fontSize: 20,
+    includeFontPadding: false
+  },
+  listRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    padding: 10,
+    columnGap: 10
+  },
+  listThumb: {
+    width: 40,
+    height: 40,
+    overflow: 'hidden'
+  },
+  listTextWrap: {
+    flex: 1
+  },
+  listName: {
+    includeFontPadding: false
+  },
+  listSubtitle: {
+    includeFontPadding: false,
+    marginTop: 2
+  },
+  listProgressTrack: {
+    height: 3,
+    borderRadius: 2,
+    ...smoothCorners,
+    overflow: 'hidden',
+    marginTop: 6
+  },
+  listProgressFill: {
+    height: '100%',
+    borderRadius: 2,
+    ...smoothCorners
+  },
+  listRemoveText: {
+    fontSize: 22,
+    includeFontPadding: false,
+    paddingHorizontal: 4
+  },
+  errorText: {
+    includeFontPadding: false
+  }
+});
+export { FilePicker };
+export default FilePicker;
+//# sourceMappingURL=FilePicker.js.map