react-native-inapp-inspector 1.0.8 → 1.0.10

package/README.md

@@ -31,18 +31,17 @@ npm install --save-dev react-native-inapp-inspector
 yarn add -D react-native-inapp-inspector
 ```
 
-### Peer Dependencies
-Make sure you have the following peer dependencies installed in your project:
-
-```bash
-npm install react-native-svg react-native-linear-gradient @react-navigation/native
-```
+The package will automatically install its dependencies (`@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`).
 
 For iOS projects, don't forget to run pod install:
 ```bash
 cd ios && pod install
 ```
 
+### Dependency Isolation
+
+This package is designed to operate in strict isolation. If the host application already uses `@react-navigation/native`, `react-native-linear-gradient`, or `react-native-svg`, the package's dependencies will not conflict with the application's runtime. The bundler (Metro/Webpack) and autolink systems automatically resolve duplicate native module links without affecting your main application environment.
+
 ---
 
 ## Integration

package/dist/commonjs/components/AnalyticsDetail.js

@@ -58,20 +58,20 @@ const ParamRowItem = ({ paramKey, value, }) => {
     const valStr = isObject ? JSON.stringify(value, null, 2) : String(value);
     const [expanded, setExpanded] = (0, react_1.useState)(false);
     const isLong = valStr.length > 80 || valStr.includes('\n') || isObject;
-    return (<react_native_1.View style={detailStyles.dataBox}>
+    return (<react_native_1.View style={[detailStyles.dataBox, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
       <react_native_1.View style={detailStyles.dataBoxHeader}>
-        <react_native_1.Text style={detailStyles.dataBoxKey} numberOfLines={1}>
+        <react_native_1.Text style={[detailStyles.dataBoxKey, { color: AppColors_1.AppColors.primaryBlack }]} numberOfLines={1}>
           {paramKey}
         </react_native_1.Text>
         <CopyButton_1.default value={valStr} label={paramKey}/>
       </react_native_1.View>
-      {expanded && isObject ? (<react_native_1.View style={detailStyles.jsonBlock}>
+      {expanded && isObject ? (<react_native_1.View style={[detailStyles.jsonBlock, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
           <JsonViewer_1.default data={value}/>
-        </react_native_1.View>) : (<react_native_1.Text style={detailStyles.dataBoxVal} selectable numberOfLines={expanded ? undefined : 2}>
+        </react_native_1.View>) : (<react_native_1.Text style={[detailStyles.dataBoxVal, { color: AppColors_1.AppColors.primaryBlack }]} selectable numberOfLines={expanded ? undefined : 2}>
           {valStr}
         </react_native_1.Text>)}
-      {isLong && (<react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={detailStyles.showMoreBtn}>
-          <react_native_1.Text style={detailStyles.showMoreText}>
+      {isLong && (<react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={[detailStyles.showMoreBtn, { backgroundColor: AppColors_1.AppColors.grayBackground }]}>
+          <react_native_1.Text style={[detailStyles.showMoreText, { color: AppColors_1.AppColors.grayTextStrong }]}>
             {expanded ? 'Show Less' : 'Show More'}
           </react_native_1.Text>
         </react_native_1.Pressable>)}
@@ -83,8 +83,8 @@ const ParamTable = ({ data, emptyLabel, }) => {
         value: data[key],
     }));
     if (entries.length === 0) {
-        return (<react_native_1.View style={detailStyles.emptyParams}>
-        <react_native_1.Text style={detailStyles.emptyParamsText}>
+        return (<react_native_1.View style={[detailStyles.emptyParams, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+        <react_native_1.Text style={[detailStyles.emptyParamsText, { color: AppColors_1.AppColors.grayTextWeak }]}>
           {emptyLabel ?? 'No parameters'}
         </react_native_1.Text>
       </react_native_1.View>);
@@ -99,14 +99,14 @@ const SectionCard = ({ title, children, count, accentColor = AppColors_1.AppColo
         {children}
       </react_native_1.View>);
     }
-    return (<react_native_1.View style={detailStyles.sectionCard}>
+    return (<react_native_1.View style={[detailStyles.sectionCard, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
       <react_native_1.View style={detailStyles.sectionHeader}>
         <react_native_1.View style={detailStyles.sectionTitleRow}>
           <react_native_1.View style={[
             detailStyles.sectionAccentDot,
             { backgroundColor: accentColor },
         ]}/>
-          <react_native_1.Text style={detailStyles.sectionTitle}>{title.toUpperCase()}</react_native_1.Text>
+          <react_native_1.Text style={[detailStyles.sectionTitle, { color: AppColors_1.AppColors.primaryBlack }]}>{title.toUpperCase()}</react_native_1.Text>
         </react_native_1.View>
         {typeof count === 'number' && (<react_native_1.View style={[
                 detailStyles.countBadge,
@@ -205,7 +205,7 @@ const AnalyticsDetail = ({ event, }) => {
         value: event.source,
         color: sourceColor,
     });
-    return (<react_native_1.ScrollView style={detailStyles.scroll} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
+    return (<react_native_1.ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors_1.AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       <react_native_linear_gradient_1.default colors={[
             `${eventColor}18`,
             `${eventColor}06`,
@@ -251,9 +251,12 @@ const AnalyticsDetail = ({ event, }) => {
         {topMetrics.length > 0 && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={detailStyles.metricsScroll} contentContainerStyle={detailStyles.metricsGrid}>
             {topMetrics.map((item, idx) => (<react_native_1.View key={idx} style={[
                     detailStyles.metricCard,
-                    { borderLeftColor: item.color },
+                    {
+                        borderLeftColor: item.color,
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                    },
                 ]}>
-                <react_native_1.Text style={detailStyles.metricLabel}>{item.key}</react_native_1.Text>
+                <react_native_1.Text style={[detailStyles.metricLabel, { color: AppColors_1.AppColors.grayTextWeak }]}>{item.key}</react_native_1.Text>
                 <react_native_1.Text style={[detailStyles.metricValue, { color: item.color }]} numberOfLines={1}>
                   {item.value}
                 </react_native_1.Text>
@@ -261,25 +264,27 @@ const AnalyticsDetail = ({ event, }) => {
           </react_native_1.ScrollView>)}
       </react_native_linear_gradient_1.default>
 
-      <react_native_1.View style={detailStyles.tabRow}>
+      <react_native_1.View style={[detailStyles.tabRow, { backgroundColor: AppColors_1.AppColors.grayBackground }]}>
         <react_native_1.Pressable style={[
             detailStyles.tabButton,
-            activeTab === 'unformatted' && detailStyles.tabActive,
+            activeTab === 'unformatted' && [detailStyles.tabActive, { backgroundColor: AppColors_1.AppColors.primaryLight }],
         ]} onPress={() => setActiveTab('unformatted')}>
           <react_native_1.Text style={[
             detailStyles.tabText,
-            activeTab === 'unformatted' && detailStyles.tabTextActive,
+            { color: AppColors_1.AppColors.grayTextWeak },
+            activeTab === 'unformatted' && [detailStyles.tabTextActive, { color: AppColors_1.AppColors.primaryBlack }],
         ]}>
             JSON Viewer
           </react_native_1.Text>
         </react_native_1.Pressable>
         <react_native_1.Pressable style={[
             detailStyles.tabButton,
-            activeTab === 'formatted' && detailStyles.tabActive,
+            activeTab === 'formatted' && [detailStyles.tabActive, { backgroundColor: AppColors_1.AppColors.primaryLight }],
         ]} onPress={() => setActiveTab('formatted')}>
           <react_native_1.Text style={[
             detailStyles.tabText,
-            activeTab === 'formatted' && detailStyles.tabTextActive,
+            { color: AppColors_1.AppColors.grayTextWeak },
+            activeTab === 'formatted' && [detailStyles.tabTextActive, { color: AppColors_1.AppColors.primaryBlack }],
         ]}>
             Tabular View
           </react_native_1.Text>
@@ -287,8 +292,8 @@ const AnalyticsDetail = ({ event, }) => {
       </react_native_1.View>
 
       {activeTab === 'unformatted' && (<react_native_1.View style={detailStyles.searchRow}>
-          <react_native_1.View style={styles_1.default.detailSearchBox}>
-            <react_native_1.TextInput placeholder="Search JSON data..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+          <react_native_1.View style={[styles_1.default.detailSearchBox, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+            <react_native_1.TextInput placeholder="Search JSON data..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={[styles_1.default.detailSearchInput, { color: AppColors_1.AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
             {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={{ padding: 8 }}>
                 <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               </react_native_1.Pressable>)}
@@ -306,7 +311,7 @@ const AnalyticsDetail = ({ event, }) => {
         </react_native_1.View>)}
 
       {activeTab === 'unformatted' && (<SectionCard accentColor={AppColors_1.AppColors.purple}>
-          <react_native_1.View style={[detailStyles.jsonBlock, { marginLeft: 0, marginTop: 0 }]}>
+          <react_native_1.View style={[detailStyles.jsonBlock, { marginLeft: 0, marginTop: 0, backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
             <JsonViewer_1.default data={{
                 name: event.name,
                 params: params,
@@ -320,8 +325,8 @@ const AnalyticsDetail = ({ event, }) => {
         </SectionCard>)}
 
       {/* Empty state */}
-      {paramCount === 0 && upCount === 0 && activeTab !== 'unformatted' && (<react_native_1.View style={detailStyles.emptyParams}>
-          <react_native_1.Text style={detailStyles.emptyParamsText}>
+      {paramCount === 0 && upCount === 0 && activeTab !== 'unformatted' && (<react_native_1.View style={[detailStyles.emptyParams, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+          <react_native_1.Text style={[detailStyles.emptyParamsText, { color: AppColors_1.AppColors.grayTextWeak }]}>
             No parameters recorded for this event
           </react_native_1.Text>
         </react_native_1.View>)}

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -102,11 +102,11 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
-          <react_native_1.Text style={cardStyles.gapText}>{formatGap(msSincePrev)}</react_native_1.Text>
+          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatGap(msSincePrev)}</react_native_1.Text>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
-      <TouchableScale_1.default onPress={onPress} style={cardStyles.modernCard}>
+      <TouchableScale_1.default onPress={onPress} style={[cardStyles.modernCard, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
         <react_native_1.Animated.View style={[
             react_native_1.StyleSheet.absoluteFill,
             {
@@ -143,7 +143,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
-          <react_native_1.Text style={cardStyles.timestamp}>
+          <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
             {formatTime(event.timestamp)}
           </react_native_1.Text>
         </react_native_1.View>
@@ -155,9 +155,9 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             event.screenName ||
             event.params?.firebase_screen ||
             event.params?.screen_name ||
-            event.params?.firebase_screen_class ? (<react_native_1.View style={cardStyles.chip}>
+            event.params?.firebase_screen_class ? (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
                 <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                <react_native_1.Text style={cardStyles.chipText} numberOfLines={1}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
                   {computedScreenName ||
                 event.screenName ||
                 event.params?.firebase_screen ||
@@ -166,14 +166,14 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 </react_native_1.Text>
               </react_native_1.View>) : null}
 
-            <react_native_1.View style={cardStyles.chip}>
-              <react_native_1.Text style={cardStyles.chipText}>
+            <react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+              <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
                 {'{} '} {paramCount} params
               </react_native_1.Text>
             </react_native_1.View>
 
-            {userPropCount > 0 && (<react_native_1.View style={cardStyles.chip}>
-                <react_native_1.Text style={cardStyles.chipText}>★ {userPropCount} props</react_native_1.Text>
+            {userPropCount > 0 && (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>★ {userPropCount} props</react_native_1.Text>
               </react_native_1.View>)}
           </react_native_1.View>
 

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const BrandCircleIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;
+export default BrandCircleIcon;

package/dist/commonjs/components/BrandCircleIcon.js

@@ -0,0 +1,180 @@
+"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.BrandCircleIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const BrandCircleIcon = ({ size = 56 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 256 256" fill="none">
+      <react_native_svg_1.Defs>
+        <react_native_svg_1.LinearGradient id="tile" x1="30" y1="30" x2="210" y2="222" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#141B33"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#0A0E1C"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="edge" x1="14" y1="22" x2="220" y2="228" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#3A4E7A"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1A2238"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="beam" x1="70" y1="74" x2="194" y2="187" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#5EEAD4"/>
+          <react_native_svg_1.Stop offset="0.5" stopColor="#38BDF8"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#A78BFA"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="halo" cx="0.5" cy="0.45" r="0.55">
+          <react_native_svg_1.Stop offset="0" stopColor="#38BDF8" stopOpacity={0.12}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#38BDF8" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="owlbody" x1="78" y1="60" x2="178" y2="186" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#202E55"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#10182F"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="beak" x1="120" y1="151" x2="136" y2="168" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#FCD34D"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#FB923C"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="iris" cx="0.42" cy="0.38" r="0.72">
+          <react_native_svg_1.Stop offset="0" stopColor="#FDE68A"/>
+          <react_native_svg_1.Stop offset="0.5" stopColor="#FBBF24"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#F59E0B"/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.RadialGradient id="blush" cx="0.5" cy="0.5" r="0.5">
+          <react_native_svg_1.Stop offset="0" stopColor="#FB7185" stopOpacity={0.5}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#FB7185" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="wing" x1="70" y1="120" x2="190" y2="206" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#1A2545"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#0E1530"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="faceplate" x1="70" y1="72" x2="186" y2="152" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#35497E"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1E2D4D"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="lensglass" cx="0.4" cy="0.32" r="0.75">
+          <react_native_svg_1.Stop offset="0" stopColor="#7DE8FF" stopOpacity={0.22}/>
+          <react_native_svg_1.Stop offset="0.7" stopColor="#7DE8FF" stopOpacity={0.05}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#7DE8FF" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="belly" x1="94" y1="126" x2="162" y2="212" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#33477A"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1D2B53"/>
+        </react_native_svg_1.LinearGradient>
+      </react_native_svg_1.Defs>
+      <react_native_svg_1.Circle cx="128" cy="128" r="122" fill="url(#tile)"/>
+      <react_native_svg_1.Circle cx="128" cy="128" r="121.4" fill="none" stroke="url(#edge)" strokeOpacity={0.7} strokeWidth={1.4}/>
+      <react_native_svg_1.Circle cx="128" cy="128" r="100" fill="url(#halo)"/>
+      <react_native_svg_1.G transform="translate(128 132) scale(1.05) translate(-128 -134)">
+        {/* wing 1 */}
+        <react_native_svg_1.Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z" fill="url(#wing)" stroke="url(#beam)" strokeWidth={2.5} strokeOpacity={0.45}/>
+        {/* wing 2 */}
+        <react_native_svg_1.Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z" fill="url(#wing)" stroke="url(#beam)" strokeWidth={2.5} strokeOpacity={0.45}/>
+        {/* body */}
+        <react_native_svg_1.Path d="M62 150 C58 104 70 70 90 58 L98 42 L116 62 Q128 57 140 62 L158 42 L166 58 C186 70 198 104 194 150 C198 180 184 204 152 212 C140 216 116 216 104 212 C72 204 58 180 62 150 Z" fill="url(#owlbody)" stroke="url(#beam)" strokeWidth={4} strokeLinejoin="round"/>
+        
+        {/* inner-ear shadows */}
+        <react_native_svg_1.Path d="M99 48 L114 62 L104 63 L98 55 Z" fill="#080F22" opacity={0.5}/>
+        <react_native_svg_1.Path d="M157 48 L142 62 L152 63 L158 55 Z" fill="#080F22" opacity={0.5}/>
+
+        {/* wing feather lines */}
+        <react_native_svg_1.G stroke="#22325A" strokeWidth={2.2} fill="none" strokeLinecap="round" opacity={0.75}>
+          <react_native_svg_1.Path d="M80 138 q-5 26 3 50"/>
+          <react_native_svg_1.Path d="M90 134 q-4 26 3 48"/>
+          <react_native_svg_1.Path d="M176 138 q5 26 -3 50"/>
+          <react_native_svg_1.Path d="M166 134 q4 26 -3 48"/>
+        </react_native_svg_1.G>
+
+        {/* belly plate */}
+        <react_native_svg_1.Path d="M128 126 C151 126 164 148 162 174 C160 198 146 212 128 212 C110 212 96 198 94 174 C92 148 105 126 128 126 Z" fill="url(#belly)"/>
+
+        {/* belly feather scallops */}
+        <react_native_svg_1.G stroke="#3E588C" strokeWidth={2.3} fill="none" strokeLinecap="round" opacity={0.4}>
+          <react_native_svg_1.Path d="M110 154 Q118 162 126 154"/>
+          <react_native_svg_1.Path d="M126 154 Q134 162 142 154"/>
+          <react_native_svg_1.Path d="M142 154 Q150 162 158 154"/>
+          <react_native_svg_1.Path d="M102 172 Q110 180 118 172"/>
+          <react_native_svg_1.Path d="M150 172 Q158 180 166 172"/>
+          <react_native_svg_1.Path d="M112 190 Q120 198 128 190"/>
+          <react_native_svg_1.Path d="M128 190 Q136 198 144 190"/>
+        </react_native_svg_1.G>
+
+        {/* developer chest screen + code emblem */}
+        <react_native_svg_1.Rect x={107} y={161} width={42} height={32} rx={9} fill="#0C1426" stroke="url(#beam)" strokeWidth={2} strokeOpacity={0.7}/>
+        <react_native_svg_1.G stroke="#8FD0EC" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none">
+          <react_native_svg_1.Path d="M122 170 L115 177 L122 184"/>
+          <react_native_svg_1.Path d="M134 170 L141 177 L134 184"/>
+          <react_native_svg_1.Path d="M130 168 L126 186"/>
+        </react_native_svg_1.G>
+
+        {/* facial disc */}
+        <react_native_svg_1.Path d="M128 92 C148 70 186 78 186 108 C186 134 160 152 128 152 C96 152 70 134 70 108 C70 78 108 70 128 92 Z" fill="url(#faceplate)" stroke="#52709E" strokeWidth={2.6} strokeOpacity={0.7}/>
+        {/* facial-disc centre ridge */}
+        <react_native_svg_1.Path d="M128 96 L128 120" stroke="#52709E" strokeWidth={2} strokeLinecap="round" strokeOpacity={0.45}/>
+
+        {/* feet */}
+        <react_native_svg_1.G stroke="url(#beak)" strokeWidth={5} strokeLinecap="round" fill="none">
+          <react_native_svg_1.Path d="M111 209 L105 224 M111 209 L111 226 M111 209 L117 224"/>
+          <react_native_svg_1.Path d="M145 209 L139 224 M145 209 L145 226 M145 209 L151 224"/>
+        </react_native_svg_1.G>
+
+        {/* normal eye: big cute yellow iris, dark pupil, sparkles */}
+        <react_native_svg_1.Circle cx={153} cy={107} r={17} fill="url(#iris)" stroke="#1A1205" strokeWidth={2.2}/>
+        <react_native_svg_1.Circle cx={153} cy={108} r={8.2} fill="#0A0E18"/>
+        <react_native_svg_1.Circle cx={156.2} cy={104} r={3.1} fill="#ffffff" opacity={0.95}/>
+        <react_native_svg_1.Circle cx={149.6} cy={111} r={1.6} fill="#ffffff" opacity={0.7}/>
+
+        {/* beak */}
+        <react_native_svg_1.Path d="M123.5 123 Q128 121 132.5 123 Q131 132 128 134.5 Q125 132 123.5 123 Z" fill="url(#beak)"/>
+
+        {/* magnifier held to the big (debug) eye */}
+        <react_native_svg_1.Circle cx={95} cy={103} r={20} fill="url(#iris)" stroke="#1A1205" strokeWidth={2.6}/>
+        <react_native_svg_1.Circle cx={95} cy={104} r={10} fill="#0A0E18"/>
+        <react_native_svg_1.Circle cx={98.6} cy={100} r={3.4} fill="#ffffff" opacity={0.95}/>
+        <react_native_svg_1.Circle cx={91} cy={107} r={1.8} fill="#ffffff" opacity={0.7}/>
+        <react_native_svg_1.Circle cx={95} cy={103} r={28} fill="url(#lensglass)"/>
+        <react_native_svg_1.Path d="M77 87 A28 28 0 0 1 106 79" fill="none" stroke="#ffffff" strokeWidth={4} strokeLinecap="round" strokeOpacity={0.5}/>
+        <react_native_svg_1.Line x1={75} y1={123} x2={54} y2={147} stroke="#0A0F1C" strokeWidth={14} strokeLinecap="round"/>
+        <react_native_svg_1.Line x1={75} y1={123} x2={54} y2={147} stroke="url(#beam)" strokeWidth={8.5} strokeLinecap="round"/>
+        <react_native_svg_1.Circle cx={95} cy={103} r={28} fill="none" stroke="url(#beam)" strokeWidth={7}/>
+
+        {/* rosy cheeks */}
+        <react_native_svg_1.Ellipse cx={83} cy={127} rx={9} ry={6} fill="url(#blush)"/>
+        <react_native_svg_1.Ellipse cx={167} cy={122} rx={9} ry={6} fill="url(#blush)"/>
+      </react_native_svg_1.G>
+    </react_native_svg_1.default>);
+};
+exports.BrandCircleIcon = BrandCircleIcon;
+exports.default = exports.BrandCircleIcon;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const BrandSquareIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;
+export default BrandSquareIcon;

package/dist/commonjs/components/BrandSquareIcon.js

@@ -0,0 +1,180 @@
+"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.BrandSquareIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const BrandSquareIcon = ({ size = 56 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 256 256" fill="none">
+      <react_native_svg_1.Defs>
+        <react_native_svg_1.LinearGradient id="tileSquare" x1="30" y1="30" x2="210" y2="222" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#141B33"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#0A0E1C"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="edgeSquare" x1="14" y1="22" x2="220" y2="228" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#3A4E7A"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1A2238"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="beamSquare" x1="70" y1="74" x2="194" y2="187" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#5EEAD4"/>
+          <react_native_svg_1.Stop offset="0.5" stopColor="#38BDF8"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#A78BFA"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="haloSquare" cx="0.5" cy="0.45" r="0.55">
+          <react_native_svg_1.Stop offset="0" stopColor="#38BDF8" stopOpacity={0.12}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#38BDF8" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="owlbodySquare" x1="78" y1="60" x2="178" y2="186" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#202E55"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#10182F"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="beakSquare" x1="120" y1="151" x2="136" y2="168" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#FCD34D"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#FB923C"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="irisSquare" cx="0.42" cy="0.38" r="0.72">
+          <react_native_svg_1.Stop offset="0" stopColor="#FDE68A"/>
+          <react_native_svg_1.Stop offset="0.5" stopColor="#FBBF24"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#F59E0B"/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.RadialGradient id="blushSquare" cx="0.5" cy="0.5" r="0.5">
+          <react_native_svg_1.Stop offset="0" stopColor="#FB7185" stopOpacity={0.5}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#FB7185" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="wingSquare" x1="70" y1="120" x2="190" y2="206" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#1A2545"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#0E1530"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.LinearGradient id="faceplateSquare" x1="70" y1="72" x2="186" y2="152" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#35497E"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1E2D4D"/>
+        </react_native_svg_1.LinearGradient>
+        <react_native_svg_1.RadialGradient id="lensglassSquare" cx="0.4" cy="0.32" r="0.75">
+          <react_native_svg_1.Stop offset="0" stopColor="#7DE8FF" stopOpacity={0.22}/>
+          <react_native_svg_1.Stop offset="0.7" stopColor="#7DE8FF" stopOpacity={0.05}/>
+          <react_native_svg_1.Stop offset="1" stopColor="#7DE8FF" stopOpacity={0}/>
+        </react_native_svg_1.RadialGradient>
+        <react_native_svg_1.LinearGradient id="bellySquare" x1="94" y1="126" x2="162" y2="212" gradientUnits="userSpaceOnUse">
+          <react_native_svg_1.Stop offset="0" stopColor="#33477A"/>
+          <react_native_svg_1.Stop offset="1" stopColor="#1D2B53"/>
+        </react_native_svg_1.LinearGradient>
+      </react_native_svg_1.Defs>
+      <react_native_svg_1.Rect x={8} y={8} width={240} height={240} rx={58} fill="url(#tileSquare)"/>
+      <react_native_svg_1.Rect x={8.6} y={8.6} width={238.8} height={238.8} rx={57.4} fill="none" stroke="url(#edgeSquare)" strokeOpacity={0.6} strokeWidth={1.2}/>
+      <react_native_svg_1.Circle cx={128} cy={128} r={104} fill="url(#haloSquare)"/>
+      <react_native_svg_1.G transform="translate(128 128) scale(1.16) translate(-128 -134)">
+        {/* wing 1 */}
+        <react_native_svg_1.Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z" fill="url(#wingSquare)" stroke="url(#beamSquare)" strokeWidth={2.5} strokeOpacity={0.45}/>
+        {/* wing 2 */}
+        <react_native_svg_1.Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z" fill="url(#wingSquare)" stroke="url(#beamSquare)" strokeWidth={2.5} strokeOpacity={0.45}/>
+        {/* body */}
+        <react_native_svg_1.Path d="M62 150 C58 104 70 70 90 58 L98 42 L116 62 Q128 57 140 62 L158 42 L166 58 C186 70 198 104 194 150 C198 180 184 204 152 212 C140 216 116 216 104 212 C72 204 58 180 62 150 Z" fill="url(#owlbodySquare)" stroke="url(#beamSquare)" strokeWidth={4} strokeLinejoin="round"/>
+        
+        {/* inner-ear shadows */}
+        <react_native_svg_1.Path d="M99 48 L114 62 L104 63 L98 55 Z" fill="#080F22" opacity={0.5}/>
+        <react_native_svg_1.Path d="M157 48 L142 62 L152 63 L158 55 Z" fill="#080F22" opacity={0.5}/>
+
+        {/* wing feather lines */}
+        <react_native_svg_1.G stroke="#22325A" strokeWidth={2.2} fill="none" strokeLinecap="round" opacity={0.75}>
+          <react_native_svg_1.Path d="M80 138 q-5 26 3 50"/>
+          <react_native_svg_1.Path d="M90 134 q-4 26 3 48"/>
+          <react_native_svg_1.Path d="M176 138 q5 26 -3 50"/>
+          <react_native_svg_1.Path d="M166 134 q4 26 -3 48"/>
+        </react_native_svg_1.G>
+
+        {/* belly plate */}
+        <react_native_svg_1.Path d="M128 126 C151 126 164 148 162 174 C160 198 146 212 128 212 C110 212 96 198 94 174 C92 148 105 126 128 126 Z" fill="url(#bellySquare)"/>
+
+        {/* belly feather scallops */}
+        <react_native_svg_1.G stroke="#3E588C" strokeWidth={2.3} fill="none" strokeLinecap="round" opacity={0.4}>
+          <react_native_svg_1.Path d="M110 154 Q118 162 126 154"/>
+          <react_native_svg_1.Path d="M126 154 Q134 162 142 154"/>
+          <react_native_svg_1.Path d="M142 154 Q150 162 158 154"/>
+          <react_native_svg_1.Path d="M102 172 Q110 180 118 172"/>
+          <react_native_svg_1.Path d="M150 172 Q158 180 166 172"/>
+          <react_native_svg_1.Path d="M112 190 Q120 198 128 190"/>
+          <react_native_svg_1.Path d="M128 190 Q136 198 144 190"/>
+        </react_native_svg_1.G>
+
+        {/* developer chest screen + code emblem */}
+        <react_native_svg_1.Rect x={107} y={161} width={42} height={32} rx={9} fill="#0C1426" stroke="url(#beamSquare)" strokeWidth={2} strokeOpacity={0.7}/>
+        <react_native_svg_1.G stroke="#8FD0EC" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none">
+          <react_native_svg_1.Path d="M122 170 L115 177 L122 184"/>
+          <react_native_svg_1.Path d="M134 170 L141 177 L134 184"/>
+          <react_native_svg_1.Path d="M130 168 L126 186"/>
+        </react_native_svg_1.G>
+
+        {/* facial disc */}
+        <react_native_svg_1.Path d="M128 92 C148 70 186 78 186 108 C186 134 160 152 128 152 C96 152 70 134 70 108 C70 78 108 70 128 92 Z" fill="url(#faceplateSquare)" stroke="#52709E" strokeWidth={2.6} strokeOpacity={0.7}/>
+        {/* facial-disc centre ridge */}
+        <react_native_svg_1.Path d="M128 96 L128 120" stroke="#52709E" strokeWidth={2} strokeLinecap="round" strokeOpacity={0.45}/>
+
+        {/* feet */}
+        <react_native_svg_1.G stroke="url(#beakSquare)" strokeWidth={5} strokeLinecap="round" fill="none">
+          <react_native_svg_1.Path d="M111 209 L105 224 M111 209 L111 226 M111 209 L117 224"/>
+          <react_native_svg_1.Path d="M145 209 L139 224 M145 209 L145 226 M145 209 L151 224"/>
+        </react_native_svg_1.G>
+
+        {/* normal eye: big cute yellow iris, dark pupil, sparkles */}
+        <react_native_svg_1.Circle cx={153} cy={107} r={17} fill="url(#irisSquare)" stroke="#1A1205" strokeWidth={2.2}/>
+        <react_native_svg_1.Circle cx={153} cy={108} r={8.2} fill="#0A0E18"/>
+        <react_native_svg_1.Circle cx={156.2} cy={104} r={3.1} fill="#ffffff" opacity={0.95}/>
+        <react_native_svg_1.Circle cx={149.6} cy={111} r={1.6} fill="#ffffff" opacity={0.7}/>
+
+        {/* beak */}
+        <react_native_svg_1.Path d="M123.5 123 Q128 121 132.5 123 Q131 132 128 134.5 Q125 132 123.5 123 Z" fill="url(#beakSquare)"/>
+
+        {/* magnifier held to the big (debug) eye */}
+        <react_native_svg_1.Circle cx={95} cy={103} r={20} fill="url(#irisSquare)" stroke="#1A1205" strokeWidth={2.6}/>
+        <react_native_svg_1.Circle cx={95} cy={104} r={10} fill="#0A0E18"/>
+        <react_native_svg_1.Circle cx={98.6} cy={100} r={3.4} fill="#ffffff" opacity={0.95}/>
+        <react_native_svg_1.Circle cx={91} cy={107} r={1.8} fill="#ffffff" opacity={0.7}/>
+        <react_native_svg_1.Circle cx={95} cy={103} r={28} fill="url(#lensglassSquare)"/>
+        <react_native_svg_1.Path d="M77 87 A28 28 0 0 1 106 79" fill="none" stroke="#ffffff" strokeWidth={4} strokeLinecap="round" strokeOpacity={0.5}/>
+        <react_native_svg_1.Line x1={75} y1={123} x2={54} y2={147} stroke="#0A0F1C" strokeWidth={14} strokeLinecap="round"/>
+        <react_native_svg_1.Line x1={75} y1={123} x2={54} y2={147} stroke="url(#beamSquare)" strokeWidth={8.5} strokeLinecap="round"/>
+        <react_native_svg_1.Circle cx={95} cy={103} r={28} fill="none" stroke="url(#beamSquare)" strokeWidth={7}/>
+
+        {/* rosy cheeks */}
+        <react_native_svg_1.Ellipse cx={83} cy={127} rx={9} ry={6} fill="url(#blushSquare)"/>
+        <react_native_svg_1.Ellipse cx={167} cy={122} rx={9} ry={6} fill="url(#blushSquare)"/>
+      </react_native_svg_1.G>
+    </react_native_svg_1.default>);
+};
+exports.BrandSquareIcon = BrandSquareIcon;
+exports.default = exports.BrandSquareIcon;