@reown/appkit-ui-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/composites/wui-double-image-loader/index.native.tsx

@@ -33,8 +33,8 @@ export function DoubleImageLoader({
   const leftPosition = useAnimatedValue(10);
   const rightPosition = useAnimatedValue(-10);
 
-  const animateLeft = () => {
-    Animated.loop(
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(leftPosition, {
           toValue: -5,
@@ -47,11 +47,9 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  const animateRight = () => {
-    Animated.loop(
+    const rightAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(rightPosition, {
           toValue: 5,
@@ -64,12 +62,15 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  useEffect(() => {
-    animateLeft();
-    animateRight();
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/composites/wui-email-input/index.tsx

@@ -93,7 +93,7 @@ export function EmailInput({
   return (
     <View style={style}>
       <InputText
-        icon="mail"
+        icon="email"
         placeholder="Email"
         size="md"
         onSubmitEditing={handleSubmitEditing}

package/src/composites/wui-list-item/index.tsx

@@ -5,7 +5,8 @@ import {
   Animated,
   type StyleProp,
   type ViewStyle,
-  type ImageStyle
+  type ImageStyle,
+  type ImageProps
 } from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
@@ -27,6 +28,7 @@ export interface ListItemProps {
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
   imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
@@ -42,6 +44,7 @@ export function ListItem({
   children,
   icon,
   imageSrc,
+  imageProps,
   imageHeaders,
   imageStyle,
   imageContainerStyle,
@@ -74,8 +77,9 @@ export function ListItem({
           ]}
         >
           <Image
-            source={imageSrc}
+            {...imageProps}
             headers={imageHeaders}
+            source={imageSrc}
             style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>

package/src/composites/wui-list-social/index.tsx

@@ -6,6 +6,7 @@ import type { LogoType } from '../../utils/TypesUtil';
 import styles from './styles';
 import { Logo } from '../wui-logo';
 import type { ReactNode } from 'react';
+import { Icon } from '../../components/wui-icon';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -18,6 +19,8 @@ export interface ListSocialProps {
   testID?: string;
   logoWidth?: number;
   logoHeight?: number;
+  logoStyle?: StyleProp<ViewStyle>;
+  chevron?: boolean;
 }
 
 export function ListSocial({
@@ -28,7 +31,9 @@ export function ListSocial({
   style,
   testID,
   logoHeight = 40,
-  logoWidth = 40
+  logoWidth = 40,
+  logoStyle,
+  chevron
 }: ListSocialProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
@@ -48,18 +53,23 @@ export function ListSocial({
       <View
         style={[
           styles.border,
-          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] }
+          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] },
+          logoStyle
         ]}
       >
         <Logo
           logo={logo}
-          style={disabled && styles.disabledLogo}
+          style={[disabled && styles.disabledLogo]}
           width={logoWidth}
           height={logoHeight}
         />
       </View>
       {children}
-      <View style={styles.rightPlaceholder} />
+      {chevron ? (
+        <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+      ) : (
+        <View style={styles.rightPlaceholder} />
+      )}
     </AnimatedPressable>
   );
 }

package/src/composites/wui-list-social/styles.ts

@@ -24,5 +24,8 @@ export default StyleSheet.create({
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
   }
 });

package/src/composites/wui-list-token/index.tsx

@@ -10,7 +10,7 @@ import styles from './styles';
 export const ListTokenTotalHeight = 64;
 
 export interface ListTokenProps {
-  imageSrc: string;
+  imageSrc?: string;
   networkSrc?: string;
   name: string;
   value?: number;
@@ -50,10 +50,7 @@ export function ListToken({
       >
         <FlexView flexDirection="row" alignItems="center">
           {imageSrc ? (
-            <Image
-              source={imageSrc}
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-            />
+            <Image source={imageSrc} style={styles.image} />
           ) : (
             <FlexView
               style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}

package/src/composites/wui-network-image/index.tsx

@@ -1,9 +1,8 @@
-import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
+import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import type { SizeType } from '../../utils/TypesUtil';
-import { Icon } from '../../components/wui-icon';
-import { FlexView } from '../../layout/wui-flex';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
 import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
 
 export interface NetworkImageProps {
@@ -31,6 +30,13 @@ const sizeToHeight = {
   xs: 20
 };
 
+const sizeToIconSize = {
+  lg: 24,
+  md: 16,
+  sm: 14,
+  xs: 12
+};
+
 export function NetworkImage({
   imageSrc,
   imageHeaders,
@@ -44,42 +50,52 @@ export function NetworkImage({
   const Theme = useTheme();
   const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
   const opacity = disabled ? 0.5 : 1;
+  const containerSize = sizeToHeight[size];
+  const iconSize = sizeToIconSize[size];
 
   return (
     <Svg
-      width={sizeToHeight[size]}
-      height={sizeToHeight[size]}
+      width={containerSize}
+      height={containerSize}
       stroke={borderColor ?? svgStroke}
       strokeWidth={borderWidth}
       style={style}
     >
-      <Defs>
-        <Pattern id="image-pattern">
-          {imageSrc ? (
-            <Image
-              height={sizeToHeight[size]}
-              width={sizeToHeight[size]}
-              opacity={opacity}
-              href={{ uri: imageSrc, headers: imageHeaders }}
-            />
-          ) : (
-            <FlexView
-              alignItems="center"
-              justifyContent="center"
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                height: sizeToHeight[size],
-                width: sizeToHeight[size],
-                backgroundColor: 'transparent'
-              }}
+      {imageSrc ? (
+        <>
+          <Defs>
+            <Pattern
+              id="image-pattern"
+              width={containerSize}
+              height={containerSize}
+              patternUnits="userSpaceOnUse"
             >
-              <Icon name="networkPlaceholder" size={size} color="fg-200" />
-            </FlexView>
-          )}
-        </Pattern>
-      </Defs>
-      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
-      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+              <Image
+                height={containerSize}
+                width={containerSize}
+                opacity={opacity}
+                href={{ uri: imageSrc, headers: imageHeaders }}
+              />
+            </Pattern>
+          </Defs>
+          <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+        </>
+      ) : (
+        <>
+          <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />
+          <G
+            transform={`translate(${(containerSize - iconSize) / 2}, ${
+              (containerSize - iconSize) / 2
+            })`}
+          >
+            <NetworkPlaceholderSvg
+              fill={selected ? Theme['accent-100'] : Theme['fg-200']}
+              width={iconSize}
+              height={iconSize}
+            />
+          </G>
+        </>
+      )}
     </Svg>
   );
 }

package/src/composites/wui-numeric-keyboard/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
@@ -7,7 +8,7 @@ export interface NumericKeyboardProps {
   onKeyPress: (value: string) => void;
 }
 
-export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+function _NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   const Theme = useTheme();
   const keys = [
     ['1', '2', '3'],
@@ -48,6 +49,8 @@ export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   );
 }
 
+export const NumericKeyboard = memo(_NumericKeyboard);
+
 const styles = StyleSheet.create({
   row: {
     marginBottom: 10

package/src/composites/wui-token-button/index.tsx

@@ -1,12 +1,12 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
 import { Icon } from '../../components/wui-icon';
 import styles from './styles';
 import { useTheme } from '../../context/ThemeContext';
-import { View } from 'react-native';
-import React from 'react';
 
 export interface TokenButtonProps {
   onPress?: () => void;
@@ -57,7 +57,7 @@ export function TokenButton({
         <Image
           key="image"
           source={imageUrl}
-          style={[styles.image, { backgroundColor: Theme['fg-100'] }]}
+          style={[styles.image, { backgroundColor: Theme['inverse-100'] }]}
         />
         {renderClip && <View style={styles.clipContainer}>{renderClip}</View>}
       </View>

package/src/index.ts

@@ -53,7 +53,6 @@ export { NetworkImage, type NetworkImageProps } from './composites/wui-network-i
 export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';
 export { Otp, type OtpProps } from './composites/wui-otp';
 export { Pressable, type PressableProps } from './components/wui-pressable';
-export { Promo, type PromoProps } from './composites/wui-promo';
 export { QrCode, type QrCodeProps } from './composites/wui-qr-code';
 export { SearchBar, type SearchBarProps } from './composites/wui-search-bar';
 export { Snackbar, type SnackbarProps } from './composites/wui-snackbar';

package/src/utils/TransactionUtil.ts

@@ -1,9 +1,9 @@
-import { DateUtil } from '@reown/appkit-common-react-native';
-import type {
-  TransactionTransfer,
-  Transaction,
-  TransactionImage,
-  TransactionMetadata
+import {
+  type TransactionTransfer,
+  type Transaction,
+  type TransactionImage,
+  type TransactionMetadata,
+  DateUtil
 } from '@reown/appkit-common-react-native';
 import type { TransactionType } from './TypesUtil';
 import { UiUtil } from './UiUtil';

package/src/utils/TypesUtil.ts

@@ -169,7 +169,7 @@ export type IconType =
   | 'google'
   | 'helpCircle'
   | 'infoCircle'
-  | 'mail'
+  | 'email'
   | 'mobile'
   | 'more'
   | 'networkPlaceholder'
@@ -223,6 +223,7 @@ export type LogoType =
   | 'more'
   | 'telegram'
   | 'twitch'
+  | 'email'
   | 'x';
 
 export type TagType = 'main' | 'shade' | 'error' | 'success';

package/lib/commonjs/composites/wui-promo/index.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Promo = Promo;
-var _reactNative = require("react-native");
-var _wuiIcon = require("../../components/wui-icon");
-var _wuiText = require("../../components/wui-text");
-var _useTheme = require("../../hooks/useTheme");
-var _wuiFlex = require("../../layout/wui-flex");
-var _ThemeUtil = require("../../utils/ThemeUtil");
-function Promo({
-  text,
-  style,
-  onPress
-}) {
-  const Theme = (0, _useTheme.useTheme)();
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
-    style: style,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(_wuiFlex.FlexView, {
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    padding: ['xs', 'xs', 'xs', 'm'],
-    style: [styles.container, {
-      backgroundColor: Theme['gray-glass-090']
-    }]
-  }, /*#__PURE__*/React.createElement(_wuiText.Text, {
-    variant: "small-600",
-    color: "bg-100"
-  }, text), /*#__PURE__*/React.createElement(_wuiIcon.Icon, {
-    style: styles.icon,
-    name: "arrowRight",
-    color: "bg-100",
-    size: "xs"
-  })));
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    borderRadius: _ThemeUtil.BorderRadius.full
-  },
-  icon: {
-    marginLeft: _ThemeUtil.Spacing['2xs']
-  }
-});
-//# sourceMappingURL=index.js.map

package/lib/commonjs/composites/wui-promo/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_wuiIcon","_wuiText","_useTheme","_wuiFlex","_ThemeUtil","Promo","text","style","onPress","Theme","useTheme","React","createElement","Pressable","FlexView","alignItems","justifyContent","flexDirection","padding","styles","container","backgroundColor","Text","variant","color","Icon","icon","name","size","StyleSheet","create","borderRadius","BorderRadius","full","marginLeft","Spacing"],"sourceRoot":"../../../../src","sources":["composites/wui-promo/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAQO,SAASM,KAAKA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAC1D,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,oBACEC,KAAA,CAAAC,aAAA,CAACd,YAAA,CAAAe,SAAS;IAACN,KAAK,EAAEA,KAAM;IAACC,OAAO,EAAEA;EAAQ,gBACxCG,KAAA,CAAAC,aAAA,CAACT,QAAA,CAAAW,QAAQ;IACPC,UAAU,EAAC,QAAQ;IACnBC,cAAc,EAAC,QAAQ;IACvBC,aAAa,EAAC,KAAK;IACnBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAE;IACjCX,KAAK,EAAE,CAACY,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEZ,KAAK,CAAC,gBAAgB;IAAE,CAAC;EAAE,gBAExEE,KAAA,CAAAC,aAAA,CAACX,QAAA,CAAAqB,IAAI;IAACC,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAQ,GACrClB,IACG,CAAC,eACPK,KAAA,CAAAC,aAAA,CAACZ,QAAA,CAAAyB,IAAI;IAAClB,KAAK,EAAEY,MAAM,CAACO,IAAK;IAACC,IAAI,EAAC,YAAY;IAACH,KAAK,EAAC,QAAQ;IAACI,IAAI,EAAC;EAAI,CAAE,CAC9D,CACD,CAAC;AAEhB;AAEA,MAAMT,MAAM,GAAGU,uBAAU,CAACC,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,YAAY,EAAEC,uBAAY,CAACC;EAC7B,CAAC;EACDP,IAAI,EAAE;IACJQ,UAAU,EAAEC,kBAAO,CAAC,KAAK;EAC3B;AACF,CAAC,CAAC"}

package/lib/module/composites/wui-promo/index.js

@@ -1,42 +0,0 @@
-import { Pressable, StyleSheet } from 'react-native';
-import { Icon } from '../../components/wui-icon';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import { FlexView } from '../../layout/wui-flex';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-export function Promo({
-  text,
-  style,
-  onPress
-}) {
-  const Theme = useTheme();
-  return /*#__PURE__*/React.createElement(Pressable, {
-    style: style,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(FlexView, {
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    padding: ['xs', 'xs', 'xs', 'm'],
-    style: [styles.container, {
-      backgroundColor: Theme['gray-glass-090']
-    }]
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "small-600",
-    color: "bg-100"
-  }, text), /*#__PURE__*/React.createElement(Icon, {
-    style: styles.icon,
-    name: "arrowRight",
-    color: "bg-100",
-    size: "xs"
-  })));
-}
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: BorderRadius.full
-  },
-  icon: {
-    marginLeft: Spacing['2xs']
-  }
-});
-//# sourceMappingURL=index.js.map

package/lib/module/composites/wui-promo/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Pressable","StyleSheet","Icon","Text","useTheme","FlexView","BorderRadius","Spacing","Promo","text","style","onPress","Theme","React","createElement","alignItems","justifyContent","flexDirection","padding","styles","container","backgroundColor","variant","color","icon","name","size","create","borderRadius","full","marginLeft"],"sourceRoot":"../../../../src","sources":["composites/wui-promo/index.tsx"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,QAAwC,cAAc;AACpF,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,EAAEC,OAAO,QAAQ,uBAAuB;AAQ7D,OAAO,SAASC,KAAKA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAC1D,MAAMC,KAAK,GAAGR,QAAQ,CAAC,CAAC;EAExB,oBACES,KAAA,CAAAC,aAAA,CAACd,SAAS;IAACU,KAAK,EAAEA,KAAM;IAACC,OAAO,EAAEA;EAAQ,gBACxCE,KAAA,CAAAC,aAAA,CAACT,QAAQ;IACPU,UAAU,EAAC,QAAQ;IACnBC,cAAc,EAAC,QAAQ;IACvBC,aAAa,EAAC,KAAK;IACnBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAE;IACjCR,KAAK,EAAE,CAACS,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,KAAK,CAAC,gBAAgB;IAAE,CAAC;EAAE,gBAExEC,KAAA,CAAAC,aAAA,CAACX,IAAI;IAACmB,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAQ,GACrCd,IACG,CAAC,eACPI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACQ,KAAK,EAAES,MAAM,CAACK,IAAK;IAACC,IAAI,EAAC,YAAY;IAACF,KAAK,EAAC,QAAQ;IAACG,IAAI,EAAC;EAAI,CAAE,CAC9D,CACD,CAAC;AAEhB;AAEA,MAAMP,MAAM,GAAGlB,UAAU,CAAC0B,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,YAAY,EAAEtB,YAAY,CAACuB;EAC7B,CAAC;EACDL,IAAI,EAAE;IACJM,UAAU,EAAEvB,OAAO,CAAC,KAAK;EAC3B;AACF,CAAC,CAAC"}

package/lib/typescript/composites/wui-promo/index.d.ts

@@ -1,8 +0,0 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
-export interface PromoProps {
-    text: string;
-    style?: StyleProp<ViewStyle>;
-    onPress?: () => void;
-}
-export declare function Promo({ text, style, onPress }: PromoProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/composites/wui-promo/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composites/wui-promo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOrF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,2CAmBzD"}

package/src/composites/wui-promo/index.tsx

@@ -1,42 +0,0 @@
-import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { Icon } from '../../components/wui-icon';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import { FlexView } from '../../layout/wui-flex';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-
-export interface PromoProps {
-  text: string;
-  style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-}
-
-export function Promo({ text, style, onPress }: PromoProps) {
-  const Theme = useTheme();
-
-  return (
-    <Pressable style={style} onPress={onPress}>
-      <FlexView
-        alignItems="center"
-        justifyContent="center"
-        flexDirection="row"
-        padding={['xs', 'xs', 'xs', 'm']}
-        style={[styles.container, { backgroundColor: Theme['gray-glass-090'] }]}
-      >
-        <Text variant="small-600" color="bg-100">
-          {text}
-        </Text>
-        <Icon style={styles.icon} name="arrowRight" color="bg-100" size="xs" />
-      </FlexView>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: BorderRadius.full
-  },
-  icon: {
-    marginLeft: Spacing['2xs']
-  }
-});