react-native-inapp-inspector 2.3.9 → 2.3.11

package/dist/commonjs/components/Inspector/NetworkFilterModal.js

@@ -0,0 +1,648 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NetworkFilterModal = exports.isNetworkFiltersDefault = exports.DEFAULT_NETWORK_FILTERS = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const i18n_1 = require("../../i18n");
+const constants_1 = require("../../constants");
+const NetworkIcons_1 = require("../NetworkIcons");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+exports.DEFAULT_NETWORK_FILTERS = {
+    statusCodes: new Set(['all']),
+    methods: new Set(['all']),
+    latency: 'all',
+    protocol: 'all',
+    sortBy: 'time_desc',
+};
+const isNetworkFiltersDefault = (f) => (f.statusCodes.has('all') || f.statusCodes.size === 0) &&
+    (f.methods.has('all') || f.methods.size === 0) &&
+    f.latency === 'all' &&
+    f.protocol === 'all' &&
+    f.sortBy === 'time_desc';
+exports.isNetworkFiltersDefault = isNetworkFiltersDefault;
+const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery = '', }) => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const { logs } = (0, InspectorContext_1.useInspector)();
+    const [draft, setDraft] = (0, react_1.useState)(() => ({
+        ...filters,
+        statusCodes: new Set(filters.statusCodes),
+        methods: new Set(filters.methods),
+    }));
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setDraft({
+                ...filters,
+                statusCodes: new Set(filters.statusCodes),
+                methods: new Set(filters.methods),
+            });
+        }
+    }, [visible, filters]);
+    const counts = (0, react_1.useMemo)(() => {
+        const statusMap = {
+            all: logs.length,
+            '2xx': 0,
+            '3xx': 0,
+            '4xx': 0,
+            '5xx': 0,
+            failed: 0,
+        };
+        const methodMap = { all: logs.length };
+        let fastCount = 0;
+        let normalCount = 0;
+        let slowCount = 0;
+        let httpsCount = 0;
+        let httpCount = 0;
+        for (const log of logs) {
+            const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
+            if (log.status === 0 || log.status == null) {
+                statusMap.failed = (statusMap.failed || 0) + 1;
+            }
+            else if (!isNaN(s)) {
+                if (s >= 200 && s < 300)
+                    statusMap['2xx'] = (statusMap['2xx'] || 0) + 1;
+                else if (s >= 300 && s < 400)
+                    statusMap['3xx'] = (statusMap['3xx'] || 0) + 1;
+                else if (s >= 400 && s < 500)
+                    statusMap['4xx'] = (statusMap['4xx'] || 0) + 1;
+                else if (s >= 500)
+                    statusMap['5xx'] = (statusMap['5xx'] || 0) + 1;
+            }
+            const m = (log.method || 'GET').toUpperCase();
+            methodMap[m] = (methodMap[m] || 0) + 1;
+            const dur = log.duration || 0;
+            if (dur < 200)
+                fastCount++;
+            else if (dur <= 500)
+                normalCount++;
+            else
+                slowCount++;
+            if ((log.url || '').toLowerCase().startsWith('https'))
+                httpsCount++;
+            else
+                httpCount++;
+        }
+        return {
+            statusMap,
+            methodMap,
+            fastCount,
+            normalCount,
+            slowCount,
+            httpsCount,
+            httpCount,
+        };
+    }, [logs]);
+    const previewMatchCount = (0, react_1.useMemo)(() => {
+        return logs.filter(log => {
+            if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0) {
+                const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
+                let matches = false;
+                if (draft.statusCodes.has('failed') && (log.status === 0 || log.status == null))
+                    matches = true;
+                if (draft.statusCodes.has('2xx') && !isNaN(s) && s >= 200 && s < 300)
+                    matches = true;
+                if (draft.statusCodes.has('3xx') && !isNaN(s) && s >= 300 && s < 400)
+                    matches = true;
+                if (draft.statusCodes.has('4xx') && !isNaN(s) && s >= 400 && s < 500)
+                    matches = true;
+                if (draft.statusCodes.has('5xx') && !isNaN(s) && s >= 500)
+                    matches = true;
+                if (!matches)
+                    return false;
+            }
+            if (!draft.methods.has('all') && draft.methods.size > 0) {
+                const m = (log.method || 'GET').toUpperCase();
+                if (!draft.methods.has(m))
+                    return false;
+            }
+            const dur = log.duration || 0;
+            if (draft.latency === 'fast' && dur >= 200)
+                return false;
+            if (draft.latency === 'normal' && (dur < 200 || dur > 500))
+                return false;
+            if (draft.latency === 'slow' && dur <= 500)
+                return false;
+            const isHttps = (log.url || '').toLowerCase().startsWith('https');
+            if (draft.protocol === 'https' && !isHttps)
+                return false;
+            if (draft.protocol === 'http' && isHttps)
+                return false;
+            if (searchQuery.trim().length > 0) {
+                const q = searchQuery.toLowerCase();
+                const u = (log.url || '').toLowerCase();
+                if (!u.includes(q))
+                    return false;
+            }
+            return true;
+        }).length;
+    }, [logs, draft, searchQuery]);
+    const toggleStatus = (key) => {
+        setDraft(prev => {
+            const next = new Set(prev.statusCodes);
+            if (key === 'all') {
+                return { ...prev, statusCodes: new Set(['all']) };
+            }
+            next.delete('all');
+            if (next.has(key)) {
+                next.delete(key);
+                if (next.size === 0)
+                    next.add('all');
+            }
+            else {
+                next.add(key);
+            }
+            return { ...prev, statusCodes: next };
+        });
+    };
+    const toggleMethod = (key) => {
+        setDraft(prev => {
+            const next = new Set(prev.methods);
+            if (key === 'all') {
+                return { ...prev, methods: new Set(['all']) };
+            }
+            next.delete('all');
+            if (next.has(key)) {
+                next.delete(key);
+                if (next.size === 0)
+                    next.add('all');
+            }
+            else {
+                next.add(key);
+            }
+            return { ...prev, methods: next };
+        });
+    };
+    const handleReset = () => {
+        setDraft({
+            statusCodes: new Set(['all']),
+            methods: new Set(['all']),
+            latency: 'all',
+            protocol: 'all',
+            sortBy: 'time_desc',
+        });
+    };
+    const handleApply = () => {
+        onApply(draft);
+        onClose();
+    };
+    const activeFiltersCount = (0, react_1.useMemo)(() => {
+        let count = 0;
+        if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0)
+            count += draft.statusCodes.size;
+        if (!draft.methods.has('all') && draft.methods.size > 0)
+            count += draft.methods.size;
+        if (draft.latency !== 'all')
+            count++;
+        if (draft.protocol !== 'all')
+            count++;
+        if (draft.sortBy !== 'time_desc')
+            count++;
+        return count;
+    }, [draft]);
+    return (<react_native_1.Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <react_native_1.Pressable style={styles.overlay} onPress={onClose}>
+        <react_native_1.Pressable style={styles.modalCard} onPress={e => e.stopPropagation()}>
+          
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={styles.headerLeft}>
+              <react_native_1.View style={styles.iconCircle}>
+                <NetworkIcons_1.FilterIcon size={16} color={AppColors_1.AppColors.purple}/>
+              </react_native_1.View>
+              <react_native_1.View>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.Text style={styles.title}>Network Filters</react_native_1.Text>
+                  {activeFiltersCount > 0 && (<react_native_1.View style={styles.activeBadge}>
+                      <react_native_1.Text style={styles.activeBadgeText}>{activeFiltersCount} active</react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+                <react_native_1.Text style={styles.subtitle}>Filter requests by status, method & speed</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+            <react_native_1.TouchableOpacity onPress={onClose} hitSlop={10} style={styles.closeBtn}>
+              <NetworkIcons_1.CloseWhite size={14} color={AppColors_1.AppColors.grayText}/>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          <react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+            
+            <react_native_1.View style={styles.section}>
+              <react_native_1.Text style={styles.sectionTitle}>HTTP STATUS CODE</react_native_1.Text>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'all', label: 'All Statuses', color: AppColors_1.AppColors.purple, icon: NetworkIcons_1.LayersIcon, count: counts.statusMap.all },
+            { key: '2xx', label: '2xx Success', color: AppColors_1.AppColors.greenColor, icon: NetworkIcons_1.CircleCheckIcon, count: counts.statusMap['2xx'] || 0 },
+            { key: '3xx', label: '3xx Redirect', color: AppColors_1.AppColors.warningIconGold, icon: NetworkIcons_1.RepeatIcon, count: counts.statusMap['3xx'] || 0 },
+            { key: '4xx', label: '4xx Client Error', color: AppColors_1.AppColors.darkOrange, icon: NetworkIcons_1.CircleAlertIcon, count: counts.statusMap['4xx'] || 0 },
+            { key: '5xx', label: '5xx Server Error', color: AppColors_1.AppColors.errorColor, icon: NetworkIcons_1.CircleXIcon, count: counts.statusMap['5xx'] || 0 },
+            { key: 'failed', label: 'Network Failed / 0', color: AppColors_1.AppColors.errorColor, icon: NetworkIcons_1.ShieldAlertIcon, count: counts.statusMap.failed || 0 },
+        ].map(item => {
+            const isSelected = draft.statusCodes.has(item.key);
+            const IconComp = item.icon;
+            return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => toggleStatus(item.key)} style={[
+                    styles.chip,
+                    isSelected && {
+                        backgroundColor: `${item.color}15`,
+                        borderColor: item.color,
+                    },
+                ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors_1.AppColors.grayTextWeak}/>
+                      <react_native_1.Text style={[
+                    styles.chipLabel,
+                    isSelected && { color: item.color, fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {item.label}
+                      </react_native_1.Text>
+                      <react_native_1.View style={[
+                    styles.countPill,
+                    isSelected && { backgroundColor: `${item.color}25` },
+                ]}>
+                        <react_native_1.Text style={[
+                    styles.countPillText,
+                    isSelected && { color: item.color },
+                ]}>
+                          {item.count}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.TouchableOpacity>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.section}>
+              <react_native_1.Text style={styles.sectionTitle}>HTTP METHOD</react_native_1.Text>
+              <react_native_1.View style={styles.chipsWrap}>
+                <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={() => toggleMethod('all')} style={[
+            styles.chip,
+            draft.methods.has('all') && {
+                backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                borderColor: AppColors_1.AppColors.purple,
+            },
+        ]}>
+                  <NetworkIcons_1.LayersIcon size={12} color={draft.methods.has('all') ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak}/>
+                  <react_native_1.Text style={[
+            styles.chipLabel,
+            draft.methods.has('all') && { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
+        ]}>
+                    All Methods
+                  </react_native_1.Text>
+                  <react_native_1.View style={[styles.countPill, draft.methods.has('all') && { backgroundColor: `${AppColors_1.AppColors.purple}25` }]}>
+                    <react_native_1.Text style={[styles.countPillText, draft.methods.has('all') && { color: AppColors_1.AppColors.purple }]}>
+                      {counts.methodMap.all}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.TouchableOpacity>
+
+                {['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'QUERY', 'OPTIONS', 'HEAD'].map(m => {
+            const isSelected = draft.methods.has(m);
+            const mColor = constants_1.METHOD_COLORS[m] || AppColors_1.AppColors.grayText;
+            const count = counts.methodMap[m] || 0;
+            return (<react_native_1.TouchableOpacity key={m} activeOpacity={0.7} onPress={() => toggleMethod(m)} style={[
+                    styles.chip,
+                    isSelected && {
+                        backgroundColor: `${mColor}18`,
+                        borderColor: mColor,
+                    },
+                ]}>
+                      <react_native_1.View style={[styles.methodDot, { backgroundColor: mColor }]}/>
+                      <react_native_1.Text style={[
+                    styles.chipLabel,
+                    isSelected && { color: mColor, fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {m}
+                      </react_native_1.Text>
+                      <react_native_1.View style={[
+                    styles.countPill,
+                    isSelected && { backgroundColor: `${mColor}25` },
+                ]}>
+                        <react_native_1.Text style={[
+                    styles.countPillText,
+                    isSelected && { color: mColor },
+                ]}>
+                          {count}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.TouchableOpacity>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.section}>
+              <react_native_1.Text style={styles.sectionTitle}>LATENCY & SPEED</react_native_1.Text>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'all', label: 'All Speeds', color: AppColors_1.AppColors.purple },
+            { key: 'fast', label: '⚡ Fast (<200ms)', color: AppColors_1.AppColors.greenColor, count: counts.fastCount },
+            { key: 'normal', label: '⏱️ Normal (200-500ms)', color: AppColors_1.AppColors.skyBlue, count: counts.normalCount },
+            { key: 'slow', label: '⚠️ Slow (>500ms)', color: AppColors_1.AppColors.errorColor, count: counts.slowCount },
+        ].map(item => {
+            const isSelected = draft.latency === item.key;
+            return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
+                    styles.chip,
+                    isSelected && {
+                        backgroundColor: `${item.color}15`,
+                        borderColor: item.color,
+                    },
+                ]}>
+                      <react_native_1.Text style={[
+                    styles.chipLabel,
+                    isSelected && { color: item.color, fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {item.label}
+                      </react_native_1.Text>
+                      {item.count != null && (<react_native_1.View style={[styles.countPill, isSelected && { backgroundColor: `${item.color}25` }]}>
+                          <react_native_1.Text style={[styles.countPillText, isSelected && { color: item.color }]}>
+                            {item.count}
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.TouchableOpacity>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.section}>
+              <react_native_1.Text style={styles.sectionTitle}>PROTOCOL</react_native_1.Text>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'all', label: 'All Protocols', color: AppColors_1.AppColors.purple },
+            { key: 'https', label: '🔒 HTTPS Secure', color: AppColors_1.AppColors.mintGreenText, count: counts.httpsCount },
+            { key: 'http', label: '🔓 HTTP Insecure', color: AppColors_1.AppColors.amber700, count: counts.httpCount },
+        ].map(item => {
+            const isSelected = draft.protocol === item.key;
+            return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
+                    styles.chip,
+                    isSelected && {
+                        backgroundColor: `${item.color}15`,
+                        borderColor: item.color,
+                    },
+                ]}>
+                      <react_native_1.Text style={[
+                    styles.chipLabel,
+                    isSelected && { color: item.color, fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {item.label}
+                      </react_native_1.Text>
+                      {item.count != null && (<react_native_1.View style={[styles.countPill, isSelected && { backgroundColor: `${item.color}25` }]}>
+                          <react_native_1.Text style={[styles.countPillText, isSelected && { color: item.color }]}>
+                            {item.count}
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.TouchableOpacity>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.section}>
+              <react_native_1.Text style={styles.sectionTitle}>SORT BY</react_native_1.Text>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'time_desc', label: '⏱️ Newest First (Default)' },
+            { key: 'time_asc', label: '⌛ Oldest First' },
+            { key: 'duration_desc', label: '🐢 Slowest Response' },
+            { key: 'duration_asc', label: '🚀 Fastest Response' },
+            { key: 'size_desc', label: '📦 Largest Response Size' },
+        ].map(item => {
+            const isSelected = draft.sortBy === item.key;
+            return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
+                    styles.chip,
+                    isSelected && {
+                        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                        borderColor: AppColors_1.AppColors.purple,
+                    },
+                ]}>
+                      <react_native_1.Text style={[
+                    styles.chipLabel,
+                    isSelected && { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {item.label}
+                      </react_native_1.Text>
+                    </react_native_1.TouchableOpacity>);
+        })}
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+
+          
+          <react_native_1.View style={styles.footer}>
+            <TouchableScale_1.default onPress={handleReset} style={styles.resetBtn}>
+              <react_native_1.Text style={styles.resetBtnText}>Reset All</react_native_1.Text>
+            </TouchableScale_1.default>
+
+            <TouchableScale_1.default onPress={handleApply} style={styles.applyBtn}>
+              <react_native_1.Text style={styles.applyBtnText}>
+                Apply ({previewMatchCount} Request{previewMatchCount === 1 ? '' : 's'})
+              </react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.Pressable>
+      </react_native_1.Pressable>
+    </react_native_1.Modal>);
+};
+exports.NetworkFilterModal = NetworkFilterModal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.55)',
+        justifyContent: 'flex-end',
+    },
+    modalCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        maxHeight: '85%',
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 10,
+        elevation: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flex: 1,
+    },
+    iconCircle: {
+        width: 34,
+        height: 34,
+        borderRadius: 10,
+        backgroundColor: `${AppColors_1.AppColors.purple}15`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 16,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    subtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 1,
+    },
+    activeBadge: {
+        backgroundColor: `${AppColors_1.AppColors.purple}20`,
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}40`,
+    },
+    activeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    closeBtn: {
+        padding: 6,
+    },
+    scrollArea: {
+        maxHeight: 460,
+    },
+    scrollContent: {
+        padding: 16,
+        gap: 16,
+    },
+    section: {
+        gap: 8,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.8,
+    },
+    chipsWrap: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    chipLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    methodDot: {
+        width: 6.5,
+        height: 6.5,
+        borderRadius: 3.5,
+    },
+    countPill: {
+        backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}50`,
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 6,
+    },
+    countPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.grayBorderSecondary,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+    },
+    resetBtn: {
+        flex: 1,
+        paddingVertical: 11,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    resetBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    applyBtn: {
+        flex: 2,
+        paddingVertical: 11,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.purple,
+        shadowColor: AppColors_1.AppColors.purple,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    applyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.white,
+    },
+});
+exports.default = exports.NetworkFilterModal;