@retray-dev/ui-kit 2.7.0 → 3.0.0

package/src/components/Select/Select.tsx

@@ -9,6 +9,7 @@ import { s, vs, ms } from '../../utils/scaling'
 const isIOS = Platform.OS === 'ios'
 const isAndroid = Platform.OS === 'android'
 const isWeb = Platform.OS === 'web'
+const nativeDriver = Platform.OS !== 'web'
 
 export interface SelectOption {
   label: string
@@ -47,11 +48,11 @@ export function Select({
 
   const handlePressIn = () => {
     if (disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   const handleOpen = () => {
@@ -79,7 +80,7 @@ export function Select({
 
   return (
     <View style={[styles.container, style]}>
-      {label ? <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text> : null}
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
 
       {/* Trigger button — shown on iOS and Android only */}
       {!isWeb ? (
@@ -220,7 +221,7 @@ export function Select({
       ) : null}
 
       {error ? (
-        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
     </View>
   )
@@ -231,31 +232,28 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontSize: ms(15),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
   },
   trigger: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
   },
   triggerText: {
-    fontSize: ms(17),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(15),
     flex: 1,
   },
   chevron: {
     marginLeft: s(8),
   },
   helperText: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
   },
   iosBackdrop: {
@@ -276,15 +274,15 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(17),
-    fontWeight: '600',
   },
   iosDoneBtn: {
     padding: s(4),
   },
   iosDoneBtnText: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(17),
-    fontWeight: '600',
   },
   androidHiddenPicker: {
     height: 0,
@@ -292,10 +290,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   webPicker: {
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    fontSize: ms(17),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    fontSize: ms(15),
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -72,10 +72,10 @@ export function Sheet({
         {title || description ? (
           <View style={styles.header}>
             {title ? (
-              <Text style={[styles.title, { color: colors.cardForeground }]}>{title}</Text>
+              <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>{title}</Text>
             ) : null}
             {description ? (
-              <Text style={[styles.description, { color: colors.mutedForeground }]}>
+              <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
                 {description}
               </Text>
             ) : null}
@@ -106,10 +106,11 @@ const styles = StyleSheet.create({
     marginBottom: vs(16),
   },
   title: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(18),
-    fontWeight: '600',
   },
   description: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Slider/Slider.tsx

@@ -91,16 +91,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(15),
-    fontWeight: '500',
   },
   valueText: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(14),
-    fontWeight: '500',
   },
   slider: {
     width: '100%',
-    height: vs(40),
+    height: vs(60),
   },
   disabled: {
     opacity: 0.45,

package/src/components/Spinner/Spinner.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
-import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import { ActivityIndicator, ActivityIndicatorProps, View, Text, StyleSheet } from 'react-native'
 import { useTheme } from '../../theme'
+import { vs, ms, mvs } from '../../utils/scaling'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg'
 
 export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
   size?: SpinnerSize
   color?: string
+  label?: string
 }
 
 const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
@@ -15,7 +17,39 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
   lg: 'large',
 }
 
-export function Spinner({ size = 'md', color, ...props }: SpinnerProps) {
+const labelFontSize: Record<SpinnerSize, number> = {
+  sm: ms(11),
+  md: ms(13),
+  lg: ms(14),
+}
+
+export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
+
+  if (label) {
+    return (
+      <View style={styles.wrapper}>
+        <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
+        <Text
+          style={[styles.label, { color: colors.mutedForeground, fontSize: labelFontSize[size] }]}
+          allowFontScaling={true}
+        >
+          {label}
+        </Text>
+      </View>
+    )
+  }
+
   return <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
 }
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    gap: vs(6),
+  },
+  label: {
+    fontFamily: 'Poppins-Regular',
+    lineHeight: mvs(18),
+  },
+})

package/src/components/Switch/Switch.tsx

@@ -6,10 +6,10 @@ import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs } from '../../utils/scaling'
 
-const TRACK_WIDTH = s(60)
-const TRACK_HEIGHT = vs(36)
-const THUMB_SIZE = s(28)
-const THUMB_OFFSET = s(4)
+const TRACK_WIDTH = s(52)
+const TRACK_HEIGHT = s(30)
+const THUMB_SIZE = s(24)
+const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
 export interface SwitchProps {

package/src/components/Tabs/Tabs.tsx

@@ -9,7 +9,7 @@ import { s, vs, ms } from '../../utils/scaling'
 export interface TabItem {
   label: string
   value: string
-  icon?: React.ReactNode
+  icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
 export interface TabsProps {
@@ -66,9 +66,7 @@ function TabTrigger({
       <Animated.View style={{ transform: [{ scale }] }}>
         <View style={styles.triggerInner}>
           {tab.icon ? (
-            <View style={styles.triggerIcon}>
-              {(typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode}
-            </View>
+            (typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode
           ) : null}
           <Text
             style={[
@@ -76,6 +74,7 @@ function TabTrigger({
               { color: isActive ? colors.foreground : colors.mutedForeground },
               isActive && styles.activeTriggerLabel,
             ]}
+            allowFontScaling={true}
           >
             {tab.label}
           </Text>
@@ -190,9 +189,9 @@ const styles = StyleSheet.create({
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: vs(12),
-    paddingHorizontal: s(16),
-    borderRadius: ms(8),
+    paddingVertical: vs(7),
+    paddingHorizontal: s(10),
+    borderRadius: ms(6),
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
@@ -201,18 +200,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: s(8),
-  },
-  triggerIcon: {
-    marginRight: s(6),
-    alignItems: 'center',
-    justifyContent: 'center',
+    gap: s(4),
   },
   triggerLabel: {
-    fontSize: ms(15),
-    fontWeight: '400',
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(13),
   },
   activeTriggerLabel: {
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
   },
 })

package/src/components/Text/Text.tsx

@@ -11,12 +11,12 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: ms(40), fontWeight: '700', lineHeight: mvs(52) },
-  h2: { fontSize: ms(28), fontWeight: '700', lineHeight: mvs(36) },
-  h3: { fontSize: ms(22), fontWeight: '600', lineHeight: mvs(30) },
-  body: { fontSize: ms(17), fontWeight: '400', lineHeight: mvs(26) },
-  caption: { fontSize: ms(13), fontWeight: '400', lineHeight: mvs(20) },
-  label: { fontSize: ms(15), fontWeight: '500', lineHeight: mvs(22) },
+  h1:      { fontFamily: 'Poppins-Bold',     fontSize: ms(40), lineHeight: mvs(52) },
+  h2:      { fontFamily: 'Poppins-Bold',     fontSize: ms(28), lineHeight: mvs(36) },
+  h3:      { fontFamily: 'Poppins-SemiBold', fontSize: ms(22), lineHeight: mvs(30) },
+  body:    { fontFamily: 'Poppins-Regular',  fontSize: ms(17), lineHeight: mvs(26) },
+  caption: { fontFamily: 'Poppins-Regular',  fontSize: ms(13), lineHeight: mvs(20) },
+  label:   { fontFamily: 'Poppins-Medium',   fontSize: ms(15), lineHeight: mvs(22) },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {

package/src/components/Textarea/Textarea.tsx

@@ -83,17 +83,19 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontSize: ms(15),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
   },
   input: {
-    borderWidth: 1.5,
+    fontFamily: 'Poppins-Regular',
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    fontSize: ms(17),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    fontSize: ms(15),
   },
   helperText: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
   },
 })

package/src/components/Toast/Toast.tsx

@@ -96,25 +96,29 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
     transform: [{ translateY: translateY.value }, { translateX: translateX.value }],
   }))
 
+  const variant = item.variant ?? 'default'
+
   const bgColor = {
     default: colors.foreground,
-    destructive: colors.destructive,
-    success: colors.success,
-  }[item.variant ?? 'default']
+    destructive: colors.destructiveBorder,
+    success: colors.successBorder,
+  }[variant]
 
   const textColor = {
     default: colors.background,
-    destructive: colors.destructiveForeground,
-    success: colors.successForeground,
-  }[item.variant ?? 'default']
+    destructive: '#991b1b',
+    success: '#166534',
+  }[variant]
+
+  const borderColor = textColor
 
   const defaultIcon =
-    item.variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={22} color={textColor} />
-    ) : item.variant === 'destructive' ? (
-      <MaterialIcons name="error-outline" size={24} color={textColor} />
+    variant === 'success' ? (
+      <FontAwesome5 name="check-circle" size={18} color={textColor} />
+    ) : variant === 'destructive' ? (
+      <AntDesign name="exclamation-circle" size={18} color={textColor} />
     ) : (
-      <Entypo name="info-with-circle" size={22} color={textColor} />
+      <Entypo name="info-with-circle" size={18} color={textColor} />
     )
 
   const leftIcon: React.ReactNode = item.iconName
@@ -123,14 +127,14 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
 
   return (
     <GestureDetector gesture={panGesture}>
-      <Animated.View style={[styles.toast, { backgroundColor: bgColor }, animatedStyle]}>
+      <Animated.View style={[styles.toast, { backgroundColor: bgColor, borderColor }, animatedStyle]}>
         <View style={styles.leftIconContainer}>{leftIcon}</View>
         <View style={styles.toastContent}>
           {item.title ? (
-            <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
+            <Text style={[styles.toastTitle, { color: textColor }]} allowFontScaling={true}>{item.title}</Text>
           ) : null}
           {item.description ? (
-            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}>
+            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]} allowFontScaling={true}>
               {item.description}
             </Text>
           ) : null}
@@ -201,30 +205,32 @@ const styles = StyleSheet.create({
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: ms(16),
-    paddingHorizontal: s(20),
-    paddingVertical: vs(14),
+    borderRadius: ms(12),
+    borderWidth: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(12),
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.10,
     shadowRadius: 8,
-    elevation: 6,
+    elevation: 5,
   },
   toastContent: {
     flex: 1,
     gap: vs(4),
   },
   leftIconContainer: {
-    width: s(40),
+    width: s(28),
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: s(8),
+    marginRight: s(10),
   },
   toastTitle: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(15),
-    fontWeight: '600',
   },
   toastDescription: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
   },
   dismissButton: {

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,7 @@
 import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing, Platform } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import { FontAwesome5 } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -75,11 +77,11 @@ export function Toggle({
 
   const handlePressIn = () => {
     if (disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   // Keep borderWidth constant at 2 to prevent layout jumps when pressing.
@@ -146,7 +148,7 @@ export function Toggle({
         >
           <View style={styles.inner}>
             <LeftIcon />
-            {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
+            {label ? <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Animated.Text> : null}
           </View>
         </Animated.View>
       </TouchableOpacity>
@@ -168,7 +170,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(14),
-    fontWeight: '500',
   },
 })

package/src/fonts.ts

@@ -0,0 +1,30 @@
+/**
+ * Poppins font family required by @retray-dev/ui-kit components.
+ * 
+ * Consumer apps must load these fonts at app root using expo-font:
+ * 
+ * @example
+ * import { useFonts } from 'expo-font'
+ * import { PoppinsFonts } from '@retray-dev/ui-kit'
+ * 
+ * function App() {
+ *   const [fontsLoaded] = useFonts(PoppinsFonts)
+ *   if (!fontsLoaded) return null
+ *   // render app
+ * }
+ */
+export const PoppinsFonts = {
+  'Poppins-Thin':           require('./assets/fonts/Poppins-Thin.ttf'),
+  'Poppins-ExtraLight':     require('./assets/fonts/Poppins-ExtraLight.ttf'),
+  'Poppins-Light':          require('./assets/fonts/Poppins-Light.ttf'),
+  'Poppins-Regular':        require('./assets/fonts/Poppins-Regular.ttf'),
+  'Poppins-Medium':         require('./assets/fonts/Poppins-Medium.ttf'),
+  'Poppins-SemiBold':       require('./assets/fonts/Poppins-SemiBold.ttf'),
+  'Poppins-Bold':           require('./assets/fonts/Poppins-Bold.ttf'),
+  'Poppins-ExtraBold':      require('./assets/fonts/Poppins-ExtraBold.ttf'),
+  'Poppins-Black':          require('./assets/fonts/Poppins-Black.ttf'),
+  'Poppins-Italic':         require('./assets/fonts/Poppins-Italic.ttf'),
+  'Poppins-MediumItalic':   require('./assets/fonts/Poppins-MediumItalic.ttf'),
+  'Poppins-SemiBoldItalic': require('./assets/fonts/Poppins-SemiBoldItalic.ttf'),
+  'Poppins-BoldItalic':     require('./assets/fonts/Poppins-BoldItalic.ttf'),
+} as const

package/src/index.ts

@@ -5,6 +5,7 @@ export { defaultLight, defaultDark } from './theme'
 
 // Components
 export * from './components/Button'
+export * from './components/IconButton'
 export * from './components/Text'
 export * from './components/Input'
 export * from './components/Badge'

package/src/theme/colors.ts

@@ -15,32 +15,40 @@ export const defaultLight: ThemeColors = {
   accent: '#e4e4e4',
   accentForeground: '#171717',
   destructive: '#ef4444',
-  destructiveForeground: '#1a1a1a',
+  destructiveForeground: '#ffffff',
   border: '#e5e5e5',
   input: '#e5e5e5',
   ring: '#1a1a1a',
-  success: '#16a34a',
-  successForeground: '#1a1a1a',
+  success: '#1a7a45',
+  successForeground: '#ffffff',
+  destructiveTint: '#fff5f5',
+  destructiveBorder: '#fecaca',
+  successTint: '#f0fdf4',
+  successBorder: '#bbf7d0',
 }
 
 export const defaultDark: ThemeColors = {
-  background: '#171717',
+  background: '#0f0f0f',
   foreground: '#fafafa',
-  card: '#222222',
+  card: '#1c1c1c',
   cardForeground: '#fafafa',
   primary: '#fafafa',
-  primaryForeground: '#1a1a1a',
-  secondary: '#323232',
+  primaryForeground: '#0f0f0f',
+  secondary: '#272727',
   secondaryForeground: '#fafafa',
-  muted: '#323232',
-  mutedForeground: '#888888',
-  accent: '#323232',
+  muted: '#272727',
+  mutedForeground: '#9a9a9a',
+  accent: '#2e2e2e',
   accentForeground: '#fafafa',
   destructive: '#dc2626',
-  destructiveForeground: '#1a1a1a',
-  border: '#2a2a2a',
+  destructiveForeground: '#ffffff',
+  border: '#303030',
   input: '#2a2a2a',
   ring: '#fafafa',
-  success: '#22c55e',
-  successForeground: '#1a1a1a',
+  success: '#166534',
+  successForeground: '#ffffff',
+  destructiveTint: '#3b0a0a',
+  destructiveBorder: '#7f1d1d',
+  successTint: '#052e16',
+  successBorder: '#166534',
 }

package/src/theme/types.ts

@@ -18,6 +18,10 @@ export type ThemeColors = {
   ring: string
   success: string
   successForeground: string
+  destructiveTint: string
+  destructiveBorder: string
+  successTint: string
+  successBorder: string
 }
 
 // Theme overrides: consumers may supply partial or full `ThemeColors` objects

package/src/components/Alert/Alert.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
-
-export type AlertBannerVariant = 'default' | 'destructive' | 'success'
-
-export interface AlertBannerProps {
-  title?: string
-  description?: string
-  variant?: AlertBannerVariant
-  icon?: React.ReactNode
-  style?: ViewStyle
-}
-
-export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
-  const { colors } = useTheme()
-
-  const borderColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.border
-
-  const titleColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.foreground
-
-  const descColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.mutedForeground
-
-  const defaultIcon =
-    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      {icon ? (
-        <View style={styles.icon}>{icon}</View>
-      ) : (
-        <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]} allowFontScaling={true}>{defaultIcon}</Text>
-        </View>
-      )}
-      <View style={styles.content}>
-        {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
-        {description ? (
-          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{description}</Text>
-        ) : null}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderRadius: ms(8),
-    padding: s(16),
-    gap: s(12),
-  },
-  icon: {
-    marginTop: vs(2),
-  },
-  content: {
-    flex: 1,
-    gap: vs(4),
-  },
-  title: {
-    fontSize: ms(14),
-    fontWeight: '500',
-    lineHeight: mvs(20),
-  },
-  description: {
-    fontSize: ms(14),
-    lineHeight: mvs(20),
-  },
-  defaultIcon: {
-    fontSize: ms(18),
-    fontWeight: '700',
-  },
-})