stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -15,6 +15,7 @@ import {
 import { PlayPauseButton } from './PlayPauseButton';
 
 import { useTheme } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks';
 import { useAudioPlayer } from '../../../hooks/useAudioPlayer';
 import {
@@ -28,6 +29,7 @@ import { AudioPlayerState } from '../../../state-store/audio-player';
 import { primitives } from '../../../theme';
 import { AudioConfig } from '../../../types/types';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
+import { StableDurationLabel } from '../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../ProgressControl/WaveProgressBar';
 import { SpeedSettingsButton } from '../../ui/SpeedSettingsButton';
 
@@ -36,6 +38,16 @@ const ONE_SECOND_IN_MILLISECONDS = 1000;
 
 dayjs.extend(duration);
 
+const getAudioDurationLabel = (durationInMilliseconds: number) => {
+  if (!durationInMilliseconds) {
+    return '00:00';
+  }
+
+  return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1
+    ? dayjs.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss')
+    : dayjs.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
+};
+
 export type AudioAttachmentType = AudioConfig &
   Pick<
     StreamAudioAttachment | StreamVoiceRecordingAttachment,
@@ -131,7 +143,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
 
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    // Voice recordings already carry the canonical duration in the attachment payload.
     if (isVoiceRecording) {
       return;
     }
@@ -157,19 +169,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     await audioPlayer.stop();
   };
 
-  const dragStart = () => {
+  const dragStart = useStableCallback(() => {
     audioPlayer.pause();
-  };
-
-  const dragProgress = (currentProgress: number) => {
-    audioPlayer.progress = currentProgress;
-  };
+  });
 
-  const dragEnd = async (currentProgress: number) => {
+  const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
-  };
+  });
 
   const onSpeedChangeHandler = async () => {
     await audioPlayer.changePlaybackRate();
@@ -193,14 +200,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
+  const remainingDuration = useMemo(() => Math.max(duration - position, 0), [duration, position]);
+
   const progressDuration = useMemo(
-    () =>
-      position
-        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
-          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
-          : dayjs.duration(position, 'milliseconds').format('mm:ss')
-        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
-    [duration, position],
+    () => getAudioDurationLabel(remainingDuration || duration),
+    [duration, remainingDuration],
   );
 
   return (
@@ -247,23 +253,21 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
           indicator
         ) : (
           <View style={[styles.audioInfo, audioInfo]}>
-            <Text
-              style={[
-                styles.progressDurationText,
-                { color: isPlaying ? semantics.accentPrimary : semantics.textSecondary },
-                progressDurationText,
-                stylesProps?.durationText,
-              ]}
-            >
-              {progressDuration}
-            </Text>
+            <StableDurationLabel
+              accessibilityLabel='Progress Duration'
+              reserveLabel={maxDurationLabel}
+              label={progressDuration}
+              style={[styles.progressDurationText, progressDurationText, stylesProps?.durationText]}
+              visibleStyle={{
+                color: isPlaying ? semantics.accentPrimary : semantics.textSecondary,
+              }}
+            />
             {!hideProgressBar && (
               <View style={[styles.progressControlContainer, progressControlContainer]}>
                 {item.waveform_data ? (
                   <WaveProgressBar
                     isPlaying={isPlaying}
                     onEndDrag={dragEnd}
-                    onProgressDrag={dragProgress}
                     onStartDrag={dragStart}
                     progress={progress}
                     waveformData={item.waveform_data}
@@ -345,6 +349,7 @@ const useStyles = () => {
       },
       progressDurationText: {
         color: semantics.textPrimary,
+        fontVariant: ['tabular-nums'],
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';
 

package/src/components/Attachment/FileIcon.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Audio } from '../../icons/Audio';
-import { Code } from '../../icons/Code';
-import { DOC } from '../../icons/DOC';
-import { OtherFileIcon } from '../../icons/OtherFileIcon';
-import { PDF } from '../../icons/PDF';
-import { Presentation } from '../../icons/Presentation';
-import { SpreadSheet } from '../../icons/SpreadSheet';
+import { Audio } from '../../icons/filetype-audio-xl';
+import { Code } from '../../icons/filetype-code-xl';
+import { ZIP } from '../../icons/filetype-compression-xl';
+import { OtherFileIcon } from '../../icons/filetype-other-xl';
+import { PDF } from '../../icons/filetype-pdf-xl';
+import { Presentation } from '../../icons/filetype-presentation-xl';
+import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
+import { DOC } from '../../icons/filetype-text-xl';
+import { Video } from '../../icons/filetype-video-xl';
 import type { IconProps } from '../../icons/utils/base';
-import { Video } from '../../icons/Video';
-import { ZIP } from '../../icons/ZIP';
 
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
 const audioFileTypes = [

package/src/components/Attachment/Gallery.tsx

@@ -327,14 +327,7 @@ const GalleryThumbnail = ({
           });
         }
       }}
-      style={({ pressed }) => [
-        styles.imageContainer,
-        {
-          opacity: pressed ? 0.8 : 1,
-          flex: thumbnail.flex,
-        },
-        imageContainer,
-      ]}
+      style={[styles.imageContainer, { flex: thumbnail.flex }, imageContainer]}
       testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
       {...additionalPressableProps}
     >

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -17,7 +17,8 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { EyeOpen } from '../../../icons/EyeOpen';
-import { primitives } from '../../../theme';
+import { components, primitives } from '../../../theme';
+import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
@@ -46,14 +47,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   const {
     theme: {
       messageItemView: {
-        giphy: {
-          actionButtonContainer,
-          actionButton,
-          actionButtonText,
-          container,
-          giphyHeaderText,
-          header,
-        },
+        giphy: { actionButtonContainer, actionButton, container, giphyHeaderText, header },
       },
       semantics,
     },
@@ -68,7 +62,10 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   }
 
   return actions ? (
-    <View style={[styles.container, container]} testID='giphy-action-attachment'>
+    <View
+      style={[styles.container, styles.actionContainer, container]}
+      testID='giphy-action-attachment'
+    >
       <View style={[styles.header, header]}>
         <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
@@ -76,33 +73,23 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>
         {actions.map((action) => {
+          const isPrimaryAction = action.text === 'Send';
           return (
-            <Pressable
+            <Button
               key={action.value}
+              variant={isPrimaryAction ? 'primary' : 'secondary'}
+              type='ghost'
+              size='sm'
+              testID={`${action.value}-action-button`}
               onPress={() => {
                 if (action?.name && action?.value && handleAction) {
                   handleAction(action.name, action.value);
                 }
               }}
+              iconOnly={false}
+              label={action.text}
               style={[styles.actionButton, actionButton]}
-              testID={`${action.value}-action-button`}
-            >
-              <Text
-                numberOfLines={1}
-                style={[
-                  styles.actionButtonText,
-                  {
-                    color:
-                      action.text === 'Send'
-                        ? semantics.buttonPrimaryText
-                        : semantics.buttonSecondaryText,
-                  },
-                  actionButtonText,
-                ]}
-              >
-                {action.text}
-              </Text>
-            </Pressable>
+            />
           );
         })}
       </View>
@@ -225,20 +212,19 @@ const useStyles = () => {
         overflow: 'hidden',
       },
       actionButtonContainer: {
+        alignSelf: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-      },
-      actionButton: {
-        alignItems: 'center',
-        flex: 1,
+        paddingHorizontal: primitives.spacingXxs,
         justifyContent: 'center',
-        paddingVertical: primitives.spacingSm,
       },
-      actionButtonText: {
-        fontSize: primitives.typographyFontSizeMd,
-        fontWeight: primitives.typographyFontWeightSemiBold,
-        lineHeight: primitives.typographyLineHeightNormal,
-        color: semantics.buttonSecondaryText,
+      actionContainer: {},
+      actionButton: {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        width: undefined,
+        minHeight: components.buttonHitTargetMinHeight,
       },
       header: {
         alignItems: 'center',

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -24,7 +24,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -24,7 +24,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';

package/src/components/Attachment/VideoThumbnail.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { VideoPlayIndicator } from '../ui';
+import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -13,6 +13,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
@@ -38,6 +39,9 @@ export const AttachmentPicker = () => {
     bottomSheetRef: ref,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
 
   const [currentIndex, setCurrentIndexInternal] = useState(-1);
   const currentIndexRef = useRef<number>(currentIndex);
@@ -105,9 +109,19 @@ export const AttachmentPicker = () => {
   });
 
   const animationConfigs = useBottomSheetSpringConfigs(SPRING_CONFIG);
+  const backgroundStyle = useMemo(
+    () => ({
+      backgroundColor: semantics.backgroundCoreElevation1,
+      borderTopWidth: 0,
+      elevation: Platform.OS === 'android' ? 0 : undefined,
+      shadowOpacity: Platform.OS === 'android' ? 0 : undefined,
+    }),
+    [semantics.backgroundCoreElevation1],
+  );
 
   return (
     <BottomSheet
+      backgroundStyle={backgroundStyle}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, StyleSheet } from 'react-native';
 
 import { renderAttachmentPickerItem } from './AttachmentPickerItem';
+import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
 
@@ -9,21 +10,11 @@ import { useStableCallback } from '../../../../hooks';
 import { Picture } from '../../../../icons';
 
 import { NativeHandlers } from '../../../../native';
-import type { File } from '../../../../types/types';
 import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
 import {
-  AttachmentPickerContentProps,
   AttachmentPickerGenericContent,
-} from '../AttachmentPickerContent';
-
-export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
-
-export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
-
-export type PhotoContentItemType = File | IosLimitedItemType;
-
-export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
-  'uri' in item && item.uri === '@getstream/ios-limited-button';
+  type AttachmentPickerContentProps,
+} from '../AttachmentPickerGenericContent';
 
 const keyExtractor = (item: PhotoContentItemType) => item.uri;
 

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { Alert, Image, StyleSheet, Text, View } from 'react-native';
 
 import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
 
-import { isIosLimited, PhotoContentItemType } from './AttachmentMediaPicker';
+import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
@@ -13,7 +13,7 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../../hooks/useViewport';
-import { Plus } from '../../../../icons/Plus';
+import { Plus } from '../../../../icons/plus';
 import { NativeHandlers } from '../../../../native';
 import { primitives } from '../../../../theme';
 import type { File } from '../../../../types/types';
@@ -68,23 +68,22 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
   };
 
   return (
-    <BottomSheetTouchableOpacity onPress={onPressVideo}>
-      <ImageBackground
-        source={{ uri: thumb_url }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        <View style={[styles.overlay, imageOverlay]}>
-          <ImageOverlaySelectedComponent index={selectedIndex} />
-        </View>
-        <VideoAttachmentMetadataPill duration={videoDuration} format='timer' />
-      </ImageBackground>
+    <BottomSheetTouchableOpacity
+      onPress={onPressVideo}
+      style={[
+        {
+          height: size,
+          margin: 1,
+          width: size,
+        },
+        image,
+      ]}
+    >
+      <Image source={{ uri: thumb_url }} style={StyleSheet.absoluteFillObject} />
+      <View style={[styles.overlay, imageOverlay]}>
+        <ImageOverlaySelectedComponent index={selectedIndex} />
+      </View>
+      <VideoAttachmentMetadataPill duration={videoDuration} format='timer' />
     </BottomSheetTouchableOpacity>
   );
 };
@@ -128,22 +127,21 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
   };
 
   return (
-    <BottomSheetTouchableOpacity onPress={onPressImage}>
-      <ImageBackground
-        source={{ uri }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        <View style={[styles.overlay, imageOverlay]}>
-          <ImageOverlaySelectedComponent index={selectedIndex} />
-        </View>
-      </ImageBackground>
+    <BottomSheetTouchableOpacity
+      onPress={onPressImage}
+      style={[
+        {
+          height: size,
+          margin: 1,
+          width: size,
+        },
+        image,
+      ]}
+    >
+      <Image source={{ uri }} style={StyleSheet.absoluteFillObject} />
+      <View style={[styles.overlay, imageOverlay]}>
+        <ImageOverlaySelectedComponent index={selectedIndex} />
+      </View>
     </BottomSheetTouchableOpacity>
   );
 };

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts

@@ -0,0 +1,10 @@
+import type { File } from '../../../../types/types';
+
+export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
+
+export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
+
+export type PhotoContentItemType = File | IosLimitedItemType;
+
+export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
+  'uri' in item && item.uri === IOS_LIMITED_DEEPLINK;

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -7,6 +7,11 @@ import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
 
 import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
 
+import {
+  AttachmentPickerGenericContent,
+  type AttachmentPickerContentProps,
+} from './AttachmentPickerGenericContent';
+
 import {
   useAttachmentPickerContext,
   useBottomSheetContext,
@@ -16,90 +21,9 @@ import {
 } from '../../../contexts';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, IconProps, PollThumbnail, Recorder } from '../../../icons';
+import { Camera, FilePickerIcon, PollThumbnail, VideoIcon } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
-import { Button } from '../../ui';
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: semantics.backgroundCoreElevation1,
-          paddingHorizontal: primitives.spacing2xl,
-          paddingBottom: primitives.spacing3xl,
-        },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-        text: {
-          fontSize: primitives.typographyFontSizeMd,
-          color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
-          textAlign: 'center',
-          maxWidth: 200,
-        },
-      }),
-    [semantics.backgroundCoreElevation1, semantics.textSecondary],
-  );
-};
-
-export type AttachmentPickerGenericContentProps = {
-  Icon: React.ComponentType<IconProps>;
-  onPress: () => void;
-  height?: number;
-  buttonText?: string;
-  description?: string;
-};
-
-export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
-  const { height, buttonText, Icon, description, onPress } = props;
-  const styles = useStyles();
-
-  const {
-    theme: {
-      semantics,
-      attachmentPicker: {
-        content: { container, text, infoContainer },
-      },
-    },
-  } = useTheme();
-
-  const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
-    [Icon, semantics.textTertiary],
-  );
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          height,
-        },
-        container,
-      ]}
-    >
-      <View style={[styles.infoContainer, infoContainer]}>
-        <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
-      </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
 
 const keyExtractor = (item: { id: string }) => item.id;
 
@@ -273,7 +197,7 @@ export const AttachmentCameraPicker = (
     />
   ) : (
     <AttachmentPickerGenericContent
-      Icon={videoOnly ? Recorder : Camera}
+      Icon={videoOnly ? VideoIcon : Camera}
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}
@@ -298,7 +222,8 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   );
 };
 
-export type AttachmentPickerContentProps = Pick<AttachmentPickerGenericContentProps, 'height'>;
+export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
+export { AttachmentPickerGenericContent } from './AttachmentPickerGenericContent';
 
 export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
   const { height } = props;