react-native-inapp-inspector 2.0.5 → 2.0.7

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

@@ -0,0 +1,571 @@
+import React, { useMemo, useState } from 'react';
+import { Alert, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { useInspector } from './InspectorContext';
+import TouchableScale from '../TouchableScale';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import { formatBytes, copyToClipboard } from '../../helpers';
+import { showToast } from '../../helpers/toast';
+import { DatabaseIcon, SearchIcon, ClearIcon, TrashIcon, EditIcon, PlusIcon, CopyIcon, ResetIcon, KeyIcon, } from '../NetworkIcons';
+export const StorageTab = React.memo(() => {
+    const { storageEntries, refreshStorageEntries, updateStorageEntry, deleteStorageEntry, clearAllStorageEntries, } = useInspector();
+    const [search, setSearch] = useState('');
+    const [editingItem, setEditingItem] = useState(null);
+    const [editValue, setEditValue] = useState('');
+    const [isAddingNew, setIsAddingNew] = useState(false);
+    const [newKey, setNewKey] = useState('');
+    const [newValue, setNewValue] = useState('');
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
+    const filteredEntries = useMemo(() => {
+        if (!search || search.trim().length === 0)
+            return storageEntries;
+        const term = search.toLowerCase().trim();
+        return storageEntries.filter(item => item.key.toLowerCase().includes(term) ||
+            item.value.toLowerCase().includes(term));
+    }, [storageEntries, search]);
+    const totalBytes = useMemo(() => storageEntries.reduce((acc, cur) => acc + (cur.sizeBytes || 0), 0), [storageEntries]);
+    const toggleExpand = (key) => {
+        setExpandedKeys(prev => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    };
+    const handleStartEdit = (item) => {
+        setEditingItem(item);
+        setEditValue(item.value);
+    };
+    const handleSaveEdit = async () => {
+        if (!editingItem)
+            return;
+        try {
+            await updateStorageEntry(editingItem.key, editValue);
+            showToast(`Updated "${editingItem.key}"`);
+            setEditingItem(null);
+        }
+        catch {
+            Alert.alert('Error', 'Failed to save value to storage.');
+        }
+    };
+    const handleCreateNew = async () => {
+        if (!newKey.trim()) {
+            Alert.alert('Invalid Key', 'Please enter a non-empty storage key.');
+            return;
+        }
+        try {
+            await updateStorageEntry(newKey.trim(), newValue);
+            showToast(`Saved key "${newKey.trim()}"`);
+            setIsAddingNew(false);
+            setNewKey('');
+            setNewValue('');
+        }
+        catch {
+            Alert.alert('Error', 'Failed to create storage item.');
+        }
+    };
+    const handleDelete = (key) => {
+        Alert.alert('Delete Storage Key', `Are you sure you want to delete "${key}"?`, [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Delete',
+                style: 'destructive',
+                onPress: async () => {
+                    await deleteStorageEntry(key);
+                    showToast(`Deleted "${key}"`);
+                },
+            },
+        ]);
+    };
+    const handleClearAll = () => {
+        Alert.alert('Clear All Storage', 'This will erase all saved keys and values in local storage. Are you sure?', [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Clear All',
+                style: 'destructive',
+                onPress: async () => {
+                    await clearAllStorageEntries();
+                    showToast('All storage cleared');
+                },
+            },
+        ]);
+    };
+    return (<View style={styles.container}>
+      {/* Top Metrics & Actions Header */}
+      <View style={styles.metricsBar}>
+        <View style={styles.metricsLeft}>
+          <View style={styles.metricItem}>
+            <DatabaseIcon size={13} color={AppColors.purple}/>
+            <Text style={styles.metricBold}>{storageEntries.length}</Text>
+            <Text style={styles.metricLabel}>Keys</Text>
+          </View>
+          <View style={styles.metricDivider}/>
+          <View style={styles.metricItem}>
+            <Text style={styles.metricBold}>{formatBytes(totalBytes)}</Text>
+            <Text style={styles.metricLabel}>Stored</Text>
+          </View>
+        </View>
+
+        <View style={styles.actionsRight}>
+          <TouchableScale onPress={refreshStorageEntries} hitSlop={8} style={styles.actionBtn}>
+            <ResetIcon size={14} color={AppColors.purple}/>
+          </TouchableScale>
+          <TouchableScale onPress={() => setIsAddingNew(true)} hitSlop={8} style={[styles.actionBtn, { backgroundColor: AppColors.purple }]}>
+            <PlusIcon size={14} color={AppColors.white}/>
+          </TouchableScale>
+          <TouchableScale onPress={handleClearAll} hitSlop={8} style={[styles.actionBtn, { borderColor: `${AppColors.errorColor}40` }]}>
+            <TrashIcon size={14} color={AppColors.errorColor}/>
+          </TouchableScale>
+        </View>
+      </View>
+
+      {/* Search Input */}
+      <View style={styles.searchRow}>
+        <View style={styles.searchBox}>
+          <SearchIcon size={14} color={AppColors.grayTextWeak}/>
+          <TextInput style={styles.searchInput} placeholder="Search storage key or value..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} autoCapitalize="none" autoCorrect={false}/>
+          {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={8}>
+              <ClearIcon size={14} color={AppColors.grayTextWeak}/>
+            </Pressable>)}
+        </View>
+      </View>
+
+      {/* Storage Entries List */}
+      <FlatList data={filteredEntries} keyExtractor={item => item.key} contentContainerStyle={styles.listContent} ListEmptyComponent={<View style={styles.emptyState}>
+            <DatabaseIcon size={36} color={AppColors.grayTextWeak}/>
+            <Text style={styles.emptyTitle}>No Storage Entries</Text>
+            <Text style={styles.emptySub}>
+              {search
+                ? `No keys matched "${search}"`
+                : 'No AsyncStorage or local key-value pairs stored yet.'}
+            </Text>
+          </View>} renderItem={({ item }) => {
+            const isExpanded = expandedKeys.has(item.key);
+            return (<View style={styles.card}>
+              {/* Card Header */}
+              <View style={styles.cardHeader}>
+                <View style={styles.keyRow}>
+                  <KeyIcon size={13} color={AppColors.purple}/>
+                  <Text style={styles.keyText} numberOfLines={1}>
+                    {item.key}
+                  </Text>
+                </View>
+
+                <View style={styles.badgeRow}>
+                  <View style={[
+                    styles.typeBadge,
+                    {
+                        backgroundColor: item.isJson
+                            ? `${AppColors.purple}18`
+                            : `${AppColors.emerald500}18`,
+                        borderColor: item.isJson
+                            ? `${AppColors.purple}40`
+                            : `${AppColors.emerald500}40`,
+                    },
+                ]}>
+                    <Text style={[
+                    styles.typeBadgeText,
+                    {
+                        color: item.isJson
+                            ? AppColors.purple
+                            : AppColors.emerald600,
+                    },
+                ]}>
+                      {item.isJson ? 'JSON' : 'STRING'}
+                    </Text>
+                  </View>
+                  <Text style={styles.sizeText}>
+                    {formatBytes(item.sizeBytes)}
+                  </Text>
+                </View>
+              </View>
+
+              {/* Value Box */}
+              <Pressable onPress={() => toggleExpand(item.key)} style={styles.valueContainer}>
+                <Text style={styles.valueText} numberOfLines={isExpanded ? undefined : 3}>
+                  {item.value}
+                </Text>
+              </Pressable>
+
+              {/* Card Actions */}
+              <View style={styles.cardFooter}>
+                <Text style={styles.footerHint}>
+                  {isExpanded ? 'Tap to collapse' : 'Tap to expand full value'}
+                </Text>
+                <View style={styles.cardActions}>
+                  <TouchableScale onPress={() => {
+                    copyToClipboard(item.value, 'Storage Value');
+                    showToast('Copied value!');
+                }} hitSlop={6} style={styles.cardActionBtn}>
+                    <CopyIcon size={12} color={AppColors.grayText}/>
+                    <Text style={styles.cardActionText}>Copy</Text>
+                  </TouchableScale>
+
+                  <TouchableScale onPress={() => handleStartEdit(item)} hitSlop={6} style={styles.cardActionBtn}>
+                    <EditIcon size={12} color={AppColors.purple}/>
+                    <Text style={[
+                    styles.cardActionText,
+                    { color: AppColors.purple },
+                ]}>
+                      Edit
+                    </Text>
+                  </TouchableScale>
+
+                  <TouchableScale onPress={() => handleDelete(item.key)} hitSlop={6} style={styles.cardActionBtn}>
+                    <TrashIcon size={12} color={AppColors.errorColor}/>
+                    <Text style={[
+                    styles.cardActionText,
+                    { color: AppColors.errorColor },
+                ]}>
+                      Delete
+                    </Text>
+                  </TouchableScale>
+                </View>
+              </View>
+            </View>);
+        }}/>
+
+      {/* Edit Storage Key Modal */}
+      <Modal visible={editingItem !== null} transparent animationType="fade">
+        <View style={styles.modalBackdrop}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalHeader}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <EditIcon size={16} color={AppColors.purple}/>
+                <Text style={styles.modalTitle}>Edit Storage Value</Text>
+              </View>
+              <Pressable onPress={() => setEditingItem(null)} hitSlop={10} style={styles.modalCloseBtn}>
+                <ClearIcon size={14} color={AppColors.grayText}/>
+              </Pressable>
+            </View>
+
+            <Text style={styles.modalKeyLabel} numberOfLines={1}>
+              Key: <Text style={{ color: AppColors.purple }}>{editingItem?.key}</Text>
+            </Text>
+
+            <TextInput style={styles.modalInput} multiline value={editValue} onChangeText={setEditValue} placeholder="Enter new string or JSON value..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <View style={styles.modalActions}>
+              <TouchableScale onPress={() => setEditingItem(null)} style={styles.modalCancelBtn}>
+                <Text style={styles.modalCancelText}>Cancel</Text>
+              </TouchableScale>
+              <TouchableScale onPress={handleSaveEdit} style={styles.modalSaveBtn}>
+                <Text style={styles.modalSaveText}>Save Changes</Text>
+              </TouchableScale>
+            </View>
+          </View>
+        </View>
+      </Modal>
+
+      {/* Add New Key Modal */}
+      <Modal visible={isAddingNew} transparent animationType="fade">
+        <View style={styles.modalBackdrop}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalHeader}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <PlusIcon size={16} color={AppColors.purple}/>
+                <Text style={styles.modalTitle}>Add New Storage Key</Text>
+              </View>
+              <Pressable onPress={() => setIsAddingNew(false)} hitSlop={10} style={styles.modalCloseBtn}>
+                <ClearIcon size={14} color={AppColors.grayText}/>
+              </Pressable>
+            </View>
+
+            <TextInput style={styles.modalSingleInput} value={newKey} onChangeText={setNewKey} placeholder="@storage_key_name" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <TextInput style={[styles.modalInput, { height: 110 }]} multiline value={newValue} onChangeText={setNewValue} placeholder="Value (string, number, or JSON)..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <View style={styles.modalActions}>
+              <TouchableScale onPress={() => setIsAddingNew(false)} style={styles.modalCancelBtn}>
+                <Text style={styles.modalCancelText}>Cancel</Text>
+              </TouchableScale>
+              <TouchableScale onPress={handleCreateNew} style={styles.modalSaveBtn}>
+                <Text style={styles.modalSaveText}>Save Key</Text>
+              </TouchableScale>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors.grayBackground,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    metricsLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    metricItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    metricBold: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+    },
+    metricLabel: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+    },
+    metricDivider: {
+        width: 1,
+        height: 14,
+        backgroundColor: AppColors.grayBorderSecondary,
+    },
+    actionsRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    actionBtn: {
+        width: 30,
+        height: 30,
+        borderRadius: 7,
+        backgroundColor: `${AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    searchRow: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    searchBox: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 36,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.primaryBlack,
+        padding: 0,
+    },
+    listContent: {
+        paddingHorizontal: 12,
+        paddingBottom: 40,
+        gap: 8,
+    },
+    card: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        padding: 12,
+        gap: 8,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    keyRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flex: 1,
+        marginRight: 8,
+    },
+    keyText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+    },
+    badgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    typeBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+    },
+    sizeText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors.grayTextWeak,
+    },
+    valueContainer: {
+        backgroundColor: `${AppColors.grayBackground}`,
+        borderRadius: 6,
+        padding: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors.grayBorderSecondary}80`,
+    },
+    valueText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayText,
+        lineHeight: 16,
+    },
+    cardFooter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 2,
+    },
+    footerHint: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+    },
+    cardActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    cardActionBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardActionText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors.grayText,
+    },
+    emptyState: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 60,
+        gap: 8,
+    },
+    emptyTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors.primaryBlack,
+    },
+    emptySub: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors.grayTextWeak,
+        textAlign: 'center',
+        maxWidth: 260,
+    },
+    modalBackdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+    },
+    modalCard: {
+        width: '100%',
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 16,
+        gap: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowRadius: 10,
+        elevation: 8,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    modalTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors.primaryBlack,
+    },
+    modalCloseBtn: {
+        padding: 4,
+    },
+    modalKeyLabel: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors.grayText,
+    },
+    modalSingleInput: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 38,
+    },
+    modalInput: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.primaryBlack,
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        padding: 10,
+        height: 140,
+        textAlignVertical: 'top',
+    },
+    modalActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 10,
+        marginTop: 4,
+    },
+    modalCancelBtn: {
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 8,
+        backgroundColor: `${AppColors.grayBorderSecondary}40`,
+    },
+    modalCancelText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.grayText,
+    },
+    modalSaveBtn: {
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 8,
+        backgroundColor: AppColors.purple,
+    },
+    modalSaveText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.white,
+    },
+});
+export default StorageTab;

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

@@ -4,11 +4,11 @@ import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, DatabaseIcon, DevicePhoneIcon, ShieldCheckIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, storageEntries, auditReport, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     const isReduxAvail = isReduxConnected();
     const isAnalyticsAvail = isAnalyticsConnected();
     return (<View style={styles.tabBarContainer}>
@@ -38,6 +38,24 @@ const TabBar = React.memo(() => {
                 count: 0,
                 icon: 'redux',
             },
+            {
+                key: 'storage',
+                label: 'Storage',
+                count: storageEntries.length,
+                icon: 'storage',
+            },
+            {
+                key: 'device',
+                label: 'Device',
+                count: 0,
+                icon: 'device',
+            },
+            {
+                key: 'audit',
+                label: 'Audit',
+                count: auditReport?.totalIssues || 0,
+                icon: 'audit',
+            },
             {
                 key: 'bundle',
                 label: 'Bundle',
@@ -58,7 +76,7 @@ const TabBar = React.memo(() => {
             },
         ]
             .filter(tab => {
-            if (!tabVisibility?.[tab.key])
+            if (!tabVisibility?.[tab.key] && activeTab !== tab.key)
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
                 return false;
@@ -95,6 +113,9 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<DevicePhoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'audit' && (<ShieldCheckIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}

package/dist/esm/components/NetworkIcons.d.ts

@@ -22,6 +22,7 @@ export declare const SizeIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const RequestIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const ResponseIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const HeadersIcon: ({ color }: IconProps) => React.JSX.Element;
+export declare const ReplayIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CopyIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const FetchIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TerminalIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -127,3 +128,14 @@ export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ChevronDownIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const DatabaseIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const DevicePhoneIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const FlagIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const EditIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const PlusIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CodeIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CpuIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const FingerprintIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MonitorIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ShieldCheckIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SparklesIcon: ({ color, size }: IconProps) => React.JSX.Element;