react-native-inapp-inspector 1.0.0

package/dist/commonjs/components/MetaAccordion.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Constants
+const constants_1 = require("../constants");
+// Custom Hooks
+const useAccordion_1 = __importDefault(require("../customHooks/useAccordion"));
+// Helpers
+const helpers_1 = require("../helpers");
+// Assets
+const NetworkIcons_1 = require("./NetworkIcons");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+const styles_1 = __importDefault(require("../styles"));
+const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) => {
+    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 260);
+    const isFailed = status === 0 || status == null;
+    return (<react_native_1.View style={styles_1.default.metaContainer}>
+      <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
+        <react_native_1.View style={styles_1.default.metaHeader}>
+          <react_native_1.Text style={styles_1.default.metaTitle}>Metadata</react_native_1.Text>
+          <react_native_1.Animated.View style={chevronStyle}>
+            <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+          </react_native_1.Animated.View>
+        </react_native_1.View>
+      </react_native_1.Pressable>
+
+      <react_native_1.Animated.View style={bodyStyle}>
+        <react_native_1.View style={styles_1.default.metaBody}>
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Triggered At</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={[
+            styles_1.default.metaValue,
+            { color: AppColors_1.AppColors.purple, fontSize: 12 },
+        ]}>
+              {triggeredAt}
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.StatusIcon color={AppColors_1.AppColors.grayTextWeak}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Status</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+            styles_1.default.statusChip,
+            {
+                borderColor: isFailed
+                    ? `${AppColors_1.AppColors.errorColor}40`
+                    : `${statusColor}40`,
+                backgroundColor: isFailed
+                    ? `${AppColors_1.AppColors.errorColor}15`
+                    : `${statusColor}15`,
+            },
+        ]}>
+              <react_native_1.Text style={[
+            styles_1.default.statusText,
+            { color: isFailed ? AppColors_1.AppColors.errorColor : statusColor },
+        ]}>
+                {isFailed ? 'Failed (Network Error)' : String(status)}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Duration</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.metaValueRow}>
+              {duration != null && !isFailed && (<react_native_1.View style={[
+                styles_1.default.perfBadge,
+                {
+                    backgroundColor: `${(0, helpers_1.getDurationColor)(duration)}15`,
+                    borderColor: `${(0, helpers_1.getDurationColor)(duration)}40`,
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.perfBadgeText,
+                { color: (0, helpers_1.getDurationColor)(duration) },
+            ]}>
+                    {duration < constants_1.DURATION_FAST_MS
+                ? 'Fast'
+                : duration < constants_1.DURATION_SLOW_MS
+                    ? 'Moderate'
+                    : 'Slow'}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              <react_native_1.Text style={styles_1.default.metaValue}>
+                {duration != null ? `${duration} ms` : '—'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.grayTextWeak}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Size</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.metaValue}>{size}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Animated.View>
+    </react_native_1.View>);
+};
+exports.default = MetaAccordion;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const MiniBarChart: ({ data, color, maxVal, }: {
+    data: number[];
+    color: string;
+    maxVal?: number;
+}) => React.JSX.Element;
+export default MiniBarChart;

package/dist/commonjs/components/MiniBarChart.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const MiniBarChart = ({ data, color, maxVal, }) => {
+    if (!data || data.length === 0)
+        return <react_native_svg_1.default width={40} height={16}/>;
+    const max = maxVal || Math.max(...data, 1);
+    const paddedData = data.length < 10
+        ? [...Array(10 - data.length).fill(0), ...data]
+        : data.slice(-10);
+    return (<react_native_svg_1.default width={40} height={16} viewBox="0 0 40 16">
+      {paddedData.map((val, i) => {
+            const h = Math.max((val / max) * 16, 2);
+            const opacity = val === 0 && maxVal === 1 ? 0.2 : 1;
+            return (<react_native_svg_1.Rect key={i} x={i * 4} y={16 - h} width={2.5} height={h} fill={color} rx={1} opacity={opacity}/>);
+        })}
+    </react_native_svg_1.default>);
+};
+exports.default = MiniBarChart;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const MiniLineChart: ({ data, color }: {
+    data: number[];
+    color: string;
+}) => React.JSX.Element;
+export default MiniLineChart;

package/dist/commonjs/components/MiniLineChart.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const MiniLineChart = ({ data, color }) => {
+    if (!data || data.length === 0)
+        return <react_native_svg_1.default width={40} height={16}/>;
+    const paddedData = data.length < 10
+        ? [...Array(10 - data.length).fill(data[0] || 0), ...data]
+        : data.slice(-10);
+    const max = Math.max(...paddedData, 1);
+    const min = Math.min(...paddedData, 0);
+    const range = max - min || 1;
+    const dx = 40 / 9;
+    const points = paddedData
+        .map((d, i) => `${i * dx},${14 - ((d - min) / range) * 12}`)
+        .join(' L ');
+    return (<react_native_svg_1.default width={40} height={16} viewBox="0 0 40 16">
+      <react_native_svg_1.Path d={`M ${points}`} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.default = MiniLineChart;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const EmptyRadarIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MapPinIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ScreenIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ExpandCollapseIcon: ({ isExpanded, color, size, }: any) => React.JSX.Element;
+export declare const SearchIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ClearIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ClockIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CalendarIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StatusIcon: ({ color }: any) => React.JSX.Element;
+export declare const SizeIcon: ({ color }: any) => React.JSX.Element;
+export declare const RequestIcon: ({ color }: any) => React.JSX.Element;
+export declare const ResponseIcon: ({ color }: any) => React.JSX.Element;
+export declare const HeadersIcon: ({ color }: any) => React.JSX.Element;
+export declare const CopyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FetchIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const TerminalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FailIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const TrashIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const HeaderPauseIcon: ({ isPaused, color, size, }: any) => React.JSX.Element;
+export declare const ExportIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SignalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DiffIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const GlobeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SortArrowIcon: ({ color, size, direction, }: any) => React.JSX.Element;
+export declare const ChevronIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FilterIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DownloadIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CloseWhite: ({ color, size }: any) => React.JSX.Element;
+export declare const WhiteBackNavigation: ({ color, size }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -0,0 +1,245 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+const EmptyRadarIcon = ({ color = AppColors_1.AppColors.purple, size = 32 }) => {
+    return (<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="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="11" r="3" stroke={color} strokeWidth="1.5"/>
+      <react_native_svg_1.Path d="M12 14v3" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.EmptyRadarIcon = EmptyRadarIcon;
+const MapPinIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="10" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.MapPinIcon = MapPinIcon;
+const ScreenIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Rect x="3" y="4" width="18" height="16" rx="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M3 8h18M8 20V8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ScreenIcon = ScreenIcon;
+const ExpandCollapseIcon = ({ isExpanded, color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {isExpanded ? (<react_native_svg_1.Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>) : (<react_native_svg_1.Path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>)}
+    </react_native_svg_1.default>);
+};
+exports.ExpandCollapseIcon = ExpandCollapseIcon;
+const SearchIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="11" cy="11" r="8" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Line x1="16.5" y1="16.5" x2="22" y2="22" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SearchIcon = SearchIcon;
+const ClearIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<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.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ClearIcon = ClearIcon;
+const ClockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Line x1="12" y1="12" x2="12" y2="7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="12" y1="12" x2="16" y2="14" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ClockIcon = ClockIcon;
+const CalendarIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Rect x="3" y="4" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="8" y1="2" x2="8" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="16" y1="2" x2="16" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CalendarIcon = CalendarIcon;
+const StatusIcon = ({ color = AppColors_1.AppColors.grayTextWeak }) => {
+    return (<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="12" cy="16" r="1" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.StatusIcon = StatusIcon;
+const SizeIcon = ({ color = AppColors_1.AppColors.grayTextWeak }) => {
+    return (<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 6h16M4 10h10M4 14h13M4 18h7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SizeIcon = SizeIcon;
+const RequestIcon = ({ color = AppColors_1.AppColors.offerPurple }) => {
+    return (<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.RequestIcon = RequestIcon;
+const ResponseIcon = ({ color = AppColors_1.AppColors.greenColor }) => {
+    return (<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M19 12H5M11 18l-6-6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ResponseIcon = ResponseIcon;
+const HeadersIcon = ({ color = AppColors_1.AppColors.skyBlue }) => {
+    return (<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 6h16M4 12h16M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.HeadersIcon = HeadersIcon;
+const CopyIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M9 9V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Rect x="3" y="7" width="10" height="14" rx="2" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.CopyIcon = CopyIcon;
+const FetchIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M8 9l3 3-3 3M13 15h3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.FetchIcon = FetchIcon;
+const TerminalIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 17l6-6-6-6M12 19h8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TerminalIcon = TerminalIcon;
+const CheckIcon = ({ color = AppColors_1.AppColors.greenColor, size = 14 }) => {
+    return (<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.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CheckIcon = CheckIcon;
+const FailIcon = ({ color = AppColors_1.AppColors.errorColor, size = 10 }) => {
+    return (<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="3" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.FailIcon = FailIcon;
+const TrashIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TrashIcon = TrashIcon;
+const HeaderPauseIcon = ({ isPaused, color = AppColors_1.AppColors.primaryLight, size = 20, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {isPaused ? (<react_native_svg_1.Path d="M5 3l14 9-14 9V3z" fill={color}/>) : (<react_native_svg_1.Path d="M6 5h3v14H6V5zm9 0h3v14h-3V5z" fill={color}/>)}
+    </react_native_svg_1.default>);
+};
+exports.HeaderPauseIcon = HeaderPauseIcon;
+const ExportIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ExportIcon = ExportIcon;
+const SignalIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M2 20h.01M7 20v-4M12 20v-8M17 20V8M22 20V4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SignalIcon = SignalIcon;
+const DiffIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M7 8h10M12 3v10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M7 19h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.DiffIcon = DiffIcon;
+const GlobeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M12 2C8 7 8 17 12 22M12 2c4 5 4 15 0 20M2 12h20" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.GlobeIcon = GlobeIcon;
+const SortArrowIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 20, direction = 'down', }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {direction === 'down' ? (<>
+          <react_native_svg_1.Path d="M4 6h10M4 12h7M4 18h4" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+          <react_native_svg_1.Path d="M18 6v12m0 0l-3-3m3 3l3-3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </>) : (<>
+          <react_native_svg_1.Path d="M4 6h4M4 12h7M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+          <react_native_svg_1.Path d="M18 18V6m0 0l-3 3m3-3l3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </>)}
+    </react_native_svg_1.default>);
+};
+exports.SortArrowIcon = SortArrowIcon;
+const ChevronIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<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>);
+};
+exports.ChevronIcon = ChevronIcon;
+const FilterIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 18, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 6h16M7 12h10M10 18h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.FilterIcon = FilterIcon;
+const DownloadIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.DownloadIcon = DownloadIcon;
+const CloseWhite = ({ color = '#FFFFFF', size = 20 }) => {
+    return (<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" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CloseWhite = CloseWhite;
+const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.WhiteBackNavigation = WhiteBackNavigation;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SectionHeaderProps } from '../types';
+declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }: SectionHeaderProps) => React.JSX.Element;
+export default SectionHeader;

package/dist/commonjs/components/SectionHeader.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+// Components
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+// Assets
+const NetworkIcons_1 = require("./NetworkIcons");
+// Stylesheet
+const styles_1 = __importDefault(require("../styles"));
+const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }) => {
+    const isOpen = expanded === undefined ? false : !!expanded;
+    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(chevronAnim, {
+            toValue: isOpen ? 1 : 0,
+            duration: 220,
+            useNativeDriver: true,
+        }).start();
+    }, [isOpen]);
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
+    return (<react_native_1.View style={styles_1.default.sectionHeaderGradient}>
+      <react_native_1.View style={styles_1.default.sectionHeaderRow}>
+        <react_native_1.Pressable style={styles_1.default.sectionTitleRow} onPress={onToggleExpand} hitSlop={12}>
+          {title === 'Request' || title === 'API' ? (<NetworkIcons_1.RequestIcon color={AppColors_1.AppColors.offerPurple}/>) : title === 'Response' ? (<NetworkIcons_1.ResponseIcon color={AppColors_1.AppColors.greenColor}/>) : (<NetworkIcons_1.HeadersIcon color={AppColors_1.AppColors.skyBlue}/>)}
+          <react_native_1.Text style={styles_1.default.sectionTitle}>{title}</react_native_1.Text>
+        </react_native_1.Pressable>
+        <react_native_1.View style={styles_1.default.sectionHeaderActions}>
+          {showDiff && (<TouchableScale_1.default onPress={onToggleDiff} hitSlop={12} style={[
+                styles_1.default.iconSquareBtn,
+                isDiffing ? styles_1.default.iconSquareBtnActive : null,
+            ]}>
+              <NetworkIcons_1.DiffIcon color={isDiffing ? AppColors_1.AppColors.skyBlue : AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </TouchableScale_1.default>)}
+          <CopyButton_1.default value={value} label={title}/>
+          <TouchableScale_1.default onPress={onToggleExpand} hitSlop={12} style={styles_1.default.iconSquareBtn}>
+            <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
+            </react_native_1.Animated.View>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.default = SectionHeader;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SourcePageCardProps } from '../types';
+declare const SourcePageCard: ({ routeInfo }: SourcePageCardProps) => React.JSX.Element;
+export default SourcePageCard;