react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/esm/components/HeadersSection.js

@@ -1,95 +1,54 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from '../i18n';
-import { View, Pressable, Text } from 'react-native';
-import CopyButton from './CopyButton';
-import TouchableScale from './TouchableScale';
-import { copyToClipboard } from '../helpers';
-import useAccordion from '../customHooks/useAccordion';
-import { HeadersIcon, ChevronIcon, CopyIcon } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
-    const [expanded, setExpanded] = useState(false);
-    const isLong = value.length > 35;
-    return (<View style={[styles.htRow, !isLast && styles.htRowBorder]}>
-      <View style={styles.htKeyCell}>
-        <Text style={styles.htKey} numberOfLines={2}>
-          {headerKey}
-        </Text>
-      </View>
-      <View style={styles.htCellDivider}/>
-      <Pressable style={styles.htValueCell} onPress={() => isLong && setExpanded(v => !v)} hitSlop={8}>
-        <Text style={styles.htValue} selectable numberOfLines={expanded ? undefined : 3}>
-          {value}
-        </Text>
-        {isLong && (<View style={[styles.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
-            <Text style={styles.htExpandText}>
-              {expanded ? 'less' : 'more'}
-            </Text>
-            <ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors.purple} size={10}/>
-          </View>)}
-      </Pressable>
-      <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>
-        <CopyIcon color={AppColors.grayTextWeak} size={14}/>
-      </TouchableScale>
-    </View>);
-});
-const HeadersSection = ({ title, headers, search, resetKey, }) => {
-    const { t } = useTranslation();
-    const { isOpen, toggleOpen, forceOpen, chevronStyle } = useAccordion(false);
-    useEffect(() => {
-        forceOpen(false);
-    }, [resetKey]);
-    const entries = useMemo(() => (headers ? Object.entries(headers) : []), [headers]);
-    const filtered = useMemo(() => {
-        if (!search)
-            return entries;
-        const q = search.toLowerCase();
-        return entries.filter(([k, v]) => k.toLowerCase().includes(q) || v.toLowerCase().includes(q));
-    }, [entries, search]);
-    if (entries.length === 0)
-        return null;
-    const isRequest = title.toLowerCase().includes('request') ||
-        title.toLowerCase().includes('api');
-    const accentColor = isRequest ? AppColors.offerPurple : AppColors.greenColor;
-    const accentBg = isRequest
-        ? `${AppColors.offerPurple}10`
-        : `${AppColors.greenColor}10`;
-    return (<View style={[styles.htCard, { borderLeftColor: accentColor }]}>
-      <Pressable onPress={toggleOpen} hitSlop={10}>
-        <View style={styles.htCardHeader}>
-          <View style={[styles.htIconWrap, { backgroundColor: accentBg }]}>
-            <HeadersIcon color={accentColor}/>
-          </View>
-          <Text style={styles.htTitle}>{title}</Text>
-          <View style={[
-            styles.htBadge,
-            { backgroundColor: accentBg, borderColor: accentColor },
-        ]}>
-            <Text style={[styles.htBadgeText, { color: accentColor }]}>
-              {entries.length}
-            </Text>
-          </View>
-          <View style={styles.htHeaderSpacer}/>
-          <CopyButton value={headers} label={title}/>
-          <View style={styles.htChevronBtn}>
-            <View style={chevronStyle}>
-              <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
-            </View>
-          </View>
-        </View>
-      </Pressable>
+import $,{useEffect as F,useMemo as K,useState as G}from"react";import{useTranslation as J}from"../i18n";import{View as C,Pressable as M,Text as T}from"react-native";import N from"./CopyButton";import Q from"./TouchableScale";import{copyToClipboard as U}from"../helpers";import X from"../customHooks/useAccordion";import{HeadersIcon as Y,ChevronIcon as W,CopyIcon as Z}from"./NetworkIcons";import{AppColors as H}from"../styles/AppColors";import e from"../styles";const _=$.memo(function({headerKey:V,value:b,isLast:v,index:k}){const[S,I]=G(!1),B=b.length>35;return<C style={[e.htRow,!v&&e.htRowBorder]}>
+      <C style={e.htKeyCell}>
+        <T style={e.htKey}numberOfLines={2}>
+          {V}
+        </T>
+      </C>
+      <C style={e.htCellDivider}/>
+      <M style={e.htValueCell}onPress={()=>B&&I(j=>!j)}hitSlop={8}>
+        <T style={e.htValue}selectable numberOfLines={S?void 0:3}>
+          {b}
+        </T>
+        {B&&<C style={[e.htExpandRow,{flexDirection:"row",alignItems:"center",gap:4}]}>
+            <T style={e.htExpandText}>
+              {S?"less":"more"}
+            </T>
+            <W direction={S?"up":"down"}color={H.purple}size={10}/>
+          </C>}
+      </M>
+      <Q onPress={()=>U(b,V)}hitSlop={8}style={e.htCopyBtn}>
+        <Z color={H.grayTextWeak}size={14}/>
+      </Q>
+    </C>}),ee=({title:L,headers:V,search:b,resetKey:v})=>{const{t:k}=J(),{isOpen:S,toggleOpen:I,forceOpen:B,chevronStyle:j}=X(!1);F(()=>{B(!1)},[v]);const P=K(()=>V?Object.entries(V):[],[V]),q=K(()=>{if(!b)return P;const R=b.toLowerCase();return P.filter(([z,O])=>z.toLowerCase().includes(R)||O.toLowerCase().includes(R))},[P,b]);if(P.length===0)return null;const A=L.toLowerCase().includes("request")||L.toLowerCase().includes("api"),E=A?H.offerPurple:H.greenColor,D=A?`${H.offerPurple}10`:`${H.greenColor}10`;return<C style={[e.htCard,{borderLeftColor:E}]}>
+      <M onPress={I}hitSlop={10}>
+        <C style={e.htCardHeader}>
+          <C style={[e.htIconWrap,{backgroundColor:D}]}>
+            <Y color={E}/>
+          </C>
+          <T style={e.htTitle}>{L}</T>
+          <C style={[e.htBadge,{backgroundColor:D,borderColor:E}]}>
+            <T style={[e.htBadgeText,{color:E}]}>
+              {P.length}
+            </T>
+          </C>
+          <C style={e.htHeaderSpacer}/>
+          <N value={V}label={L}/>
+          <C style={e.htChevronBtn}>
+            <C style={j}>
+              <W color={H.grayTextStrong}size={14}/>
+            </C>
+          </C>
+        </C>
+      </M>
 
-      {isOpen && (<View>
-          <View style={styles.htColHeadRow}>
-            <Text style={[styles.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</Text>
-            <Text style={[styles.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</Text>
-          </View>
+      {S&&<C>
+          <C style={e.htColHeadRow}>
+            <T style={[e.htColHead,{width:"30%"}]}>{k("network.jsonViewer.key")}</T>
+            <T style={[e.htColHead,{flex:1}]}>{k("network.jsonViewer.value")}</T>
+          </C>
 
-          {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
-              <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
-            </View>)}
-        </View>)}
-    </View>);
-};
-export default HeadersSection;
+          {q.length>0?q.map(([R,z],O)=><_ key={R}headerKey={R}value={z}isLast={O===q.length-1}index={O}/>):<C style={e.htEmpty}>
+              <T style={e.htEmptyText}>{k("network.noMatchingHeaders")}</T>
+            </C>}
+        </C>}
+    </C>};export default ee;

package/dist/esm/components/HighlightText.js

@@ -1,53 +1,17 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { escapeRegex, handleOpenExternalLink } from '../helpers';
-const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
-    if (!text || (text.length > 20000 && !search && !detectLinks)) {
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </Text>);
-    }
-    const URL_REGEX = /(https?:\/\/[^\s]+)/g;
-    const renderNormalOrHighlighted = (subText, keyPrefix) => {
-        if (!search) {
-            return <Text key={keyPrefix}>{subText}</Text>;
-        }
-        const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
-        const parts = subText.split(regex);
-        return (<Text key={keyPrefix}>
-        {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
-              {part}
-            </Text>) : (<Text key={i}>{part}</Text>))}
-      </Text>);
-    };
-    if (detectLinks && text && text.length < 20000) {
-        const parts = text.split(URL_REGEX);
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {parts.map((part, i) => {
-                if (part.match(URL_REGEX)) {
-                    return (<Text key={`link-${i}`} style={{
-                            color: '#007AFF',
-                            textDecorationLine: 'underline',
-                        }} onPress={() => {
-                            handleOpenExternalLink(part);
-                        }}>
-                {part}
-              </Text>);
-                }
-                return renderNormalOrHighlighted(part, `text-${i}`);
-            })}
-      </Text>);
-    }
-    if (!search)
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </Text>);
-    const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
-    const parts = text.split(regex);
-    return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-      {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
-            {part}
-          </Text>) : (<Text key={i}>{part}</Text>))}
-    </Text>);
-});
-export default HighlightText;
+import D from"react";import{Text as T}from"react-native";import{escapeRegex as H,handleOpenExternalLink as G}from"../helpers";import{AppColors as N}from"../styles/AppColors";const U=D.memo(function({text:f,search:k,style:c,highlightStyle:C,detectLinks:E,numberOfLines:L,...w}){if(!f||f.length>2e4&&!k&&!E)return<T style={c}numberOfLines={L}{...w}>
+        {f}
+      </T>;const d=/(https?:\/\/[^\s]+)/g,O=(y,u)=>{if(!k)return<T key={u}>{y}</T>;const R=new RegExp(`(${H(k)})`,"gi"),B=y.split(R);return<T key={u}>
+        {B.map((a,$)=>a.toLowerCase()===k.toLowerCase()?<T key={$}style={C}>
+              {a}
+            </T>:<T key={$}>{a}</T>)}
+      </T>};if(E&&f&&f.length<2e4){const y=f.split(d);return<T style={c}numberOfLines={L}{...w}>
+        {y.map((u,R)=>u.match(d)?<T key={`link-${R}`}style={{color:N.skyBlue,textDecorationLine:"underline"}}onPress={()=>{G(u)}}>
+                {u}
+              </T>:O(u,`text-${R}`))}
+      </T>}if(!k)return<T style={c}numberOfLines={L}{...w}>
+        {f}
+      </T>;const h=new RegExp(`(${H(k)})`,"gi"),A=f.split(h);return<T style={c}numberOfLines={L}{...w}>
+      {A.map((y,u)=>y.toLowerCase()===k.toLowerCase()?<T key={u}style={C}>
+            {y}
+          </T>:<T key={u}>{y}</T>)}
+    </T>});export default U;

package/dist/esm/components/Inspector/AboutModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AboutModalProps {
+    onClose?: () => void;
+}
+export declare const AboutModal: React.FC<AboutModalProps>;
+export default AboutModal;

package/dist/esm/components/Inspector/AboutModal.js

@@ -0,0 +1,243 @@
+import"react";import{Platform as z,Linking as B,ScrollView as H,StyleSheet as A,Text as C,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import I from"../TouchableScale";import{useInspector as W}from"./InspectorContext";import{LIB_VERSION as F}from"../../constants/version";import{getAppName as L,getBundleIdentifier as $,getAppVersionAndBuild as _,copyToClipboard as v,showToast as P}from"../../helpers";import{PackageIcon as N,GitHubIcon as O,NpmIcon as E,BoltIcon as D,StarIcon as M,BookOpenIcon as U,BugIcon as G,TagIcon as Q,WifiIcon as Z,TerminalIcon as J,AnalyticsIcon as K,DatabaseIcon as X,CameraIcon as Y,CrashIcon as Te,ExternalLinkIcon as S,CopyIcon as Ce}from"../NetworkIcons";export const AboutModal=({onClose:Ve})=>{const{updateAvailable:k,latestNpmVersion:R}=W();return<T style={e.container}>
+      <H style={e.scrollView}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!1}>
+        
+        <T style={e.heroCard}>
+          <T style={e.heroHeaderRow}>
+            <T style={e.heroBrandRow}>
+              <T style={e.heroIconBox}>
+                <N color={t.brandPurple}size={24}/>
+              </T>
+              <T style={{flex:1}}>
+                <T style={e.heroTitleRow}>
+                  <C style={e.heroTitle}>In-App Inspector</C>
+                  <T style={e.versionBadge}>
+                    <C style={e.versionBadgeText}>v{F}</C>
+                  </T>
+                  {k?<T style={e.updateBadge}>
+                      <C style={e.updateBadgeText}>
+                        v{R} Available
+                      </C>
+                      <D size={9}color={t.amber600}/>
+                    </T>:<T style={e.upToDateBadge}>
+                      <C style={e.upToDateBadgeText}>Up to date</C>
+                    </T>}
+                </T>
+                <C style={e.heroPackageName}>
+                  react-native-inapp-inspector
+                </C>
+              </T>
+            </T>
+          </T>
+
+          <C style={e.heroDescription}>
+            The all-in-one on-device debugging, logging, and QA companion for
+            React Native & Expo applications. Designed for developers, QA
+            testers, and product teams.
+          </C>
+
+          {k&&<I onPress={()=>{v("npm install react-native-inapp-inspector@latest","Install Command"),P("Copied npm upgrade command!")}}style={e.upgradeBtn}>
+              <D size={12}color={t.white}/>
+              <C style={e.upgradeBtnText}>
+                Copy Upgrade Command (v{R})
+              </C>
+            </I>}
+        </T>
+
+        
+        <T style={e.sectionCard}>
+          <C style={e.sectionHeader}>APP INFORMATION</C>
+
+          <T style={{gap:8}}>
+            <T style={e.row}>
+              <C style={e.rowLabel}>App Name</C>
+              <C style={e.rowValueBold}>{L()}</C>
+            </T>
+
+            <T style={e.row}>
+              <C style={e.rowLabel}>Package Identifier</C>
+              <C style={e.rowValueRegular}>{$()}</C>
+            </T>
+
+            <T style={e.row}>
+              <C style={e.rowLabel}>App Version</C>
+              <C style={e.rowValueBold}>
+                {_().formatted}
+              </C>
+            </T>
+
+            <T style={e.row}>
+              <C style={e.rowLabel}>Environment</C>
+              <T style={[e.statusTag,{backgroundColor:__DEV__?`${t.amber500}20`:`${t.emerald500}20`,borderColor:__DEV__?`${t.amber500}50`:`${t.emerald500}50`}]}>
+                <C style={[e.statusTagText,{color:__DEV__?t.amber600:t.emerald600}]}>
+                  {__DEV__?"Development (Debug)":"Production (Release)"}
+                </C>
+              </T>
+            </T>
+
+            <T style={e.row}>
+              <C style={e.rowLabel}>Platform</C>
+              <C style={e.rowValueRegular}>
+                {z.OS==="ios"?"Apple iOS":"Google Android"}{" "}
+                (v{z.Version})
+              </C>
+            </T>
+          </T>
+        </T>
+
+        
+        <T style={e.sectionCard}>
+          <C style={e.sectionHeader}>WHAT IN-APP INSPECTOR DOES</C>
+
+          <T style={e.featuresList}>
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.brandPurple}15`}]}>
+                <Z color={t.brandPurple}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>Network Traffic Monitor</C>
+                <C style={e.featureDesc}>
+                  Inspect HTTP and HTTPS API requests, responses, headers, and
+                  server latency with waterfall timing charts.
+                </C>
+              </T>
+            </T>
+
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.blue500}15`}]}>
+                <J color={t.blue500}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>Console Logger</C>
+                <C style={e.featureDesc}>
+                  View real-time console logs, warnings, and errors with source
+                  file origins and formatted stack traces.
+                </C>
+              </T>
+            </T>
+
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.firebaseOrange}15`}]}>
+                <K color={t.firebaseOrange}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>Analytics Telemetry</C>
+                <C style={e.featureDesc}>
+                  Track Firebase and custom analytics events, screen views, and
+                  user properties live on the device.
+                </C>
+              </T>
+            </T>
+
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.violet600}15`}]}>
+                <X color={t.violet600}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>Redux State & Actions</C>
+                <C style={e.featureDesc}>
+                  Inspect dispatched actions, payloads, and state tree diffs
+                  without connecting desktop companion tools.
+                </C>
+              </T>
+            </T>
+
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.teal600}15`}]}>
+                <Y color={t.teal600}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>Screen & Video Capture</C>
+                <C style={e.featureDesc}>
+                  Take screenshots and record test sessions to share with QA and
+                  engineering teams instantly.
+                </C>
+              </T>
+            </T>
+
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.emerald600}15`}]}>
+                <Te color={t.emerald600}size={18}/>
+              </T>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>
+                  Crash Catcher & Diagnostics
+                </C>
+                <C style={e.featureDesc}>
+                  Protects against native crashes and provides device health
+                  metrics including RAM, battery, and storage.
+                </C>
+              </T>
+            </T>
+          </T>
+        </T>
+
+        
+        <T style={e.gridContainer}>
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector").catch(()=>{})}}style={[e.gridCard,{backgroundColor:`${t.brandPurple}0F`,borderColor:`${t.brandPurple}30`}]}>
+            <O color={t.brandPurple}size={18}/>
+            <T style={{flex:1}}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                <M color={t.amber500}size={13}/>
+                <C style={e.gridCardTitle}>GitHub</C>
+              </T>
+              <C style={e.gridCardSub}>Star & source code</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={e.gridCard}>
+            <E color={t.npmRed}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>NPM Registry</C>
+              <C style={e.gridCardSub}>Package updates</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector#readme").catch(()=>{})}}style={e.gridCard}>
+            <U color={t.brandPurple}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Documentation</C>
+              <C style={e.gridCardSub}>Integration guide</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/issues").catch(()=>{})}}style={e.gridCard}>
+            <G color={t.errorColor}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Report Issue</C>
+              <C style={e.gridCardSub}>Help & support</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/releases").catch(()=>{})}}style={e.gridCard}>
+            <Q color={t.successGreen}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Release Notes</C>
+              <C style={e.gridCardSub}>What's new</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{v("npm install react-native-inapp-inspector","NPM Command"),P("Copied package install command!")}}style={e.gridCard}>
+            <Ce color={t.brandPurple}size={16}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Copy Install</C>
+              <C style={e.gridCardSub}>npm / yarn command</C>
+            </T>
+          </I>
+        </T>
+
+        
+        <T style={e.footer}>
+          <C style={e.footerText}>
+            React Native In-App Inspector · MIT License
+          </C>
+          <C style={e.footerSubText}>
+            Zero-config on-device debugging tool
+          </C>
+        </T>
+      </H>
+    </T>};const e=A.create({container:{flex:1,backgroundColor:t.grayBackground},scrollView:{flex:1},scrollContent:{padding:14,paddingBottom:32,gap:12},heroCard:{backgroundColor:t.primaryLight,borderRadius:14,padding:16,borderWidth:1,borderColor:t.dividerColor,shadowColor:t.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.05,shadowRadius:8,elevation:2,gap:12},heroHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},heroBrandRow:{flexDirection:"row",alignItems:"center",gap:12,flex:1},heroIconBox:{width:44,height:44,borderRadius:12,backgroundColor:`${t.brandPurple}15`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${t.brandPurple}30`},heroTitleRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},heroTitle:{fontFamily:V.interBold,fontSize:17,lineHeight:22,color:t.primaryBlack,letterSpacing:-.3},versionBadge:{backgroundColor:`${t.brandPurple}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.brandPurple}30`},versionBadgeText:{fontFamily:V.interBold,fontSize:10,lineHeight:13,color:t.brandPurple},updateBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${t.amber500}20`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.amber500}50`},updateBadgeText:{fontFamily:V.interBold,fontSize:9.5,lineHeight:12,color:t.amber600},upToDateBadge:{backgroundColor:`${t.emerald500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.emerald500}35`},upToDateBadgeText:{fontFamily:V.interMedium,fontSize:9.5,lineHeight:12,color:t.emerald600},heroPackageName:{fontFamily:V.interRegular,fontSize:12,lineHeight:16,color:t.grayTextWeak,marginTop:2},heroDescription:{fontFamily:V.interRegular,fontSize:13,lineHeight:18,color:t.grayText},upgradeBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:t.brandPurple,paddingVertical:9,paddingHorizontal:12,borderRadius:8},upgradeBtnText:{fontFamily:V.interBold,fontSize:12,color:t.white},sectionCard:{backgroundColor:t.primaryLight,borderRadius:14,padding:14,borderWidth:1,borderColor:t.dividerColor,gap:10},sectionHeader:{fontFamily:V.interBold,fontSize:11,lineHeight:15,color:t.grayTextWeak,letterSpacing:.6},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:3},rowLabel:{fontFamily:V.interRegular,fontSize:12.5,lineHeight:17,color:t.grayTextWeak},rowValueBold:{fontFamily:V.interBold,fontSize:12.5,lineHeight:17,color:t.primaryBlack},rowValueRegular:{fontFamily:V.interRegular,fontSize:12.5,lineHeight:17,color:t.grayTextStrong},statusTag:{paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1},statusTagText:{fontFamily:V.interSemiBold,fontSize:10.5,lineHeight:14},featuresList:{gap:10},featureItem:{flexDirection:"row",alignItems:"flex-start",gap:12,paddingVertical:4},featureIconBox:{width:36,height:36,borderRadius:10,alignItems:"center",justifyContent:"center"},featureTextBox:{flex:1,gap:2},featureTitle:{fontFamily:V.interBold,fontSize:13,lineHeight:17,color:t.primaryBlack},featureDesc:{fontFamily:V.interRegular,fontSize:11.5,lineHeight:16,color:t.grayTextWeak},gridContainer:{flexDirection:"row",flexWrap:"wrap",gap:8},gridCard:{width:"48.5%",flexGrow:1,backgroundColor:t.primaryLight,borderRadius:10,padding:12,flexDirection:"row",alignItems:"center",gap:9,borderWidth:1,borderColor:t.dividerColor},gridCardTitle:{fontFamily:V.interBold,fontSize:12,lineHeight:16,color:t.primaryBlack},gridCardSub:{fontFamily:V.interRegular,fontSize:10,lineHeight:13,color:t.grayTextWeak},footer:{alignItems:"center",justifyContent:"center",paddingVertical:14,gap:3},footerText:{fontFamily:V.interMedium,fontSize:11,lineHeight:15,color:t.grayTextWeak},footerSubText:{fontFamily:V.interRegular,fontSize:10,lineHeight:14,color:t.slate400}});export default AboutModal;