react-native-xenon 0.5.1 → 0.7.0

package/src/ui/Xenon.tsx

@@ -1,6 +1,6 @@
 import { enableMapSet } from 'immer';
 import { createRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
+import { Animated, Platform, StyleSheet, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useImmer } from 'use-immer';
 import MainContext from '../contexts/MainContext';
@@ -9,6 +9,7 @@ import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
 import { DebuggerPanel, type DebuggerState } from '../types';
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
+import { FullWindowOverlay } from 'react-native-screens';
 
 namespace Xenon {
   interface Methods {
@@ -25,115 +26,130 @@ namespace Xenon {
   }
 
   enableMapSet();
-
   const ref = createRef<Methods>();
 
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       ...StyleSheet.absoluteFillObject,
+      pointerEvents: 'box-none',
       top: undefined,
       bottom: undefined,
-      zIndex: 9999,
+      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       backgroundColor: colors.lightGray,
+      borderBottomColor: colors.gray,
+      borderBottomWidth: StyleSheet.hairlineWidth,
     },
     safeArea: {
       flex: 1,
     },
   });
 
-  const Debugger = ({
-    autoInspectNetworkEnabled = true,
-    autoInspectConsoleEnabled = true,
-    bubbleSize = 40,
-    idleBubbleOpacity = 0.5,
-  }: Props) => {
-    const { width, height } = useWindowDimensions();
-    const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(height) }));
-
-    const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
-      visibility: 'hidden',
-      position: 'bottom',
-      selectedPanel: DebuggerPanel.Network,
-      detailsData: null,
-    });
-
-    const detailsShown = useMemo(
-      () => !debuggerState.selectedPanel && !!debuggerState.detailsData,
-      [debuggerState.detailsData, debuggerState.selectedPanel],
-    );
-
-    const containerStyle = useMemo(
-      () => [
-        styles.container,
-        { [debuggerState.position]: 0, height: Math.min(width, height) * 0.75 },
-      ],
-      [debuggerState.position, height, width],
-    );
-
-    const networkInterceptor = useNetworkInterceptor({
-      autoEnabled: autoInspectNetworkEnabled,
-    });
-
-    const consoleInterceptor = useConsoleInterceptor({
-      autoEnabled: autoInspectConsoleEnabled,
-    });
-
-    useImperativeHandle(ref, () => {
-      const changeVisibility = (condition: boolean, value: DebuggerState['visibility']) => {
-        if (!condition) return;
-
-        setDebuggerState(draft => {
-          draft.visibility = value;
-        });
-      };
-
-      return {
-        isVisible() {
-          return debuggerState.visibility !== 'hidden';
-        },
-        show() {
-          changeVisibility(!this.isVisible(), 'bubble');
-        },
-        hide() {
-          changeVisibility(this.isVisible(), 'hidden');
-        },
-      };
-    }, [debuggerState.visibility, setDebuggerState]);
-
-    return (
-      <MainContext.Provider
-        value={{ debuggerState, setDebuggerState, networkInterceptor, consoleInterceptor }}
-      >
-        {debuggerState.visibility === 'bubble' && (
-          <Bubble
-            bubbleSize={bubbleSize}
-            idleBubbleOpacity={idleBubbleOpacity}
-            pan={pan}
-            screenWidth={width}
-            screenHeight={height}
-          />
-        )}
-
-        {debuggerState.visibility === 'panel' && (
-          <SafeAreaProvider style={containerStyle}>
-            <SafeAreaView style={styles.safeArea}>
-              <DebuggerHeader />
-              {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
-              {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
-              {detailsShown && <DetailsViewer />}
-            </SafeAreaView>
-          </SafeAreaProvider>
-        )}
-      </MainContext.Provider>
-    );
-  };
-
   export const isVisible = () => ref.current?.isVisible() ?? false;
   export const show = (): void => ref.current?.show();
   export const hide = (): void => ref.current?.hide();
 
-  export const Component = memo(Debugger);
+  const Debugger = memo(
+    ({
+      autoInspectNetworkEnabled = true,
+      autoInspectConsoleEnabled = true,
+      bubbleSize = 40,
+      idleBubbleOpacity = 0.5,
+    }: Props) => {
+      const { width, height } = useWindowDimensions();
+      const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(height) }));
+
+      const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
+        visibility: 'hidden',
+        position: 'bottom',
+        selectedPanel: DebuggerPanel.Network,
+        detailsData: null,
+      });
+
+      const detailsShown = useMemo(
+        () => !debuggerState.selectedPanel && !!debuggerState.detailsData,
+        [debuggerState.detailsData, debuggerState.selectedPanel],
+      );
+
+      const containerStyle = useMemo(
+        () => [
+          styles.container,
+          { [debuggerState.position]: 0, height: Math.min(width, height) * 0.75 },
+        ],
+        [debuggerState.position, height, width],
+      );
+
+      const networkInterceptor = useNetworkInterceptor({
+        autoEnabled: autoInspectNetworkEnabled,
+      });
+
+      const consoleInterceptor = useConsoleInterceptor({
+        autoEnabled: autoInspectConsoleEnabled,
+      });
+
+      useImperativeHandle(ref, () => {
+        const changeVisibility = (condition: boolean, value: DebuggerState['visibility']) => {
+          if (!condition) return;
+
+          setDebuggerState(draft => {
+            draft.visibility = value;
+          });
+        };
+
+        return {
+          isVisible() {
+            return debuggerState.visibility !== 'hidden';
+          },
+          show() {
+            changeVisibility(!this.isVisible(), 'bubble');
+          },
+          hide() {
+            changeVisibility(this.isVisible(), 'hidden');
+          },
+        };
+      }, [debuggerState.visibility, setDebuggerState]);
+
+      return (
+        <MainContext.Provider
+          value={{ debuggerState, setDebuggerState, networkInterceptor, consoleInterceptor }}
+        >
+          {debuggerState.visibility === 'bubble' && (
+            <Bubble
+              bubbleSize={bubbleSize}
+              idleBubbleOpacity={idleBubbleOpacity}
+              pan={pan}
+              screenWidth={width}
+              screenHeight={height}
+            />
+          )}
+
+          {debuggerState.visibility === 'panel' && (
+            <SafeAreaProvider style={containerStyle}>
+              <SafeAreaView style={styles.safeArea}>
+                <DebuggerHeader />
+                {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
+                {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
+                {detailsShown && <DetailsViewer />}
+              </SafeAreaView>
+            </SafeAreaProvider>
+          )}
+        </MainContext.Provider>
+      );
+    },
+  );
+
+  export function Component(props: Props) {
+    if (Platform.OS === 'ios') {
+      return (
+        <FullWindowOverlay>
+          <Debugger {...props} />
+        </FullWindowOverlay>
+      );
+    }
+
+    return <Debugger {...props} />;
+  }
+
   Component.displayName = 'Xenon';
 }
 

package/src/ui/components/details/LogMessageDetails.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

package/src/ui/components/details/NetworkRequestDetails.tsx

@@ -157,7 +157,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
   text: {

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -7,6 +7,8 @@ import icons from '../../../theme/icons';
 import { DebuggerPanel, NetworkType, type DetailTab } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
 
+let isSharing = false;
+
 export default function DebuggerHeader() {
   const {
     debuggerState: { detailsData, selectedPanel },
@@ -62,16 +64,28 @@ export default function DebuggerHeader() {
           <>
             <DebuggerHeaderItem
               content={icons.share}
-              onPress={() => {
-                if (detailsData.data.type === NetworkType.WS) return;
-                Share.share({
-                  message: convertToCurl(
-                    detailsData.data.method,
-                    detailsData.data.url,
-                    detailsData.data.requestHeaders,
-                    detailsData.data.body,
-                  ),
-                });
+              onPress={async () => {
+                if (isSharing || detailsData.data.type === NetworkType.WS) return;
+
+                try {
+                  isSharing = true;
+                  setDebuggerState(draft => {
+                    draft.visibility = 'bubble';
+                  });
+
+                  await Share.share({
+                    message: convertToCurl(
+                      detailsData.data.method,
+                      detailsData.data.url,
+                      detailsData.data.requestHeaders,
+                      detailsData.data.body,
+                    ),
+                  });
+                } catch (error) {
+                  // Handle error
+                } finally {
+                  isSharing = false;
+                }
               }}
             />
 
@@ -226,13 +240,17 @@ export default function DebuggerHeader() {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 0,
+    borderTopColor: colors.gray,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.gray,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
   contentContainer: {
     padding: 8,
     columnGap: 8,
   },
   divider: {
-    width: 1,
+    width: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

package/src/ui/components/items/DebuggerHeaderItem.tsx

@@ -61,12 +61,13 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 14,
-    lineHeight: 17,
-    fontWeight: '500',
+    lineHeight: 18,
+    fontWeight: '600',
     color: colors.black,
   },
   icon: {
-    width: 17,
-    height: 17,
+    width: 18,
+    height: 18,
+    tintColor: colors.black,
   },
 });

package/src/ui/components/panels/ConsolePanel.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

package/src/ui/components/panels/NetworkPanel.tsx

@@ -9,7 +9,6 @@ import {
   type ID,
   type WebSocketRequest,
 } from '../../../types';
-import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
 const Separator = () => <View style={styles.divider} />;
@@ -46,17 +45,14 @@ export default function NetworkPanel() {
   );
 
   return (
-    <>
-      <NetworkPanelHeader />
-      <FlatList
-        inverted
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={([key]) => key}
-        ItemSeparatorComponent={Separator}
-        style={styles.container}
-      />
-    </>
+    <FlatList
+      inverted
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={([key]) => key}
+      ItemSeparatorComponent={Separator}
+      style={styles.container}
+    />
   );
 }
 
@@ -66,7 +62,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

package/lib/commonjs/ui/components/headers/NetworkPanelHeader.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NetworkPanelHeader;
-var _reactNative = require("react-native");
-var _colors = _interopRequireDefault(require("../../../theme/colors"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function NetworkPanelHeader() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerColumn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Method"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.headerColumn, styles.headerPathColumn],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Path"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.headerColumn, styles.headerDurationColumn],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Duration"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerColumn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Status"
-      })
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    marginHorizontal: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: _colors.default.gray,
-    borderRadius: 4
-  },
-  headerPathColumn: {
-    flex: 5
-  },
-  headerDurationColumn: {
-    flex: 2
-  },
-  headerColumn: {
-    flex: 1.5,
-    flexShrink: 1,
-    paddingVertical: 4,
-    paddingLeft: 8
-  },
-  divider: {
-    height: 16,
-    width: 1,
-    backgroundColor: _colors.default.gray
-  },
-  itemText: {
-    fontSize: 14,
-    color: _colors.default.black
-  }
-});
-//# sourceMappingURL=NetworkPanelHeader.js.map

package/lib/commonjs/ui/components/headers/NetworkPanelHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_colors","_interopRequireDefault","_jsxRuntime","e","__esModule","default","NetworkPanelHeader","jsxs","View","style","styles","container","children","jsx","headerColumn","Text","numberOfLines","itemText","divider","headerPathColumn","headerDurationColumn","StyleSheet","create","marginHorizontal","flexDirection","alignItems","backgroundColor","colors","gray","borderRadius","flex","flexShrink","paddingVertical","paddingLeft","height","width","fontSize","color","black"],"sourceRoot":"../../../../../src","sources":["ui/components/headers/NetworkPanelHeader.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA2C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5B,SAASG,kBAAkBA,CAAA,EAAG;EAC3C,oBACE,IAAAJ,WAAA,CAAAK,IAAA,EAACT,YAAA,CAAAU,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACI,YAAa;MAAAF,QAAA,eAC/B,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAiB,IAAI;QAACC,aAAa,EAAE,CAAE;QAACP,KAAK,EAAEC,MAAM,CAACO,QAAS;QAAAL,QAAA,EAAC;MAEhD,CAAM;IAAC,CACH,CAAC,eAEP,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACQ;IAAQ,CAAE,CAAC,eAE/B,IAAAhB,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAE,CAACC,MAAM,CAACI,YAAY,EAAEJ,MAAM,CAACS,gBAAgB,CAAE;MAAAP,QAAA,eAC1D,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAiB,IAAI;QAACC,aAAa,EAAE,CAAE;QAACP,KAAK,EAAEC,MAAM,CAACO,QAAS;QAAAL,QAAA,EAAC;MAEhD,CAAM;IAAC,CACH,CAAC,eAEP,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACQ;IAAQ,CAAE,CAAC,eAE/B,IAAAhB,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAE,CAACC,MAAM,CAACI,YAAY,EAAEJ,MAAM,CAACU,oBAAoB,CAAE;MAAAR,QAAA,eAC9D,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAiB,IAAI;QAACC,aAAa,EAAE,CAAE;QAACP,KAAK,EAAEC,MAAM,CAACO,QAAS;QAAAL,QAAA,EAAC;MAEhD,CAAM;IAAC,CACH,CAAC,eAEP,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACQ;IAAQ,CAAE,CAAC,eAE/B,IAAAhB,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAU,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACI,YAAa;MAAAF,QAAA,eAC/B,IAAAV,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAiB,IAAI;QAACC,aAAa,EAAE,CAAE;QAACP,KAAK,EAAEC,MAAM,CAACO,QAAS;QAAAL,QAAA,EAAC;MAEhD,CAAM;IAAC,CACH,CAAC;EAAA,CACH,CAAC;AAEX;AAEA,MAAMF,MAAM,GAAGW,uBAAU,CAACC,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,gBAAgB,EAAE,CAAC;IACnBC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEC,eAAM,CAACC,IAAI;IAC5BC,YAAY,EAAE;EAChB,CAAC;EACDV,gBAAgB,EAAE;IAChBW,IAAI,EAAE;EACR,CAAC;EACDV,oBAAoB,EAAE;IACpBU,IAAI,EAAE;EACR,CAAC;EACDhB,YAAY,EAAE;IACZgB,IAAI,EAAE,GAAG;IACTC,UAAU,EAAE,CAAC;IACbC,eAAe,EAAE,CAAC;IAClBC,WAAW,EAAE;EACf,CAAC;EACDf,OAAO,EAAE;IACPgB,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,CAAC;IACRT,eAAe,EAAEC,eAAM,CAACC;EAC1B,CAAC;EACDX,QAAQ,EAAE;IACRmB,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEV,eAAM,CAACW;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/ui/components/headers/NetworkPanelHeader.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NetworkPanelHeader;
-var _reactNative = require("react-native");
-var _colors = _interopRequireDefault(require("../../../theme/colors"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function NetworkPanelHeader() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerColumn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Method"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.headerColumn, styles.headerPathColumn],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Path"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.headerColumn, styles.headerDurationColumn],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Duration"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.divider
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerColumn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        numberOfLines: 1,
-        style: styles.itemText,
-        children: "Status"
-      })
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    marginHorizontal: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: _colors.default.gray,
-    borderRadius: 4
-  },
-  headerPathColumn: {
-    flex: 5
-  },
-  headerDurationColumn: {
-    flex: 2
-  },
-  headerColumn: {
-    flex: 1.5,
-    flexShrink: 1,
-    paddingVertical: 4,
-    paddingLeft: 8
-  },
-  divider: {
-    height: 16,
-    width: 1,
-    backgroundColor: _colors.default.gray
-  },
-  itemText: {
-    fontSize: 14,
-    color: _colors.default.black
-  }
-});
-//# sourceMappingURL=NetworkPanelHeader.js.map

package/lib/module/ui/components/headers/NetworkPanelHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_colors","_interopRequireDefault","_jsxRuntime","e","__esModule","default","NetworkPanelHeader","jsxs","View","style","styles","container","children","jsx","headerColumn","Text","numberOfLines","itemText","divider","headerPathColumn","headerDurationColumn","StyleSheet","create","marginHorizontal","flexDirection","alignItems","backgroundColor","colors","gray","borderRadius","flex","flexShrink","paddingVertical","paddingLeft","height","width","fontSize","color","black"],"sourceRoot":"../../../../../src","sources":["ui/components/headers/NetworkPanelHeader.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/src/ui/components/headers/NetworkPanelHeader.d.ts

@@ -1,2 +0,0 @@
-export default function NetworkPanelHeader(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NetworkPanelHeader.d.ts.map

package/lib/typescript/commonjs/src/ui/components/headers/NetworkPanelHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NetworkPanelHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/NetworkPanelHeader.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,4CAkCzC"}

package/lib/typescript/module/src/ui/components/headers/NetworkPanelHeader.d.ts

@@ -1,2 +0,0 @@
-export default function NetworkPanelHeader(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NetworkPanelHeader.d.ts.map

package/lib/typescript/module/src/ui/components/headers/NetworkPanelHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NetworkPanelHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/NetworkPanelHeader.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,4CAkCzC"}

package/src/ui/components/headers/NetworkPanelHeader.tsx

@@ -1,69 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import colors from '../../../theme/colors';
-
-export default function NetworkPanelHeader() {
-  return (
-    <View style={styles.container}>
-      <View style={styles.headerColumn}>
-        <Text numberOfLines={1} style={styles.itemText}>
-          Method
-        </Text>
-      </View>
-
-      <View style={styles.divider} />
-
-      <View style={[styles.headerColumn, styles.headerPathColumn]}>
-        <Text numberOfLines={1} style={styles.itemText}>
-          Path
-        </Text>
-      </View>
-
-      <View style={styles.divider} />
-
-      <View style={[styles.headerColumn, styles.headerDurationColumn]}>
-        <Text numberOfLines={1} style={styles.itemText}>
-          Duration
-        </Text>
-      </View>
-
-      <View style={styles.divider} />
-
-      <View style={styles.headerColumn}>
-        <Text numberOfLines={1} style={styles.itemText}>
-          Status
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.gray,
-    borderRadius: 4,
-  },
-  headerPathColumn: {
-    flex: 5,
-  },
-  headerDurationColumn: {
-    flex: 2,
-  },
-  headerColumn: {
-    flex: 1.5,
-    flexShrink: 1,
-    paddingVertical: 4,
-    paddingLeft: 8,
-  },
-  divider: {
-    height: 16,
-    width: 1,
-    backgroundColor: colors.gray,
-  },
-  itemText: {
-    fontSize: 14,
-    color: colors.black,
-  },
-});