react-native-inapp-inspector 1.0.3 → 1.0.5

package/README.md

@@ -17,12 +17,12 @@ A premium, self-contained, and interactive in-app debugger for React Native appl
 
 ## Installation
 
-Install the package and its peer dependencies in your React Native project:
+Install the package as a development dependency in your React Native project:
 
 ```bash
-npm install react-native-inapp-inspector
+npm install --save-dev react-native-inapp-inspector
 # OR
-yarn add react-native-inapp-inspector
+yarn add -D react-native-inapp-inspector
 ```
 
 ### Peer Dependencies

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -210,8 +210,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = react_native_1.StyleSheet.create({
     container: {
-        paddingHorizontal: 16,
-        paddingVertical: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 3,
     },
     gapContainer: {
         alignItems: 'center',
@@ -228,7 +228,7 @@ const cardStyles = react_native_1.StyleSheet.create({
         borderRadius: 8,
         borderWidth: 1,
         borderColor: '#EFEFEF',
-        padding: 12,
+        padding: 8,
         shadowColor: '#000',
         shadowOpacity: 0.03,
         shadowRadius: 3,
@@ -240,11 +240,11 @@ const cardStyles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 8,
+        marginBottom: 6,
     },
     nameBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
         borderRadius: 6,
         borderWidth: 1,
     },
@@ -279,8 +279,8 @@ const cardStyles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: AppColors_1.AppColors.grayBackground,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.grayBorderSecondary,
@@ -300,8 +300,8 @@ const cardStyles = react_native_1.StyleSheet.create({
         backgroundColor: '#FFE4E6',
         borderColor: '#FCC2D7',
         borderWidth: 1,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
         borderRadius: 4,
     },
     duplicateText: {

package/dist/commonjs/components/CodeSnippet.js

@@ -32,9 +32,18 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
 const escapeRegExp = (string) => {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
@@ -135,7 +144,7 @@ const formatJS = (js) => {
 };
 const tokenizeJS = (text) => {
     const tokens = [];
-    const regex = /(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(\b(?:const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield|let)\b)|(\b(?:console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;
+    const regex = /(\/\/.*|\/\*[\s\S]*?\*\/)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\'|\`(?:\\.|[^\`\\])*\`)|(\b(const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield)\b)|(\b(console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;
     let lastIndex = 0;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -201,7 +210,7 @@ const tokenizeCSS = (text) => {
 };
 const tokenizeHTML = (text) => {
     const tokens = [];
-    const regex = /(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|([a-zA-Z0-9:-]+(?=\s*=))/g;
+    const regex = /(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|([a-zA-Z0-9:-]+(?=\s*=))/g;
     let lastIndex = 0;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -256,7 +265,13 @@ const getStyleForType = (type) => {
             return styles.plain;
     }
 };
-const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, search, }) => {
+const ArrowUpIcon = ({ color = '#64748B', size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const ArrowDownIcon = ({ color = '#64748B', size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, search, isActiveMatch, }) => {
     const tokens = (0, react_1.useMemo)(() => {
         if (language === 'html')
             return tokenizeHTML(line);
@@ -279,10 +294,10 @@ const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, searc
             })}
         </react_native_1.Text>);
     };
-    return (<react_native_1.View style={styles.lineRow}>
+    return (<react_native_1.View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
         {/* Gutter Line Number */}
-        <react_native_1.View style={styles.gutter}>
-          <react_native_1.Text style={styles.lineNumber}>{lineIndex + 1}</react_native_1.Text>
+        <react_native_1.View style={[styles.gutter, isActiveMatch && styles.activeMatchGutter]}>
+          <react_native_1.Text style={[styles.lineNumber, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</react_native_1.Text>
         </react_native_1.View>
 
         {/* Highlighted Code Line */}
@@ -295,10 +310,27 @@ const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, searc
         </react_native_1.View>
       </react_native_1.View>);
 });
-const CodeSnippet = ({ code, language, search = '', }) => {
+const CodeSnippet = ({ code, language, }) => {
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [debouncedQuery, setDebouncedQuery] = (0, react_1.useState)('');
+    const [currentMatchIdx, setCurrentMatchIdx] = (0, react_1.useState)(-1);
+    const [visibleLinesCount, setVisibleLinesCount] = (0, react_1.useState)(200);
+    const flatListRef = (0, react_1.useRef)(null);
+    // Debounce search query updates
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(searchQuery);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
+    // If code is extremely large (e.g. > 150KB), skip the pretty printers
+    // to avoid blocking the single JS thread.
     const formattedCode = (0, react_1.useMemo)(() => {
         if (!code)
             return '';
+        if (code.length > 150000) {
+            return code;
+        }
         if (language === 'html')
             return formatHTML(code);
         if (language === 'css')
@@ -312,9 +344,135 @@ const CodeSnippet = ({ code, language, search = '', }) => {
             return [];
         return formattedCode.split(/\r?\n/);
     }, [formattedCode]);
-    const renderLine = ({ item, index }) => (<CodeSnippetLine line={item} lineIndex={index} language={language} search={search}/>);
-    return (<react_native_1.View style={styles.container}>
-      <react_native_1.FlatList data={lines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={50} windowSize={10} initialNumToRender={30} removeClippedSubviews={react_native_1.Platform.OS === 'android'}/>
+    // Find all line indices matching the search query
+    const matches = (0, react_1.useMemo)(() => {
+        if (!debouncedQuery.trim() || debouncedQuery.length < 2)
+            return [];
+        const query = debouncedQuery.toLowerCase();
+        const indices = [];
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i].toLowerCase().includes(query)) {
+                indices.push(i);
+            }
+        }
+        return indices;
+    }, [debouncedQuery, lines]);
+    // Reset scroll and states on code/language changes
+    (0, react_1.useEffect)(() => {
+        setVisibleLinesCount(200);
+        setSearchQuery('');
+        setCurrentMatchIdx(-1);
+    }, [code, language]);
+    // Auto-scroll to the first match when search query returns matches
+    (0, react_1.useEffect)(() => {
+        if (matches.length > 0) {
+            setCurrentMatchIdx(0);
+            scrollToMatch(0);
+        }
+        else {
+            setCurrentMatchIdx(-1);
+        }
+    }, [matches]);
+    const scrollToMatch = (matchIdx) => {
+        if (matches.length === 0 || matchIdx < 0 || matchIdx >= matches.length)
+            return;
+        const lineIdx = matches[matchIdx];
+        // Ensure the targeted index is loaded in FlatList
+        if (lineIdx >= visibleLinesCount) {
+            setVisibleLinesCount(lineIdx + 100);
+        }
+        // Schedule scroll after state has applied
+        setTimeout(() => {
+            try {
+                flatListRef.current?.scrollToIndex({
+                    index: lineIdx,
+                    animated: true,
+                    viewPosition: 0.5,
+                });
+            }
+            catch (e) {
+                // Fallback recovery is handled by onScrollToIndexFailed
+            }
+        }, 100);
+    };
+    const onScrollToIndexFailed = (error) => {
+        flatListRef.current?.scrollToOffset({
+            offset: error.averageItemLength * error.index,
+            animated: true,
+        });
+        setTimeout(() => {
+            try {
+                flatListRef.current?.scrollToIndex({
+                    index: error.index,
+                    animated: true,
+                    viewPosition: 0.5,
+                });
+            }
+            catch (err) {
+                console.warn('Scroll to line index failed after fallback retry:', err);
+            }
+        }, 120);
+    };
+    const handleNextMatch = () => {
+        if (matches.length === 0)
+            return;
+        const nextIdx = (currentMatchIdx + 1) % matches.length;
+        setCurrentMatchIdx(nextIdx);
+        scrollToMatch(nextIdx);
+    };
+    const handlePrevMatch = () => {
+        if (matches.length === 0)
+            return;
+        const prevIdx = (currentMatchIdx - 1 + matches.length) % matches.length;
+        setCurrentMatchIdx(prevIdx);
+        scrollToMatch(prevIdx);
+    };
+    const visibleLines = (0, react_1.useMemo)(() => {
+        return lines.slice(0, visibleLinesCount);
+    }, [lines, visibleLinesCount]);
+    const handleEndReached = () => {
+        if (visibleLinesCount < lines.length) {
+            setVisibleLinesCount(prev => Math.min(prev + 150, lines.length));
+        }
+    };
+    const renderLine = ({ item, index }) => {
+        const isActiveMatch = matches.length > 0 && currentMatchIdx >= 0 && index === matches[currentMatchIdx];
+        return (<CodeSnippetLine line={item} lineIndex={index} language={language} search={debouncedQuery} isActiveMatch={isActiveMatch}/>);
+    };
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Search Header Row */}
+      <react_native_1.View style={styles.searchRow}>
+        <react_native_1.View style={styles.searchBar}>
+          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
+          <react_native_1.TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+
+          {/* Matches Info */}
+          {debouncedQuery.length >= 2 && (<react_native_1.Text style={styles.matchCountText}>
+              {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
+            </react_native_1.Text>)}
+
+          {searchQuery.length > 0 && (<react_native_1.Pressable onPress={() => setSearchQuery('')} hitSlop={8} style={styles.clearBtn}>
+              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+
+        {/* Up / Down Arrow Navigation Buttons */}
+        {matches.length > 0 && (<react_native_1.View style={styles.navArrowsGroup}>
+            <TouchableScale_1.default onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
+              <ArrowUpIcon color="#475569" size={14}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
+              <ArrowDownIcon color="#475569" size={14}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>)}
+
+        <CopyButton_1.default value={code} label={`${language.toUpperCase()} Source`}/>
+      </react_native_1.View>
+
+      {/* Code Snippet list container */}
+      <react_native_1.View style={styles.container}>
+        <react_native_1.FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={react_native_1.Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
+      </react_native_1.View>
     </react_native_1.View>);
 };
 const monoFont = react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace';
@@ -327,12 +485,69 @@ const styles = react_native_1.StyleSheet.create({
         borderColor: '#E2E8F0',
         overflow: 'hidden',
     },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 6,
+        gap: 8,
+    },
+    searchBar: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        paddingHorizontal: 8,
+        height: 32,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: '#0F172A',
+        marginLeft: 6,
+        paddingVertical: 0,
+    },
+    matchCountText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: '#64748B',
+        marginHorizontal: 6,
+        backgroundColor: '#F1F5F9',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    clearBtn: {
+        padding: 4,
+    },
+    navArrowsGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        height: 32,
+        paddingHorizontal: 2,
+    },
+    navArrowBtn: {
+        padding: 5,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     lineRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
         minHeight: 20,
         paddingVertical: 1,
     },
+    activeMatchRow: {
+        backgroundColor: 'rgba(234, 179, 8, 0.15)',
+    },
     gutter: {
         width: 40,
         backgroundColor: '#F1F5F9',
@@ -343,11 +558,19 @@ const styles = react_native_1.StyleSheet.create({
         paddingRight: 6,
         paddingTop: 1,
     },
+    activeMatchGutter: {
+        backgroundColor: 'rgba(234, 179, 8, 0.25)',
+        borderRightColor: 'rgba(234, 179, 8, 0.4)',
+    },
     lineNumber: {
         fontFamily: monoFont,
         fontSize: 9,
         color: '#94A3B8',
     },
+    activeMatchLineNumber: {
+        color: '#854D0E',
+        fontWeight: 'bold',
+    },
     codeLine: {
         flex: 1,
         paddingLeft: 10,

package/dist/commonjs/components/ConsoleLogCard.js

@@ -99,6 +99,52 @@ const getJsonPreviewText = (data) => {
         };
     }
 };
+const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
+    if (!message)
+        return null;
+    const prefixRegex = /^((?:\[[^\]]+\]\s*)+)/;
+    const match = message.match(prefixRegex);
+    if (match) {
+        const fullPrefix = match[1];
+        const remainingText = message.substring(fullPrefix.length);
+        const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
+        const getTagColor = (tag) => {
+            const cleanTag = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            if (cleanTag === 'API')
+                return '#0284C7';
+            if (cleanTag === 'TEST')
+                return '#16A34A';
+            if (cleanTag === 'APP')
+                return '#4F46E5';
+            if (cleanTag === 'DETAILS')
+                return '#7C3AED';
+            if (cleanTag === 'WEBVIEW')
+                return '#EA580C';
+            if (cleanTag === 'MOCK REDUX' || cleanTag === 'REDUX')
+                return '#DB2777';
+            let hash = 0;
+            for (let i = 0; i < cleanTag.length; i++) {
+                hash = cleanTag.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            const colors = ['#0891B2', '#0D9488', '#2563EB', '#D97706', '#E11D48', '#8B5CF6'];
+            return colors[Math.abs(hash) % colors.length];
+        };
+        return (<react_native_1.Text style={textStyle} numberOfLines={numberOfLines}>
+        {tags.map((tag, idx) => {
+                const color = getTagColor(tag);
+                return (<react_native_1.Text key={idx} style={{
+                        fontWeight: 'bold',
+                        color: color,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    }}>
+              {tag}{' '}
+            </react_native_1.Text>);
+            })}
+        <HighlightText_1.default text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} detectLinks={true}/>
+      </react_native_1.Text>);
+    }
+    return (<HighlightText_1.default text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+};
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
     const [expanded, setExpanded] = (0, react_1.useState)(false);
     const jsonContent = getJsonContent(item.message);
@@ -255,7 +301,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         <react_native_1.View style={styles.cardBody}>
           {jsonContent ? (<>
               {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-                  <HighlightText_1.default text={jsonContent.header} search={searchStr} style={styles.messageText} highlightStyle={styles.highlight} numberOfLines={numLines} detectLinks={true}/>
+                  {getLogMessageWithBadges(jsonContent.header, searchStr, styles.messageText, styles.highlight, numLines)}
                 </react_native_1.Pressable>) : null}
               {expanded ? (<react_native_1.View style={styles.jsonContainer}>
                   <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
@@ -263,7 +309,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                   <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={styles.jsonPreviewText} highlightStyle={styles.highlight} detectLinks={true}/>
                 </react_native_1.Pressable>)}
             </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-              <HighlightText_1.default text={item.message} search={searchStr} style={styles.messageText} highlightStyle={styles.highlight} numberOfLines={numLines} detectLinks={true}/>
+              {getLogMessageWithBadges(item.message, searchStr, styles.messageText, styles.highlight, numLines)}
             </react_native_1.Pressable>)}
           {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
               <react_native_1.Text style={styles.seeMoreText}>
@@ -280,8 +326,8 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
 });
 const styles = react_native_1.StyleSheet.create({
     container: {
-        paddingHorizontal: 16,
-        paddingVertical: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 3,
     },
     card: {
         alignSelf: 'stretch',
@@ -289,7 +335,7 @@ const styles = react_native_1.StyleSheet.create({
         borderRadius: 8,
         borderWidth: 1,
         borderColor: '#EFEFEF',
-        padding: 12,
+        padding: 8,
         shadowColor: '#000',
         shadowOpacity: 0.03,
         shadowRadius: 3,
@@ -302,7 +348,7 @@ const styles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 8,
+        marginBottom: 6,
     },
     headerLeft: {
         flexDirection: 'row',
@@ -336,10 +382,10 @@ const styles = react_native_1.StyleSheet.create({
         maxWidth: '50%',
     },
     cardBody: {
-        marginTop: 8,
+        marginTop: 6,
         backgroundColor: '#FFFFFF',
-        paddingHorizontal: 10,
-        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
         borderRadius: 6,
         borderWidth: 1,
         borderColor: '#EBECEF',

package/dist/commonjs/components/CopyButton.js

@@ -49,7 +49,8 @@ const styles_1 = __importDefault(require("../styles"));
 const CopyButton = ({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const handlePress = () => {
-        (0, helpers_1.copyToClipboard)(value, label);
+        const resolvedValue = typeof value === 'function' ? value() : value;
+        (0, helpers_1.copyToClipboard)(resolvedValue, label);
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
     };

package/dist/commonjs/components/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    onClose?: () => void;
+    onReset?: () => void;
+    fallbackType?: 'modal' | 'inline';
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private handleReset;
+    private handleCopyTrace;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+}
+export default ErrorBoundary;