stream-chat-react-native-core 9.0.0-beta.11 → 9.0.0-beta.13

package/src/components/ui/Badge/ErrorBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Exclamation } from '../../../icons/Exclamation';
+import { Exclamation } from '../../../icons/exclamation-mark-fill';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -20,21 +20,6 @@ const sizes = {
   },
 };
 
-const iconSizes = {
-  xs: {
-    height: 8,
-    width: 2,
-  },
-  sm: {
-    height: 9,
-    width: 2,
-  },
-  md: {
-    height: 11,
-    width: 3,
-  },
-};
-
 export type ErrorBadgeProps = ViewProps & {
   /**
    * The size of the badge
@@ -59,8 +44,8 @@ export const ErrorBadge = (props: ErrorBadgeProps) => {
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
       <Exclamation
-        height={iconSizes[size].height}
-        width={iconSizes[size].width}
+        height={sizes[size].height}
+        width={sizes[size].width}
         fill={semantics.textOnAccent}
       />
     </View>

package/src/components/ui/Badge/GiphyBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Giphy } from '../../../icons/Giphy';
+import { Giphy } from '../../../icons/giphy';
 import { primitives } from '../../../theme';
 
 export const GiphyBadge = () => {

package/src/components/ui/Badge/ImgurBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Imgur } from '../../../icons/Imgur';
+import { Imgur } from '../../../icons/imgur';
 import { primitives } from '../../../theme';
 
 export const ImgurBadge = () => {

package/src/components/ui/Badge/RetryBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { RotateCircle } from '../../../icons/RotateCircle';
+import { Reload } from '../../../icons/refresh';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -50,7 +50,7 @@ export const RetryBadge = (props: RetryBadgeProps) => {
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <RotateCircle
+      <Reload
         height={iconSizes[size].height}
         width={iconSizes[size].width}
         stroke={semantics.textOnAccent}

package/src/components/ui/Button/Button.tsx

@@ -76,6 +76,8 @@ export const Button = ({
 
   const LeftIcon = isRTL ? TrailingIcon : LeadingIcon;
   const RightIcon = isRTL ? LeadingIcon : TrailingIcon;
+  const IconOnlyIcon = LeadingIcon ?? TrailingIcon;
+  const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
 
   return (
     <View
@@ -109,8 +111,8 @@ export const Button = ({
         disabled={disabled}
         {...rest}
       >
-        {LeftIcon ? (
-          <LeftIcon
+        {PrimaryIcon ? (
+          <PrimaryIcon
             height={20}
             width={20}
             strokeWidth={1.5}

package/src/components/ui/GiphyChip.tsx

@@ -6,8 +6,8 @@ import { TextComposerState } from 'stream-chat';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Cross } from '../../icons/Cross';
-import { Lightning } from '../../icons/Lightning';
+import { Lightning } from '../../icons/bolt';
+import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({

package/src/components/ui/Input/Input.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/Checkmark';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { Checkmark } from '../../../icons/checkmark-1';
+import { InfoTooltip } from '../../../icons/info';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -166,12 +166,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       inputContainer: {
         alignItems: 'center',
@@ -190,6 +192,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       helperContainer: {
         alignItems: 'center',
@@ -201,6 +204,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

package/src/components/ui/VideoPlayIndicator.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons/Play';
+import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -56,6 +56,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
   createDraftAttachmentsCompositionMiddleware,
+  setupVideoAttachmentPreviewMiddleware,
 } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
@@ -424,6 +425,8 @@ export const MessageInputProvider = ({
       attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
+    setupVideoAttachmentPreviewMiddleware(messageComposer);
+
     if (allowSendBeforeAttachmentsUpload) {
       messageComposer.compositionMiddlewareExecutor.replace([
         createAttachmentsCompositionMiddleware(messageComposer),

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  I18nManager,
+  Platform,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
@@ -151,12 +158,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
 
   const topItemStyle = useAnimatedStyle(() => {
     if (!topH.value) return { height: 0 };
+    const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
-      left: topH.value.x,
       position: 'absolute',
       top: topH.value.y,
       width: topH.value.w,
+      ...horizontalPosition,
     };
   });
 
@@ -172,12 +180,15 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
 
   const bottomItemStyle = useAnimatedStyle(() => {
     if (!bottomH.value) return { height: 0 };
+    const horizontalPosition = I18nManager.isRTL
+      ? { right: bottomH.value.x }
+      : { left: bottomH.value.x };
     return {
       height: bottomH.value.h,
-      left: bottomH.value.x,
       position: 'absolute',
       top: bottomH.value.y,
       width: bottomH.value.w,
+      ...horizontalPosition,
     };
   });
 

package/src/hooks/messagePreview/useMessagePreviewIcon.tsx

@@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments';
 
-import { CircleBan } from '../../icons/CircleBan';
-import { File } from '../../icons/File';
-import { Link } from '../../icons/Link';
-import { MapPin } from '../../icons/MapPin';
-import { Mic } from '../../icons/Mic';
-import { PhotoIcon } from '../../icons/PhotoIcon';
-import { PollIcon } from '../../icons/PollIcon';
-import { VideoIcon } from '../../icons/VideoIcon';
+import { File } from '../../icons/file';
+import { PhotoIcon } from '../../icons/image';
+import { Link } from '../../icons/link';
+import { MapPin } from '../../icons/location';
+import { CircleBan } from '../../icons/no-sign';
+import { PollIcon } from '../../icons/poll';
+import { VideoIcon } from '../../icons/video';
+import { Mic } from '../../icons/voice';
 import { FileTypes } from '../../types/types';
 
 export const useMessagePreviewIcon = ({

package/src/icons/Retry.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Resend = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M14.3751 8.12481H18.1251M18.1251 8.12481V4.37481M18.1251 8.12481L14.8618 5.13809C13.9063 4.18263 12.6904 3.52991 11.3661 3.26151C10.0418 2.9931 8.66771 3.12091 7.41561 3.62896C6.1635 4.137 5.08887 5.00276 4.32599 6.11806C3.5631 7.23336 3.1458 8.54875 3.12621 9.89986C3.10662 11.251 3.48562 12.5779 4.21585 13.7148C4.94609 14.8518 5.99517 15.7483 7.23202 16.2925C8.46887 16.8366 9.83865 17.0042 11.1702 16.7743C12.5018 16.5444 13.736 15.9272 14.7188 14.9998'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/archive.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Archive: React.FC<IconProps> = ({ height, size, width, ...props }) => (
+  <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...props}>
+    <Path
+      d='M16.875 7.5V15C16.875 15.1658 16.8092 15.3247 16.6919 15.4419C16.5747 15.5592 16.4158 15.625 16.25 15.625H3.75C3.58424 15.625 3.42527 15.5592 3.30806 15.4419C3.19085 15.3247 3.125 15.1658 3.125 15V7.5M8.125 10.625H11.875M2.5 4.375H17.5C17.8452 4.375 18.125 4.65482 18.125 5V6.875C18.125 7.22018 17.8452 7.5 17.5 7.5H2.5C2.15482 7.5 1.875 7.22018 1.875 6.875V5C1.875 4.65482 2.15482 4.375 2.5 4.375Z'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    />
+  </Svg>
+);

package/src/icons/arrow-up-right.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ArrowUpRight = ({ height, size, width, ...rest }: IconProps) => {
+  return (
+    <Svg
+      height={height ?? size ?? 16}
+      viewBox={'0 0 20 20'}
+      width={width ?? size ?? 16}
+      fill={'none'}
+      {...rest}
+    >
+      <Path
+        d='M5 15L15 5M15 5H6.875M15 5V13.125'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+        {...rest}
+      />
+    </Svg>
+  );
+};

package/src/icons/arrow-up.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ArrowUp = ({ height, size, width, ...rest }: IconProps) => (
+  <Svg height={height ?? size} viewBox={'0 0 20 20'} fill='none' width={width ?? size}>
+    <Path
+      d='M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    />
+  </Svg>
+);
+
+export const Down = ({ height, size, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} {...rest}>
+    <Path
+      d='M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      transform='rotate(180 10 10)'
+      {...rest}
+    />
+  </Svg>
+);

package/src/icons/audio.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Sound = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...props}>
+      <Path
+        d='M15.625 8.125V11.875M18.125 6.875V13.125M6.875 13.125H3.125C2.95924 13.125 2.80027 13.0592 2.68306 12.9419C2.56585 12.8247 2.5 12.6658 2.5 12.5V7.5C2.5 7.33424 2.56585 7.17527 2.68306 7.05806C2.80027 6.94085 2.95924 6.875 3.125 6.875H6.875L12.5 2.5V17.5L6.875 13.125Z'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/bell.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Bell = ({ height, size, width, ...rest }: IconProps) => {
+  return (
+    <Svg
+      height={height ?? size ?? 16}
+      viewBox={'0 0 20 20'}
+      width={width ?? size ?? 16}
+      fill={'none'}
+      {...rest}
+    >
+      <Path
+        d='M7.50015 15C7.50015 15.663 7.76354 16.2989 8.23238 16.7678C8.70122 17.2366 9.33711 17.5 10.0001 17.5C10.6632 17.5 11.2991 17.2366 11.7679 16.7678C12.2368 16.2989 12.5001 15.663 12.5001 15M4.37515 8.125C4.37515 6.63316 4.96778 5.20242 6.02267 4.14752C7.07756 3.09263 8.5083 2.5 10.0001 2.5C11.492 2.5 12.9227 3.09263 13.9776 4.14752C15.0325 5.20242 15.6251 6.63316 15.6251 8.125C15.6251 10.9234 16.2736 13.1719 16.7892 14.0625C16.844 14.1574 16.8728 14.2649 16.8729 14.3745C16.873 14.484 16.8444 14.5916 16.7898 14.6865C16.7352 14.7815 16.6566 14.8604 16.5619 14.9154C16.4672 14.9705 16.3597 14.9996 16.2501 15H3.75015C3.64076 14.9993 3.53345 14.97 3.43896 14.9149C3.34448 14.8597 3.26611 14.7808 3.2117 14.6859C3.15729 14.591 3.12874 14.4835 3.12891 14.3741C3.12907 14.2647 3.15795 14.1572 3.21265 14.0625C3.72749 13.1719 4.37515 10.9227 4.37515 8.125Z'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+        {...rest}
+      />
+    </Svg>
+  );
+};

package/src/icons/bolt.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Lightning = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = fill ?? pathFill ?? stroke ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M16.7071 9.80157L7.95711 19.1766C7.86438 19.2755 7.74198 19.3416 7.60839 19.3649C7.47479 19.3882 7.33724 19.3674 7.2165 19.3057C7.09576 19.244 6.99837 19.1446 6.93904 19.0227C6.8797 18.9007 6.86164 18.7628 6.88757 18.6297L8.03289 12.9008L3.53054 11.2102C3.43385 11.174 3.34762 11.1144 3.27956 11.0368C3.2115 10.9592 3.16373 10.8659 3.14052 10.7653C3.1173 10.6647 3.11937 10.5599 3.14653 10.4603C3.17369 10.3607 3.2251 10.2694 3.29617 10.1945L12.0462 0.819538C12.1389 0.720581 12.2613 0.654468 12.3949 0.631176C12.5285 0.607884 12.666 0.628675 12.7868 0.690414C12.9075 0.752152 13.0049 0.851488 13.0642 0.97343C13.1236 1.09537 13.1416 1.2333 13.1157 1.36641L11.9673 7.10157L16.4696 8.78985C16.5656 8.82626 16.6511 8.88576 16.7187 8.96307C16.7862 9.04039 16.8336 9.13315 16.8568 9.23316C16.88 9.33317 16.8781 9.43734 16.8515 9.53648C16.8248 9.63562 16.7742 9.72666 16.704 9.80157H16.7071Z'
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icons/camera.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Camera = ({ height, size, width, ...props }: IconProps) => (
+  <Svg
+    fill='none'
+    height={height ?? size}
+    width={width ?? size}
+    viewBox={'0 0 20 20'}
+    strokeWidth={1.5}
+    strokeLinejoin='round'
+    {...props}
+  >
+    <Path
+      d='M16.25 16.25H3.75C3.41848 16.25 3.10054 16.1183 2.86612 15.8839C2.6317 15.6495 2.5 15.3315 2.5 15V6.25C2.5 5.91848 2.6317 5.60054 2.86612 5.36612C3.10054 5.1317 3.41848 5 3.75 5H6.25L7.5 3.125H12.5L13.75 5H16.25C16.5815 5 16.8995 5.1317 17.1339 5.36612C17.3683 5.60054 17.5 5.91848 17.5 6.25V15C17.5 15.3315 17.3683 15.6495 17.1339 15.8839C16.8995 16.1183 16.5815 16.25 16.25 16.25Z'
+      {...props}
+    />
+    <Path
+      d='M10 13.125C11.5533 13.125 12.8125 11.8658 12.8125 10.3125C12.8125 8.7592 11.5533 7.5 10 7.5C8.4467 7.5 7.1875 8.7592 7.1875 10.3125C7.1875 11.8658 8.4467 13.125 10 13.125Z'
+      {...props}
+    />
+  </Svg>
+);

package/src/icons/checkmark-1.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Checkmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M3.125 11.25L7.5 15.625L17.5 5.625'
+        fill='none'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/checkmark.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Check = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M3.125 11.25L7.5 15.625L17.5 5.625'
+        fill='none'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};
+
+export const Tick = (props: IconProps) => <Check {...props} />;

package/src/icons/checks.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const CheckAll = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M1.5 10.5724L4.98387 13.9936L13.1129 6.00977M10.371 13.9936L18.5 6.00977'
+        fill='none'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/chevron-down.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ChevronTop = ({ height, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height} viewBox={'0 0 20 20'} width={width} {...rest}>
+    <Path
+      d='M16.25 12.5L10 6.25L3.75 12.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      {...rest}
+    />
+  </Svg>
+);

package/src/icons/chevron-left.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ChevronLeft = ({ height, size, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} {...rest}>
+    <Path
+      d='M12.5 16.25L6.25 10L12.5 3.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      {...rest}
+    />
+  </Svg>
+);

package/src/icons/clock.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Time = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M10 5.625V10H14.375M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z'
+        fill='none'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/command.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const CommandsIcon = ({ height, size, width, ...props }: IconProps) => (
+  <Svg fill='none' height={height ?? size} width={width ?? size} viewBox={'0 0 20 20'} {...props}>
+    <Path
+      d='M6.25 7.5L9.375 10L6.25 12.5M10.625 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z'
+      strokeWidth={1.5}
+      strokeLinejoin='round'
+      {...props}
+    />
+  </Svg>
+);

package/src/icons/copy.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Copy = ({ height, size, width, ...props }: IconProps) => (
+  <Svg viewBox={'0 0 20 20'} fill='none' height={height ?? size} width={width ?? size} {...props}>
+    <Path
+      d='M13.125 13.125H16.875V3.125H6.875V6.875M3.125 6.875H13.125V16.875H3.125V6.875Z'
+      {...props}
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </Svg>
+);

package/src/icons/delete.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Delete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M16.875 4.375H3.125M8.125 8.125V13.125M11.875 8.125V13.125M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};