react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,949 +1,288 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Modal, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { getEventCategory } from '../../helpers';
-import { FilterIcon, CloseWhite, CheckIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, MoneyIcon, ClockIcon, HourglassIcon, FlameIcon, PinIcon, RepeatIcon, TargetGoalIcon, UserIcon, UserCheckIcon, PackageBoxIcon, CodeBracketsIcon, } from '../NetworkIcons';
-import TouchableScale from '../TouchableScale';
-const DEFAULT_FILTERS = {
-    categories: new Set(['all']),
-    screens: new Set(),
-    sources: new Set(['all']),
-    userTypes: new Set(['all']),
-    timeWindow: 'all',
-    payloadComplexity: 'all',
-    hasRevenue: false,
-    hasItems: false,
-    hasUserProps: false,
-    hasParams: false,
-    onlyDuplicates: false,
-    onlyConversions: false,
-    sortBy: 'time_desc',
-};
-const AnalyticsFilterModal = ({ visible, onClose, }) => {
-    const { analyticsEvents, analyticsSearch, analyticsFilters, setAnalyticsFilters, } = useInspector();
-    const [draft, setDraft] = useState(() => ({
-        ...analyticsFilters,
-        categories: new Set(analyticsFilters.categories),
-        screens: new Set(analyticsFilters.screens),
-        sources: new Set(analyticsFilters.sources || ['all']),
-        userTypes: new Set(analyticsFilters.userTypes || ['all']),
-    }));
-    useEffect(() => {
-        if (visible) {
-            setDraft({
-                ...analyticsFilters,
-                categories: new Set(analyticsFilters.categories),
-                screens: new Set(analyticsFilters.screens),
-                sources: new Set(analyticsFilters.sources || ['all']),
-                userTypes: new Set(analyticsFilters.userTypes || ['all']),
-            });
-        }
-    }, [visible, analyticsFilters]);
-    const uniqueScreens = useMemo(() => {
-        const screens = new Set();
-        for (const e of analyticsEvents) {
-            const scr = e.screenName ||
-                e.params?.firebase_screen ||
-                e.params?.screen_name ||
-                e.params?.firebase_screen_class ||
-                e.screenClass;
-            if (scr && typeof scr === 'string' && scr.trim() !== '') {
-                screens.add(scr.trim());
-            }
-        }
-        return Array.from(screens);
-    }, [analyticsEvents]);
-    const toggleCategory = (cat) => {
-        setDraft(prev => {
-            const next = new Set(prev.categories);
-            if (cat === 'all') {
-                return { ...prev, categories: new Set(['all']) };
-            }
-            next.delete('all');
-            if (next.has(cat)) {
-                next.delete(cat);
-                if (next.size === 0)
-                    next.add('all');
-            }
-            else {
-                next.add(cat);
-            }
-            return { ...prev, categories: next };
-        });
-    };
-    const toggleScreen = (scr) => {
-        setDraft(prev => {
-            const next = new Set(prev.screens);
-            if (next.has(scr)) {
-                next.delete(scr);
-            }
-            else {
-                next.add(scr);
-            }
-            return { ...prev, screens: next };
-        });
-    };
-    const toggleSource = (src) => {
-        setDraft(prev => {
-            const next = new Set(prev.sources);
-            if (src === 'all') {
-                return { ...prev, sources: new Set(['all']) };
-            }
-            next.delete('all');
-            if (next.has(src)) {
-                next.delete(src);
-                if (next.size === 0)
-                    next.add('all');
-            }
-            else {
-                next.add(src);
-            }
-            return { ...prev, sources: next };
-        });
-    };
-    const toggleUserType = (ut) => {
-        setDraft(prev => {
-            const next = new Set(prev.userTypes);
-            if (ut === 'all') {
-                return { ...prev, userTypes: new Set(['all']) };
-            }
-            next.delete('all');
-            if (next.has(ut)) {
-                next.delete(ut);
-                if (next.size === 0)
-                    next.add('all');
-            }
-            else {
-                next.add(ut);
-            }
-            return { ...prev, userTypes: next };
-        });
-    };
-    const toggleFlag = (key) => {
-        setDraft(prev => ({
-            ...prev,
-            [key]: !prev[key],
-        }));
-    };
-    const setTimeWindow = (tw) => {
-        setDraft(prev => ({ ...prev, timeWindow: tw }));
-    };
-    const setPayloadComplexity = (pc) => {
-        setDraft(prev => ({ ...prev, payloadComplexity: pc }));
-    };
-    const setSort = (sortBy) => {
-        setDraft(prev => ({ ...prev, sortBy }));
-    };
-    const handleResetDraft = () => {
-        setDraft({
-            categories: new Set(['all']),
-            screens: new Set(),
-            sources: new Set(['all']),
-            userTypes: new Set(['all']),
-            timeWindow: 'all',
-            payloadComplexity: 'all',
-            hasRevenue: false,
-            hasItems: false,
-            hasUserProps: false,
-            hasParams: false,
-            onlyDuplicates: false,
-            onlyConversions: false,
-            sortBy: 'time_desc',
-        });
-    };
-    const handleApply = () => {
-        setAnalyticsFilters({
-            ...draft,
-            categories: new Set(draft.categories),
-            screens: new Set(draft.screens),
-            sources: new Set(draft.sources),
-            userTypes: new Set(draft.userTypes),
-        });
-        onClose();
-    };
-    const handleDiscard = () => {
-        setDraft({
-            ...analyticsFilters,
-            categories: new Set(analyticsFilters.categories),
-            screens: new Set(analyticsFilters.screens),
-            sources: new Set(analyticsFilters.sources || ['all']),
-            userTypes: new Set(analyticsFilters.userTypes || ['all']),
-        });
-        onClose();
-    };
-    const draftMatchCount = useMemo(() => {
-        let events = analyticsEvents;
-        if (analyticsSearch) {
-            const s = analyticsSearch.toLowerCase();
-            events = events.filter(e => e.name.toLowerCase().includes(s) ||
-                JSON.stringify(e.params || {}).toLowerCase().includes(s) ||
-                (e.screenName ?? '').toLowerCase().includes(s) ||
-                (e.pageTitle ?? '').toLowerCase().includes(s));
-        }
-        if (draft.categories.size > 0 && !draft.categories.has('all')) {
-            events = events.filter(e => {
-                const cat = getEventCategory(e.name);
-                return draft.categories.has(cat);
-            });
-        }
-        if (draft.timeWindow !== 'all') {
-            const now = Date.now();
-            const cutoff = draft.timeWindow === '1m'
-                ? now - 60 * 1000
-                : draft.timeWindow === '5m'
-                    ? now - 5 * 60 * 1000
-                    : draft.timeWindow === '15m'
-                        ? now - 15 * 60 * 1000
-                        : now - 60 * 60 * 1000;
-            events = events.filter(e => e.timestamp >= cutoff);
-        }
-        if (draft.sources.size > 0 && !draft.sources.has('all')) {
-            events = events.filter(e => draft.sources.has(e.source || 'manual'));
-        }
-        if (draft.userTypes.size > 0 && !draft.userTypes.has('all')) {
-            events = events.filter(e => {
-                const isIdentified = Boolean(e.userId && e.userId.trim() !== '');
-                if (draft.userTypes.has('identified') && isIdentified)
-                    return true;
-                if (draft.userTypes.has('anonymous') && !isIdentified)
-                    return true;
-                return false;
-            });
-        }
-        if (draft.payloadComplexity !== 'all') {
-            events = events.filter(e => {
-                const count = e.params ? Object.keys(e.params).length : 0;
-                if (draft.payloadComplexity === 'none')
-                    return count === 0;
-                if (draft.payloadComplexity === 'simple')
-                    return count >= 1 && count <= 5;
-                if (draft.payloadComplexity === 'heavy')
-                    return count > 5;
-                return true;
-            });
-        }
-        if (draft.onlyConversions) {
-            const CONVERSION_PATTERNS = [
-                'purchase',
-                'item_purchase',
-                'ecommerce_purchase',
-                'sign_up',
-                'login',
-                'lead',
-                'generate_lead',
-                'tutorial_complete',
-                'add_payment_info',
-                'begin_checkout',
-            ];
-            events = events.filter(e => CONVERSION_PATTERNS.some(pat => e.name.toLowerCase().includes(pat)));
-        }
-        if (draft.screens.size > 0) {
-            events = events.filter(e => {
-                const scr = e.screenName ||
-                    e.params?.firebase_screen ||
-                    e.params?.screen_name ||
-                    e.params?.firebase_screen_class ||
-                    e.screenClass ||
-                    '';
-                return draft.screens.has(scr);
-            });
-        }
-        if (draft.hasRevenue) {
-            events = events.filter(e => {
-                const val = e.params?.value ?? e.params?.price;
-                return val !== undefined && val !== null && Number(val) > 0;
-            });
-        }
-        if (draft.hasItems) {
-            events = events.filter(e => Array.isArray(e.params?.items) && e.params.items.length > 0);
-        }
-        if (draft.hasUserProps) {
-            events = events.filter(e => e.userProperties && Object.keys(e.userProperties).length > 0);
-        }
-        if (draft.hasParams) {
-            events = events.filter(e => e.params && Object.keys(e.params).length > 0);
-        }
-        return events.length;
-    }, [analyticsEvents, analyticsSearch, draft]);
-    const isAllCategories = draft.categories.has('all') || draft.categories.size === 0;
-    const isAllSources = draft.sources.has('all') || draft.sources.size === 0;
-    const isAllUserTypes = draft.userTypes.has('all') || draft.userTypes.size === 0;
-    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={handleDiscard}>
-      <View style={styles.backdrop}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={handleDiscard}/>
+import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as Ce,Pressable as Ae,ScrollView as Ie,StyleSheet as Y,Text as T,TouchableOpacity as R,View as P}from"react-native";import{useInspector as ze}from"./InspectorContext";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as A}from"../../styles/AppFonts";import{getEventCategory as Be}from"../../helpers";import{FilterIcon as Ve,CloseWhite as Re,CheckIcon as L,CartIcon as We,GlobeIcon as _e,BoltIcon as Z,SparkleIcon as J,MoneyIcon as M,ClockIcon as $,HourglassIcon as Oe,FlameIcon as Ee,PinIcon as K,RepeatIcon as De,TargetGoalIcon as X,UserIcon as Q,UserCheckIcon as Fe,PackageBoxIcon as Ue,CodeBracketsIcon as Te}from"../NetworkIcons";import S from"../TouchableScale";const Je={categories:new Set(["all"]),screens:new Set,sources:new Set(["all"]),userTypes:new Set(["all"]),timeWindow:"all",payloadComplexity:"all",hasRevenue:!1,hasItems:!1,hasUserProps:!1,hasParams:!1,onlyDuplicates:!1,onlyConversions:!1,sortBy:"time_desc"},He=({visible:W,onClose:G})=>{const{analyticsEvents:z,analyticsSearch:_,analyticsFilters:v,setAnalyticsFilters:pe}=ze(),[t,C]=ve(()=>({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}));Se(()=>{W&&C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])})},[W,v]);const O=q(()=>{const s=new Set;for(const i of z){const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass;r&&typeof r=="string"&&r.trim()!==""&&s.add(r.trim())}return Array.from(s)},[z]),I=s=>{C(i=>{const r=new Set(i.categories);return s==="all"?{...i,categories:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,categories:r})})},me=s=>{C(i=>{const r=new Set(i.screens);return r.has(s)?r.delete(s):r.add(s),{...i,screens:r}})},E=s=>{C(i=>{const r=new Set(i.sources);return s==="all"?{...i,sources:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,sources:r})})},D=s=>{C(i=>{const r=new Set(i.userTypes);return s==="all"?{...i,userTypes:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,userTypes:r})})},k=s=>{C(i=>({...i,[s]:!i[s]}))},Pe=s=>{C(i=>({...i,timeWindow:s}))},we=s=>{C(i=>({...i,payloadComplexity:s}))},B=s=>{C(i=>({...i,sortBy:s}))},ge=()=>{C({categories:new Set(["all"]),screens:new Set,sources:new Set(["all"]),userTypes:new Set(["all"]),timeWindow:"all",payloadComplexity:"all",hasRevenue:!1,hasItems:!1,hasUserProps:!1,hasParams:!1,onlyDuplicates:!1,onlyConversions:!1,sortBy:"time_desc"})},xe=()=>{pe({...t,categories:new Set(t.categories),screens:new Set(t.screens),sources:new Set(t.sources),userTypes:new Set(t.userTypes)}),G()},V=()=>{C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}),G()},be=q(()=>{let s=z;if(_){const i=_.toLowerCase();s=s.filter(r=>r.name.toLowerCase().includes(i)||JSON.stringify(r.params||{}).toLowerCase().includes(i)||(r.screenName??"").toLowerCase().includes(i)||(r.pageTitle??"").toLowerCase().includes(i))}if(t.categories.size>0&&!t.categories.has("all")&&(s=s.filter(i=>{const r=Be(i.name);return t.categories.has(r)})),t.timeWindow!=="all"){const i=Date.now(),r=t.timeWindow==="1m"?i-60*1e3:t.timeWindow==="5m"?i-300*1e3:t.timeWindow==="15m"?i-900*1e3:i-3600*1e3;s=s.filter(N=>N.timestamp>=r)}if(t.sources.size>0&&!t.sources.has("all")&&(s=s.filter(i=>t.sources.has(i.source||"manual"))),t.userTypes.size>0&&!t.userTypes.has("all")&&(s=s.filter(i=>{const r=!!(i.userId&&i.userId.trim()!=="");return!!(t.userTypes.has("identified")&&r||t.userTypes.has("anonymous")&&!r)})),t.payloadComplexity!=="all"&&(s=s.filter(i=>{const r=i.params?Object.keys(i.params).length:0;return t.payloadComplexity==="none"?r===0:t.payloadComplexity==="simple"?r>=1&&r<=5:t.payloadComplexity==="heavy"?r>5:!0})),t.onlyConversions){const i=["purchase","item_purchase","ecommerce_purchase","sign_up","login","lead","generate_lead","tutorial_complete","add_payment_info","begin_checkout"];s=s.filter(r=>i.some(N=>r.name.toLowerCase().includes(N)))}return t.screens.size>0&&(s=s.filter(i=>{const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass||"";return t.screens.has(r)})),t.hasRevenue&&(s=s.filter(i=>{const r=i.params?.value??i.params?.price;return r!=null&&Number(r)>0})),t.hasItems&&(s=s.filter(i=>Array.isArray(i.params?.items)&&i.params.items.length>0)),t.hasUserProps&&(s=s.filter(i=>i.userProperties&&Object.keys(i.userProperties).length>0)),t.hasParams&&(s=s.filter(i=>i.params&&Object.keys(i.params).length>0)),s.length},[z,_,t]),F=t.categories.has("all")||t.categories.size===0,U=t.sources.has("all")||t.sources.size===0,H=t.userTypes.has("all")||t.userTypes.size===0;return<Ce visible={W}transparent animationType="fade"onRequestClose={V}>
+      <P style={e.backdrop}>
+        <Ae style={Y.absoluteFill}onPress={V}/>
 
-        <View style={styles.modalCard}>
+        <P style={e.modalCard}>
           
-          <View style={styles.header}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <View style={styles.headerIconBox}>
-                <FilterIcon color={AppColors.brandPurple} size={15}/>
-              </View>
-              <View>
-                <Text style={styles.headerTitle}>Analytics Filters</Text>
-                <Text style={styles.headerSubtitle}>
+          <P style={e.header}>
+            <P style={{flexDirection:"row",alignItems:"center",gap:8}}>
+              <P style={e.headerIconBox}>
+                <Ve color={l.brandPurple}size={15}/>
+              </P>
+              <P>
+                <T style={e.headerTitle}>Analytics Filters</T>
+                <T style={e.headerSubtitle}>
                   GA4 Telemetry Dimensions & Metrics
-                </Text>
-              </View>
-            </View>
+                </T>
+              </P>
+            </P>
 
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <TouchableOpacity onPress={handleResetDraft} hitSlop={8} style={styles.resetBtn}>
-                <Text style={styles.resetBtnText}>Reset All</Text>
-              </TouchableOpacity>
+            <P style={{flexDirection:"row",alignItems:"center",gap:8}}>
+              <R onPress={ge}hitSlop={8}style={e.resetBtn}>
+                <T style={e.resetBtnText}>Reset All</T>
+              </R>
 
-              <TouchableOpacity onPress={handleDiscard} hitSlop={10} style={styles.closeBtn}>
-                <CloseWhite />
-              </TouchableOpacity>
-            </View>
-          </View>
+              <R onPress={V}hitSlop={10}style={e.closeBtn}>
+                <Re/>
+              </R>
+            </P>
+          </P>
 
           
-          <ScrollView style={{ maxHeight: 460 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
+          <Ie style={{maxHeight:460}}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}>
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <ClockIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>TIME HORIZON</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: 'All Time' },
-            { key: '1m', label: 'Last 1 min' },
-            { key: '5m', label: 'Last 5 mins' },
-            { key: '15m', label: 'Last 15 mins' },
-            { key: '1h', label: 'Last 1 hour' },
-        ].map(item => (<TouchableScale key={item.key} onPress={() => setTimeWindow(item.key)} style={[
-                styles.filterPill,
-                draft.timeWindow === item.key &&
-                    styles.filterPillActive,
-            ]}>
-                    <Text style={[
-                styles.filterPillText,
-                draft.timeWindow === item.key &&
-                    styles.filterPillTextActive,
-            ]}>
-                      {item.label}
-                    </Text>
-                  </TouchableScale>))}
-              </View>
-            </View>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <$ color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>TIME HORIZON</T>
+              </P>
+              <P style={e.chipsWrap}>
+                {[{key:"all",label:"All Time"},{key:"1m",label:"Last 1 min"},{key:"5m",label:"Last 5 mins"},{key:"15m",label:"Last 15 mins"},{key:"1h",label:"Last 1 hour"}].map(s=><S key={s.key}onPress={()=>Pe(s.key)}style={[e.filterPill,t.timeWindow===s.key&&e.filterPillActive]}>
+                    <T style={[e.filterPillText,t.timeWindow===s.key&&e.filterPillTextActive]}>
+                      {s.label}
+                    </T>
+                  </S>)}
+              </P>
+            </P>
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <TargetGoalIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>EVENT CATEGORIES</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => toggleCategory('all')} style={[
-            styles.filterPill,
-            isAllCategories && styles.filterPillActive,
-        ]}>
-                  {isAllCategories && (<CheckIcon color={AppColors.white} size={12}/>)}
-                  <Text style={[
-            styles.filterPillText,
-            isAllCategories && styles.filterPillTextActive,
-        ]}>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <X color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>EVENT CATEGORIES</T>
+              </P>
+              <P style={e.chipsWrap}>
+                <S onPress={()=>I("all")}style={[e.filterPill,F&&e.filterPillActive]}>
+                  {F&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,F&&e.filterPillTextActive]}>
                     All Categories
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleCategory('ecommerce')} style={[
-            styles.filterPill,
-            draft.categories.has('ecommerce') &&
-                styles.filterPillActive,
-        ]}>
-                  <CartIcon color={draft.categories.has('ecommerce')
-            ? AppColors.white
-            : AppColors.amber700} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.categories.has('ecommerce') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>I("ecommerce")}style={[e.filterPill,t.categories.has("ecommerce")&&e.filterPillActive]}>
+                  <We color={t.categories.has("ecommerce")?l.white:l.amber700}size={13}/>
+                  <T style={[e.filterPillText,t.categories.has("ecommerce")&&e.filterPillTextActive]}>
                     Ecommerce
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleCategory('page_view')} style={[
-            styles.filterPill,
-            draft.categories.has('page_view') &&
-                styles.filterPillActive,
-        ]}>
-                  <GlobeIcon color={draft.categories.has('page_view')
-            ? AppColors.white
-            : AppColors.sky600} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.categories.has('page_view') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>I("page_view")}style={[e.filterPill,t.categories.has("page_view")&&e.filterPillActive]}>
+                  <_e color={t.categories.has("page_view")?l.white:l.sky600}size={13}/>
+                  <T style={[e.filterPillText,t.categories.has("page_view")&&e.filterPillTextActive]}>
                     Screens & Pages
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleCategory('system')} style={[
-            styles.filterPill,
-            draft.categories.has('system') &&
-                styles.filterPillActive,
-        ]}>
-                  <BoltIcon color={draft.categories.has('system')
-            ? AppColors.white
-            : AppColors.purple} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.categories.has('system') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>I("system")}style={[e.filterPill,t.categories.has("system")&&e.filterPillActive]}>
+                  <Z color={t.categories.has("system")?l.white:l.purple}size={13}/>
+                  <T style={[e.filterPillText,t.categories.has("system")&&e.filterPillTextActive]}>
                     System & Lifecycle
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleCategory('custom')} style={[
-            styles.filterPill,
-            draft.categories.has('custom') &&
-                styles.filterPillActive,
-        ]}>
-                  <SparkleIcon color={draft.categories.has('custom')
-            ? AppColors.white
-            : AppColors.brandPurple} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.categories.has('custom') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>I("custom")}style={[e.filterPill,t.categories.has("custom")&&e.filterPillActive]}>
+                  <J color={t.categories.has("custom")?l.white:l.brandPurple}size={13}/>
+                  <T style={[e.filterPillText,t.categories.has("custom")&&e.filterPillTextActive]}>
                     Custom Events
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                  </T>
+                </S>
+              </P>
+            </P>
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <MoneyIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <M color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>
                   MONETIZATION & ATTRIBUTES
-                </Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => toggleFlag('onlyConversions')} style={[
-            styles.filterPill,
-            draft.onlyConversions && styles.filterPillActive,
-        ]}>
-                  <TargetGoalIcon color={draft.onlyConversions
-            ? AppColors.white
-            : AppColors.brandPurple} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.onlyConversions && styles.filterPillTextActive,
-        ]}>
+                </T>
+              </P>
+              <P style={e.chipsWrap}>
+                <S onPress={()=>k("onlyConversions")}style={[e.filterPill,t.onlyConversions&&e.filterPillActive]}>
+                  <X color={t.onlyConversions?l.white:l.brandPurple}size={13}/>
+                  <T style={[e.filterPillText,t.onlyConversions&&e.filterPillTextActive]}>
                     Conversion Events Only
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleFlag('hasRevenue')} style={[
-            styles.filterPill,
-            draft.hasRevenue && styles.filterPillActive,
-        ]}>
-                  <MoneyIcon color={draft.hasRevenue
-            ? AppColors.white
-            : AppColors.emerald600} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.hasRevenue && styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>k("hasRevenue")}style={[e.filterPill,t.hasRevenue&&e.filterPillActive]}>
+                  <M color={t.hasRevenue?l.white:l.emerald600}size={13}/>
+                  <T style={[e.filterPillText,t.hasRevenue&&e.filterPillTextActive]}>
                     With Revenue (Value &gt; 0)
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleFlag('hasItems')} style={[
-            styles.filterPill,
-            draft.hasItems && styles.filterPillActive,
-        ]}>
-                  <PackageBoxIcon color={draft.hasItems
-            ? AppColors.white
-            : AppColors.amber700} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.hasItems && styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>k("hasItems")}style={[e.filterPill,t.hasItems&&e.filterPillActive]}>
+                  <Ue color={t.hasItems?l.white:l.amber700}size={13}/>
+                  <T style={[e.filterPillText,t.hasItems&&e.filterPillTextActive]}>
                     With Items Payload
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleFlag('hasUserProps')} style={[
-            styles.filterPill,
-            draft.hasUserProps && styles.filterPillActive,
-        ]}>
-                  <SparkleIcon color={draft.hasUserProps
-            ? AppColors.white
-            : AppColors.brandPurple} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.hasUserProps && styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>k("hasUserProps")}style={[e.filterPill,t.hasUserProps&&e.filterPillActive]}>
+                  <J color={t.hasUserProps?l.white:l.brandPurple}size={13}/>
+                  <T style={[e.filterPillText,t.hasUserProps&&e.filterPillTextActive]}>
                     With User Properties
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleFlag('hasParams')} style={[
-            styles.filterPill,
-            draft.hasParams && styles.filterPillActive,
-        ]}>
-                  <CodeBracketsIcon color={draft.hasParams
-            ? AppColors.white
-            : AppColors.grayText} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.hasParams && styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>k("hasParams")}style={[e.filterPill,t.hasParams&&e.filterPillActive]}>
+                  <Te color={t.hasParams?l.white:l.grayText}size={13}/>
+                  <T style={[e.filterPillText,t.hasParams&&e.filterPillTextActive]}>
                     With Custom Params
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleFlag('onlyDuplicates')} style={[
-            styles.filterPill,
-            draft.onlyDuplicates && styles.filterPillActive,
-        ]}>
-                  <RepeatIcon color={draft.onlyDuplicates
-            ? AppColors.white
-            : AppColors.rose600} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.onlyDuplicates && styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>k("onlyDuplicates")}style={[e.filterPill,t.onlyDuplicates&&e.filterPillActive]}>
+                  <De color={t.onlyDuplicates?l.white:l.rose600}size={13}/>
+                  <T style={[e.filterPillText,t.onlyDuplicates&&e.filterPillTextActive]}>
                     Frequent Only (&gt; 1×)
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                  </T>
+                </S>
+              </P>
+            </P>
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <UserIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>USER IDENTIFICATION</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => toggleUserType('all')} style={[
-            styles.filterPill,
-            isAllUserTypes && styles.filterPillActive,
-        ]}>
-                  {isAllUserTypes && (<CheckIcon color={AppColors.white} size={12}/>)}
-                  <Text style={[
-            styles.filterPillText,
-            isAllUserTypes && styles.filterPillTextActive,
-        ]}>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <Q color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>USER IDENTIFICATION</T>
+              </P>
+              <P style={e.chipsWrap}>
+                <S onPress={()=>D("all")}style={[e.filterPill,H&&e.filterPillActive]}>
+                  {H&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,H&&e.filterPillTextActive]}>
                     All Users
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleUserType('identified')} style={[
-            styles.filterPill,
-            draft.userTypes.has('identified') &&
-                styles.filterPillActive,
-        ]}>
-                  <UserCheckIcon color={draft.userTypes.has('identified')
-            ? AppColors.white
-            : AppColors.greenColor} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.userTypes.has('identified') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>D("identified")}style={[e.filterPill,t.userTypes.has("identified")&&e.filterPillActive]}>
+                  <Fe color={t.userTypes.has("identified")?l.white:l.greenColor}size={13}/>
+                  <T style={[e.filterPillText,t.userTypes.has("identified")&&e.filterPillTextActive]}>
                     Identified (User ID)
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleUserType('anonymous')} style={[
-            styles.filterPill,
-            draft.userTypes.has('anonymous') &&
-                styles.filterPillActive,
-        ]}>
-                  <UserIcon color={draft.userTypes.has('anonymous')
-            ? AppColors.white
-            : AppColors.grayTextWeak} size={13}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.userTypes.has('anonymous') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>D("anonymous")}style={[e.filterPill,t.userTypes.has("anonymous")&&e.filterPillActive]}>
+                  <Q color={t.userTypes.has("anonymous")?l.white:l.grayTextWeak}size={13}/>
+                  <T style={[e.filterPillText,t.userTypes.has("anonymous")&&e.filterPillTextActive]}>
                     Anonymous
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                  </T>
+                </S>
+              </P>
+            </P>
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <BoltIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>EVENT SOURCE</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => toggleSource('all')} style={[
-            styles.filterPill,
-            isAllSources && styles.filterPillActive,
-        ]}>
-                  {isAllSources && (<CheckIcon color={AppColors.white} size={12}/>)}
-                  <Text style={[
-            styles.filterPillText,
-            isAllSources && styles.filterPillTextActive,
-        ]}>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <Z color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>EVENT SOURCE</T>
+              </P>
+              <P style={e.chipsWrap}>
+                <S onPress={()=>E("all")}style={[e.filterPill,U&&e.filterPillActive]}>
+                  {U&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,U&&e.filterPillTextActive]}>
                     All Sources
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleSource('firebase')} style={[
-            styles.filterPill,
-            draft.sources.has('firebase') &&
-                styles.filterPillActive,
-        ]}>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sources.has('firebase') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>E("firebase")}style={[e.filterPill,t.sources.has("firebase")&&e.filterPillActive]}>
+                  <T style={[e.filterPillText,t.sources.has("firebase")&&e.filterPillTextActive]}>
                     Firebase / GA SDK
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => toggleSource('manual')} style={[
-            styles.filterPill,
-            draft.sources.has('manual') &&
-                styles.filterPillActive,
-        ]}>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sources.has('manual') &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>E("manual")}style={[e.filterPill,t.sources.has("manual")&&e.filterPillActive]}>
+                  <T style={[e.filterPillText,t.sources.has("manual")&&e.filterPillTextActive]}>
                     In-App Logger
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
+                  </T>
+                </S>
+              </P>
+            </P>
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <CodeBracketsIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>PAYLOAD COMPLEXITY</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                {[
-            { key: 'all', label: 'All Payloads' },
-            { key: 'none', label: '0 Params' },
-            { key: 'simple', label: '1 - 5 Params' },
-            { key: 'heavy', label: '> 5 Params' },
-        ].map(item => (<TouchableScale key={item.key} onPress={() => setPayloadComplexity(item.key)} style={[
-                styles.filterPill,
-                draft.payloadComplexity === item.key &&
-                    styles.filterPillActive,
-            ]}>
-                    <Text style={[
-                styles.filterPillText,
-                draft.payloadComplexity === item.key &&
-                    styles.filterPillTextActive,
-            ]}>
-                      {item.label}
-                    </Text>
-                  </TouchableScale>))}
-              </View>
-            </View>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <Te color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>PAYLOAD COMPLEXITY</T>
+              </P>
+              <P style={e.chipsWrap}>
+                {[{key:"all",label:"All Payloads"},{key:"none",label:"0 Params"},{key:"simple",label:"1 - 5 Params"},{key:"heavy",label:"> 5 Params"}].map(s=><S key={s.key}onPress={()=>we(s.key)}style={[e.filterPill,t.payloadComplexity===s.key&&e.filterPillActive]}>
+                    <T style={[e.filterPillText,t.payloadComplexity===s.key&&e.filterPillTextActive]}>
+                      {s.label}
+                    </T>
+                  </S>)}
+              </P>
+            </P>
 
             
-            {uniqueScreens.length > 0 && (<View style={styles.section}>
-                <View style={styles.sectionHeaderRow}>
-                  <PinIcon color={AppColors.grayTextWeak} size={12}/>
-                  <Text style={styles.sectionTitle}>
-                    DISCOVERED SCREENS ({uniqueScreens.length})
-                  </Text>
-                </View>
-                <View style={styles.chipsWrap}>
-                  {uniqueScreens.map(scr => {
-                const isSelected = draft.screens.has(scr);
-                return (<TouchableScale key={scr} onPress={() => toggleScreen(scr)} style={[
-                        styles.filterPill,
-                        isSelected && styles.filterPillActive,
-                    ]}>
-                        <PinIcon color={isSelected
-                        ? AppColors.white
-                        : AppColors.amber700} size={12}/>
-                        <Text style={[
-                        styles.filterPillText,
-                        isSelected && styles.filterPillTextActive,
-                    ]}>
-                          {scr}
-                        </Text>
-                      </TouchableScale>);
-            })}
-                </View>
-              </View>)}
+            {O.length>0&&<P style={e.section}>
+                <P style={e.sectionHeaderRow}>
+                  <K color={l.grayTextWeak}size={12}/>
+                  <T style={e.sectionTitle}>
+                    DISCOVERED SCREENS ({O.length})
+                  </T>
+                </P>
+                <P style={e.chipsWrap}>
+                  {O.map(s=>{const i=t.screens.has(s);return<S key={s}onPress={()=>me(s)}style={[e.filterPill,i&&e.filterPillActive]}>
+                        <K color={i?l.white:l.amber700}size={12}/>
+                        <T style={[e.filterPillText,i&&e.filterPillTextActive]}>
+                          {s}
+                        </T>
+                      </S>})}
+                </P>
+              </P>}
 
             
-            <View style={styles.section}>
-              <View style={styles.sectionHeaderRow}>
-                <ClockIcon color={AppColors.grayTextWeak} size={12}/>
-                <Text style={styles.sectionTitle}>SORT ORDER</Text>
-              </View>
-              <View style={styles.chipsWrap}>
-                <TouchableScale onPress={() => setSort('time_desc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'time_desc' &&
-                styles.filterPillActive,
-        ]}>
-                  <ClockIcon color={draft.sortBy === 'time_desc'
-            ? AppColors.white
-            : AppColors.grayText} size={12}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'time_desc' &&
-                styles.filterPillTextActive,
-        ]}>
+            <P style={e.section}>
+              <P style={e.sectionHeaderRow}>
+                <$ color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>SORT ORDER</T>
+              </P>
+              <P style={e.chipsWrap}>
+                <S onPress={()=>B("time_desc")}style={[e.filterPill,t.sortBy==="time_desc"&&e.filterPillActive]}>
+                  <$ color={t.sortBy==="time_desc"?l.white:l.grayText}size={12}/>
+                  <T style={[e.filterPillText,t.sortBy==="time_desc"&&e.filterPillTextActive]}>
                     Newest First (Default)
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => setSort('time_asc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'time_asc' &&
-                styles.filterPillActive,
-        ]}>
-                  <HourglassIcon color={draft.sortBy === 'time_asc'
-            ? AppColors.white
-            : AppColors.grayText} size={12}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'time_asc' &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>B("time_asc")}style={[e.filterPill,t.sortBy==="time_asc"&&e.filterPillActive]}>
+                  <Oe color={t.sortBy==="time_asc"?l.white:l.grayText}size={12}/>
+                  <T style={[e.filterPillText,t.sortBy==="time_asc"&&e.filterPillTextActive]}>
                     Oldest First
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => setSort('revenue_desc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'revenue_desc' &&
-                styles.filterPillActive,
-        ]}>
-                  <MoneyIcon color={draft.sortBy === 'revenue_desc'
-            ? AppColors.white
-            : AppColors.emerald600} size={12}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'revenue_desc' &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>B("revenue_desc")}style={[e.filterPill,t.sortBy==="revenue_desc"&&e.filterPillActive]}>
+                  <M color={t.sortBy==="revenue_desc"?l.white:l.emerald600}size={12}/>
+                  <T style={[e.filterPillText,t.sortBy==="revenue_desc"&&e.filterPillTextActive]}>
                     Highest Revenue
-                  </Text>
-                </TouchableScale>
+                  </T>
+                </S>
 
-                <TouchableScale onPress={() => setSort('count_desc')} style={[
-            styles.filterPill,
-            draft.sortBy === 'count_desc' &&
-                styles.filterPillActive,
-        ]}>
-                  <FlameIcon color={draft.sortBy === 'count_desc'
-            ? AppColors.white
-            : AppColors.darkOrange} size={12}/>
-                  <Text style={[
-            styles.filterPillText,
-            draft.sortBy === 'count_desc' &&
-                styles.filterPillTextActive,
-        ]}>
+                <S onPress={()=>B("count_desc")}style={[e.filterPill,t.sortBy==="count_desc"&&e.filterPillActive]}>
+                  <Ee color={t.sortBy==="count_desc"?l.white:l.darkOrange}size={12}/>
+                  <T style={[e.filterPillText,t.sortBy==="count_desc"&&e.filterPillTextActive]}>
                     Most Frequent
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
-          </ScrollView>
+                  </T>
+                </S>
+              </P>
+            </P>
+          </Ie>
 
           
-          <View style={styles.footer}>
-            <TouchableOpacity onPress={handleDiscard} style={styles.discardBtn} activeOpacity={0.8}>
-              <Text style={styles.discardBtnText}>Discard</Text>
-            </TouchableOpacity>
+          <P style={e.footer}>
+            <R onPress={V}style={e.discardBtn}activeOpacity={.8}>
+              <T style={e.discardBtnText}>Discard</T>
+            </R>
 
-            <TouchableOpacity onPress={handleApply} style={styles.applyBtn} activeOpacity={0.85}>
-              <Text style={styles.applyBtnText}>
-                Apply ({draftMatchCount} Events)
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>);
-};
-const styles = StyleSheet.create({
-    backdrop: {
-        flex: 1,
-        backgroundColor: `${AppColors.primaryBlack}85`,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 16,
-    },
-    modalCard: {
-        width: '100%',
-        maxWidth: 440,
-        backgroundColor: AppColors.white,
-        borderRadius: 14,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.18,
-        shadowRadius: 12,
-        shadowOffset: { width: 0, height: 4 },
-        elevation: 8,
-        overflow: 'hidden',
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        backgroundColor: `${AppColors.brandPurple}08`,
-    },
-    headerIconBox: {
-        width: 28,
-        height: 28,
-        borderRadius: 7,
-        backgroundColor: `${AppColors.brandPurple}18`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    headerTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.primaryBlack,
-    },
-    headerSubtitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    resetBtn: {
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 5,
-        backgroundColor: `${AppColors.darkOrange}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.darkOrange}30`,
-    },
-    resetBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.darkOrange,
-    },
-    closeBtn: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        backgroundColor: `${AppColors.primaryBlack}18`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    scrollContent: {
-        padding: 14,
-        gap: 14,
-    },
-    section: {
-        gap: 7,
-    },
-    sectionHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    chipsWrap: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 6.5,
-    },
-    filterPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 9,
-        paddingVertical: 5.5,
-        borderRadius: 7,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    filterPillActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    filterPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    filterPillTextActive: {
-        color: AppColors.white,
-        fontFamily: AppFonts.interBold,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-        backgroundColor: AppColors.grayBackground,
-    },
-    discardBtn: {
-        flex: 1,
-        paddingVertical: 9.5,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        backgroundColor: AppColors.white,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    discardBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.grayTextStrong,
-    },
-    applyBtn: {
-        flex: 2,
-        backgroundColor: AppColors.brandPurple,
-        paddingVertical: 9.5,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: AppColors.brandPurple,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    applyBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.white,
-    },
-});
-export default AnalyticsFilterModal;
+            <R onPress={xe}style={e.applyBtn}activeOpacity={.85}>
+              <T style={e.applyBtnText}>
+                Apply ({be} Events)
+              </T>
+            </R>
+          </P>
+        </P>
+      </P>
+    </Ce>},e=Y.create({backdrop:{flex:1,backgroundColor:`${l.primaryBlack}85`,justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:440,backgroundColor:l.white,borderRadius:14,borderWidth:1,borderColor:l.dividerColor,shadowColor:l.black,shadowOpacity:.18,shadowRadius:12,shadowOffset:{width:0,height:4},elevation:8,overflow:"hidden"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingVertical:12,borderBottomWidth:1,borderBottomColor:l.dividerColor,backgroundColor:`${l.brandPurple}08`},headerIconBox:{width:28,height:28,borderRadius:7,backgroundColor:`${l.brandPurple}18`,alignItems:"center",justifyContent:"center"},headerTitle:{fontFamily:A.interBold,fontSize:13.5,color:l.primaryBlack},headerSubtitle:{fontFamily:A.interMedium,fontSize:10,color:l.grayTextWeak},resetBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:5,backgroundColor:`${l.darkOrange}14`,borderWidth:1,borderColor:`${l.darkOrange}30`},resetBtnText:{fontFamily:A.interBold,fontSize:10,color:l.darkOrange},closeBtn:{width:24,height:24,borderRadius:12,backgroundColor:`${l.primaryBlack}18`,alignItems:"center",justifyContent:"center"},scrollContent:{padding:14,gap:14},section:{gap:7},sectionHeaderRow:{flexDirection:"row",alignItems:"center",gap:5},sectionTitle:{fontFamily:A.interBold,fontSize:9.5,color:l.grayTextWeak,letterSpacing:.5},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:6.5},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:5.5,borderRadius:7,backgroundColor:l.grayBackground,borderWidth:1,borderColor:l.dividerColor},filterPillActive:{backgroundColor:l.brandPurple,borderColor:l.brandPurple,shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},filterPillText:{fontFamily:A.interMedium,fontSize:11,color:l.primaryBlack},filterPillTextActive:{color:l.white,fontFamily:A.interBold},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:14,paddingVertical:12,borderTopWidth:1,borderTopColor:l.dividerColor,backgroundColor:l.grayBackground},discardBtn:{flex:1,paddingVertical:9.5,borderRadius:8,borderWidth:1,borderColor:l.dividerColor,backgroundColor:l.white,alignItems:"center",justifyContent:"center"},discardBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.grayTextStrong},applyBtn:{flex:2,backgroundColor:l.brandPurple,paddingVertical:9.5,borderRadius:8,alignItems:"center",justifyContent:"center",shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},applyBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.white}});export default He;