react-native-inapp-inspector 2.0.2 → 2.0.4

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

@@ -55,11 +55,26 @@ const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_2 = require("../../customHooks/analyticsLogger");
 const i18n_1 = require("../../i18n");
+const telemetry_1 = require("../../helpers/telemetry");
 const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
     const { t } = (0, i18n_1.useTranslation)();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
     const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
+    const [telemetryConsent, setTelemetryConsentState] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        (0, telemetry_1.getTelemetryConsentStatus)().then(status => {
+            setTelemetryConsentState(status === 'granted');
+        });
+    }, []);
+    const handleToggleTelemetry = async () => {
+        const nextVal = !telemetryConsent;
+        setTelemetryConsentState(nextVal);
+        await (0, telemetry_1.setTelemetryConsent)(nextVal);
+        if (nextVal) {
+            (0, telemetry_1.sendSessionTelemetryPing)({ force: true });
+        }
+    };
     (0, react_1.useEffect)(() => {
         setStagedHeight(modalHeightPercent);
     }, [modalHeightPercent]);
@@ -1353,6 +1368,182 @@ const SettingsPanel = () => {
                     </react_native_1.View>)}
                 </react_native_1.View>
               </react_native_1.View>
+
+              {/* Section 4: Privacy & Diagnostics */}
+              <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  PRIVACY & ANONYMOUS DIAGNOSTICS
+                </react_native_1.Text>
+
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        Help Improve In-App Inspector
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Share non-identifiable technical metrics (RN version, JS engine, device model). No user data or network payloads are captured.
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: telemetryConsent
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: telemetryConsent ? 'flex-end' : 'flex-start',
+            }}>
+                    <react_native_1.View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Section 5: Notifications & Toasts */}
+              <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  NOTIFICATIONS & TOASTS
+                </react_native_1.Text>
+
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <react_native_1.View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        NPM Update Toast
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Show a floating toast banner with countdown progress when a newer release is published on npm.
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: showUpdateToast
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
+            }}>
+                    <react_native_1.View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.white,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+              </react_native_1.View>
             </react_native_1.View>)}
           <react_native_1.View style={{ height: 48 }}/>
         </react_native_1.ScrollView>

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

@@ -36,34 +36,61 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TelemetryConsentModal = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const AppColors_1 = require("../../styles/AppColors");
-const BrandCircleIcon_1 = require("../BrandCircleIcon");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const BrandSquareIcon_1 = require("../BrandSquareIcon");
 const telemetry_1 = require("../../helpers/telemetry");
+// ─── Inline Crisp SVG Icons ───────────────────────────────────────────────────
+const ShieldCheckSvg = ({ size = 15, color = '#7C3AED' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M9 12l2 2 4-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const CheckSvg = ({ size = 14, color = '#FFFFFF' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const CloseSvg = ({ size = 13, color = '#64748B' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
 const TelemetryConsentModal = () => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
+    const scaleAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0.92))[0];
     (0, react_1.useEffect)(() => {
         let isMounted = true;
         (0, telemetry_1.getTelemetryConsentStatus)().then(status => {
             if (isMounted && status === 'undetermined') {
                 setVisible(true);
-                react_native_1.Animated.timing(fadeAnim, {
-                    toValue: 1,
-                    duration: 300,
-                    useNativeDriver: true,
-                }).start();
+                react_native_1.Animated.parallel([
+                    react_native_1.Animated.timing(fadeAnim, {
+                        toValue: 1,
+                        duration: 250,
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.spring(scaleAnim, {
+                        toValue: 1,
+                        friction: 8,
+                        tension: 45,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
             }
         });
         return () => {
             isMounted = false;
         };
-    }, [fadeAnim]);
+    }, [fadeAnim, scaleAnim]);
     const handleDecision = async (granted) => {
-        react_native_1.Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 200,
-            useNativeDriver: true,
-        }).start(async () => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(scaleAnim, {
+                toValue: 0.92,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+        ]).start(async () => {
             setVisible(false);
             await (0, telemetry_1.setTelemetryConsent)(granted);
             if (granted) {
@@ -76,37 +103,63 @@ const TelemetryConsentModal = () => {
         return null;
     return (<react_native_1.Modal transparent visible={visible} animationType="none" statusBarTranslucent>
       <react_native_1.View style={styles.overlay}>
-        <react_native_1.Animated.View style={[styles.card, { opacity: fadeAnim }]}>
-          <react_native_1.View style={styles.headerRow}>
-            <react_native_1.View style={styles.iconWrapper}>
-              <BrandCircleIcon_1.BrandCircleIcon size={40}/>
+        <react_native_1.Animated.View style={[
+            styles.card,
+            {
+                opacity: fadeAnim,
+                transform: [{ scale: scaleAnim }],
+            },
+        ]}>
+          {/* Top-Right Dismiss Icon Button */}
+          <react_native_1.TouchableOpacity style={styles.topCloseButton} onPress={() => handleDecision(false)} hitSlop={10} activeOpacity={0.7}>
+            <CloseSvg size={13} color="#64748B"/>
+          </react_native_1.TouchableOpacity>
+
+          {/* Centered Enlarged Square Brand Icon Header */}
+          <react_native_1.View style={styles.headerSection}>
+            <react_native_1.View style={styles.iconHaloRing}>
+              <BrandSquareIcon_1.BrandSquareIcon size={54}/>
             </react_native_1.View>
-            <react_native_1.View style={styles.titleContainer}>
-              <react_native_1.Text style={styles.title}>Help Improve In-App Inspector</react_native_1.Text>
-              <react_native_1.Text style={styles.subtitle}>Anonymous Diagnostic Insights</react_native_1.Text>
+
+            <react_native_1.Text style={styles.title}>Help Improve In-App Inspector</react_native_1.Text>
+            <react_native_1.Text style={styles.subtitle}>Anonymous Diagnostic Insights</react_native_1.Text>
+
+            {/* Subheading instruction hint badge */}
+            <react_native_1.View style={styles.hintBadge}>
+              <react_native_1.Text style={styles.hintBadgeText}>
+                ⚙️ You can enable or disable this anytime in Settings
+              </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
 
+          {/* Description */}
           <react_native_1.Text style={styles.description}>
             To help us continually enhance tooling performance and compatibility,
             would you mind sharing anonymous diagnostics (such as React Native
-            version, JavaScript engine, and platform architecture)?
+            version, JavaScript engine, and device architecture)?
           </react_native_1.Text>
 
+          {/* Privacy Callout Box */}
           <react_native_1.View style={styles.privacyBadge}>
+            <react_native_1.View style={styles.privacyShieldWrapper}>
+              <ShieldCheckSvg size={15} color="#7C3AED"/>
+            </react_native_1.View>
             <react_native_1.Text style={styles.privacyText}>
-              🔒 <react_native_1.Text style={{ fontWeight: '700' }}>Privacy Guaranteed:</react_native_1.Text> We
-              only collect non-identifiable environment metrics. No personal
-              data, tokens, or network request payloads are ever collected.
+              <react_native_1.Text style={styles.privacyHighlight}>Privacy Guaranteed:</react_native_1.Text> We
+              strictly collect non-identifiable technical metrics. No user data,
+              passwords, tokens, or network payload bodies are ever captured.
             </react_native_1.Text>
           </react_native_1.View>
 
+          {/* Enhanced Action Buttons with Icons */}
           <react_native_1.View style={styles.buttonRow}>
             <react_native_1.TouchableOpacity style={styles.declineButton} onPress={() => handleDecision(false)} activeOpacity={0.7}>
+              <CloseSvg size={12} color="#64748B"/>
               <react_native_1.Text style={styles.declineText}>Not Now</react_native_1.Text>
             </react_native_1.TouchableOpacity>
 
-            <react_native_1.TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.8}>
+            <react_native_1.TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.85}>
+              <CheckSvg size={13} color="#FFFFFF"/>
               <react_native_1.Text style={styles.allowText}>Allow & Share</react_native_1.Text>
             </react_native_1.TouchableOpacity>
           </react_native_1.View>
@@ -115,98 +168,192 @@ const TelemetryConsentModal = () => {
     </react_native_1.Modal>);
 };
 exports.TelemetryConsentModal = TelemetryConsentModal;
+const fontStack = react_native_1.Platform.select({
+    ios: {
+        fontFamily: 'System',
+    },
+    android: {
+        fontFamily: 'sans-serif',
+    },
+    default: {},
+});
 const styles = react_native_1.StyleSheet.create({
     overlay: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.65)',
+        backgroundColor: 'rgba(15, 23, 42, 0.56)',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 24,
+        paddingHorizontal: 20,
         zIndex: 999999,
     },
     card: {
         width: '100%',
-        maxWidth: 420,
-        backgroundColor: '#1E1F29',
-        borderRadius: 20,
-        padding: 22,
+        maxWidth: 356,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 24,
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.12)',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 10 },
-        shadowOpacity: 0.5,
-        shadowRadius: 20,
+        borderColor: '#E2E8F0',
+        paddingHorizontal: 20,
+        paddingTop: 22,
+        paddingBottom: 20,
+        alignItems: 'center',
+        shadowColor: '#0F172A',
+        shadowOffset: { width: 0, height: 16 },
+        shadowOpacity: 0.22,
+        shadowRadius: 32,
         elevation: 24,
     },
-    headerRow: {
-        flexDirection: 'row',
+    topCloseButton: {
+        position: 'absolute',
+        top: 14,
+        right: 14,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: '#F8FAFC',
+        justifyContent: 'center',
         alignItems: 'center',
-        marginBottom: 14,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        zIndex: 10,
     },
-    iconWrapper: {
-        marginRight: 14,
+    headerSection: {
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 4,
     },
-    titleContainer: {
-        flex: 1,
+    iconHaloRing: {
+        width: 66,
+        height: 66,
+        borderRadius: 20,
+        backgroundColor: '#FAF5FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1.5,
+        borderColor: '#F3E8FF',
+        marginBottom: 8,
+        shadowColor: '#7C3AED',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.16,
+        shadowRadius: 10,
+        elevation: 4,
     },
     title: {
         fontSize: 17,
-        fontWeight: '700',
-        color: '#FFFFFF',
-        letterSpacing: -0.2,
+        fontWeight: '800',
+        color: '#0F172A',
+        letterSpacing: -0.4,
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: 2,
+        ...fontStack,
     },
     subtitle: {
-        fontSize: 12,
-        color: AppColors_1.AppColors.purple || '#9055FF',
+        fontSize: 11.5,
         fontWeight: '600',
-        marginTop: 2,
+        color: '#7C3AED',
+        textAlign: 'center',
+        letterSpacing: 0.2,
+        marginBottom: 6,
+        ...fontStack,
+    },
+    hintBadge: {
+        backgroundColor: '#EDE9FE80',
+        borderWidth: 1,
+        borderColor: '#DDD6FE',
+        borderRadius: 7,
+        paddingHorizontal: 8,
+        paddingVertical: 2.5,
+        marginBottom: 8,
+    },
+    hintBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#6D28D9',
+        textAlign: 'center',
+        ...fontStack,
     },
     description: {
-        fontSize: 13,
-        lineHeight: 19,
-        color: 'rgba(255, 255, 255, 0.75)',
-        marginBottom: 14,
+        fontSize: 12,
+        lineHeight: 17.5,
+        color: '#475569',
+        textAlign: 'center',
+        marginBottom: 12,
+        paddingHorizontal: 2,
+        ...fontStack,
     },
     privacyBadge: {
-        backgroundColor: 'rgba(144, 85, 255, 0.12)',
-        borderRadius: 10,
-        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        backgroundColor: '#F8FAFC',
+        borderRadius: 12,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
         borderWidth: 1,
-        borderColor: 'rgba(144, 85, 255, 0.25)',
-        marginBottom: 20,
+        borderColor: '#E2E8F0',
+        marginBottom: 14,
+        width: '100%',
+    },
+    privacyShieldWrapper: {
+        marginRight: 7,
+        marginTop: 1,
     },
     privacyText: {
-        fontSize: 11,
-        lineHeight: 16,
-        color: '#D8C6FF',
+        flex: 1,
+        fontSize: 10.8,
+        lineHeight: 15,
+        color: '#475569',
+        ...fontStack,
+    },
+    privacyHighlight: {
+        fontWeight: '700',
+        color: '#1E293B',
     },
     buttonRow: {
         flexDirection: 'row',
-        justifyContent: 'flex-end',
+        justifyContent: 'space-between',
         alignItems: 'center',
-        gap: 12,
+        gap: 10,
+        width: '100%',
     },
     declineButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        borderRadius: 10,
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        paddingVertical: 11,
+        borderRadius: 12,
+        backgroundColor: '#F1F5F9',
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
     },
     declineText: {
         fontSize: 13,
         fontWeight: '600',
-        color: 'rgba(255, 255, 255, 0.7)',
+        color: '#475569',
+        ...fontStack,
     },
     allowButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        borderRadius: 10,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        paddingVertical: 11,
+        borderRadius: 12,
         backgroundColor: '#7C3AED',
+        shadowColor: '#7C3AED',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.28,
+        shadowRadius: 6,
+        elevation: 4,
     },
     allowText: {
         fontSize: 13,
         fontWeight: '700',
         color: '#FFFFFF',
+        ...fontStack,
     },
 });
 exports.default = exports.TelemetryConsentModal;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.0.2";
+export declare const LIB_VERSION = "2.0.4";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '2.0.2';
+exports.LIB_VERSION = '2.0.4';

package/dist/commonjs/helpers/telemetry.js

@@ -31,8 +31,8 @@ const constants_1 = require("../constants");
 const NativeInspector_1 = require("../native/NativeInspector");
 // ─── GA4 Measurement Protocol Configuration ──────────────────────────────────
 // Automatically replaced at build-time from .env by scripts/inject-telemetry.js
-exports.GA4_MEASUREMENT_ID = 'G-3QGMQVZX5V';
-exports.GA4_API_SECRET = 'C46RQZ3PTfmHDnLnvU3KIg';
+exports.GA4_MEASUREMENT_ID = 'G-XXXXXXXXXX';
+exports.GA4_API_SECRET = 'YOUR_GA4_API_SECRET';
 const GA4_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
 const CLIENT_ID_KEY = 'telemetry_client_id';
 // Stable session ID created once per JavaScript runtime instance
@@ -254,9 +254,9 @@ async function trackTelemetryEvent(eventName, params = {}, options) {
         return;
     // Don't send if credentials haven't been configured yet
     if (!exports.GA4_MEASUREMENT_ID ||
-        exports.GA4_MEASUREMENT_ID === 'G-3QGMQVZX5V' ||
+        exports.GA4_MEASUREMENT_ID === 'G-XXXXXXXXXX' ||
         !exports.GA4_API_SECRET ||
-        exports.GA4_API_SECRET === 'C46RQZ3PTfmHDnLnvU3KIg') {
+        exports.GA4_API_SECRET === 'YOUR_GA4_API_SECRET') {
         return;
     }
     try {