react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/esm/components/AnalyticsGraph.js

@@ -1,373 +1,111 @@
-import React from 'react';
-import { View, Text, ScrollView, Dimensions, StyleSheet } from 'react-native';
-import Svg, { Rect, Text as SvgText, Line, Circle, Path, Defs, LinearGradient, Stop, } from 'react-native-svg';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-const BAR_HEIGHT = 24;
-const PADDING_Y = 12;
-const AnalyticsGraph = ({ event, accentColor }) => {
-    const params = event.params || {};
-    const itemsArray = Array.isArray(params.items) ? params.items : null;
-    const filteredItems = itemsArray?.filter((item) => typeof item.price === 'number') || [];
-    const rootNumericKeys = [];
-    Object.entries(params).forEach(([k, v]) => {
-        if (typeof v === 'number' &&
-            !k.toLowerCase().includes('id') &&
-            !k.toLowerCase().includes('timestamp')) {
-            rootNumericKeys.push({ key: k, value: v });
-        }
-    });
-    const dateKeys = [];
-    Object.entries(params).forEach(([k, v]) => {
-        if (typeof v === 'string' &&
-            v.length >= 10 &&
-            /^\d{4}-\d{2}-\d{2}/.test(v)) {
-            const d = new Date(v);
-            if (!isNaN(d.getTime())) {
-                dateKeys.push({ key: k, date: d });
-            }
-        }
-    });
-    const paramTypes = { string: 0, number: 0, boolean: 0, object: 0 };
-    const strings = [];
-    Object.entries(params).forEach(([k, v]) => {
-        const t = typeof v;
-        if (t === 'string') {
-            paramTypes.string++;
-            strings.push({ label: k, value: v.length });
-        }
-        else if (t === 'number') {
-            paramTypes.number++;
-        }
-        else if (t === 'boolean') {
-            paramTypes.boolean++;
-        }
-        else if (t === 'object' && v !== null) {
-            paramTypes.object++;
-        }
-    });
-    const typeData = [
-        { label: 'Strings', value: paramTypes.string, color: AppColors.purple },
-        { label: 'Numbers', value: paramTypes.number, color: AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: AppColors.amber500 },
-        { label: 'Objects', value: paramTypes.object, color: AppColors.greenColor },
-    ].filter(d => d.value > 0);
-    strings.sort((a, b) => b.value - a.value);
-    const topStrings = strings.slice(0, 5);
-    const hasItemsChart = filteredItems.length > 0;
-    const hasRootNumericChart = rootNumericKeys.length > 0;
-    const hasDatesChart = dateKeys.length > 0;
-    const hasStringsChart = topStrings.length > 0;
-    const hasTypeData = typeData.length > 0;
-    const screenWidth = Dimensions.get('window').width - 60;
-    const rightMargin = 40;
-    const maxBarWidth = screenWidth - rightMargin;
-    return (<View style={graphStyles.container}>
-      <Text style={graphStyles.headerTitle}>Data Visualization</Text>
+import $ from"react";import{View as T,Text as B,ScrollView as L,Dimensions as J,StyleSheet as K}from"react-native";import A,{Rect as Y,Text as W,Line as Z,Circle as D,Path as Q,Defs as U,LinearGradient as X,Stop as G}from"react-native-svg";import{AppColors as t}from"../styles/AppColors";import{AppFonts as C}from"../styles/AppFonts";const O=24,R=12,ee=({event:i,accentColor:s})=>{const r=i.params||{},c=(Array.isArray(r.items)?r.items:null)?.filter(a=>typeof a.price=="number")||[],l=[];Object.entries(r).forEach(([a,k])=>{typeof k=="number"&&!a.toLowerCase().includes("id")&&!a.toLowerCase().includes("timestamp")&&l.push({key:a,value:k})});const e=[];Object.entries(r).forEach(([a,k])=>{if(typeof k=="string"&&k.length>=10&&/^\d{4}-\d{2}-\d{2}/.test(k)){const V=new Date(k);isNaN(V.getTime())||e.push({key:a,date:V})}});const o={string:0,number:0,boolean:0,object:0},h=[];Object.entries(r).forEach(([a,k])=>{const V=typeof k;V==="string"?(o.string++,h.push({label:a,value:k.length})):V==="number"?o.number++:V==="boolean"?o.boolean++:V==="object"&&k!==null&&o.object++});const v=[{label:"Strings",value:o.string,color:t.purple},{label:"Numbers",value:o.number,color:t.skyBlue},{label:"Booleans",value:o.boolean,color:t.amber500},{label:"Objects",value:o.object,color:t.greenColor}].filter(a=>a.value>0);h.sort((a,k)=>k.value-a.value);const M=h.slice(0,5),F=c.length>0,N=l.length>0,H=e.length>0,_=M.length>0,E=v.length>0,z=J.get("window").width-60-40;return<T style={S.container}>
+      <B style={S.headerTitle}>Data Visualization</B>
 
-      {hasTypeData && (<View style={graphStyles.chartBlock}>
-          <Text style={graphStyles.chartTitle}>Data Types Breakdown</Text>
-          <DonutChart data={typeData}/>
-        </View>)}
+      {E&&<T style={S.chartBlock}>
+          <B style={S.chartTitle}>Data Types Breakdown</B>
+          <Te data={v}/>
+        </T>}
 
-      {hasStringsChart && (<View style={graphStyles.chartBlock}>
-          <Text style={graphStyles.chartTitle}>Highest Payload Strings</Text>
-          <BarChart data={topStrings} accentColor={AppColors.purple} maxBarWidth={maxBarWidth} isGradient/>
-        </View>)}
+      {_&&<T style={S.chartBlock}>
+          <B style={S.chartTitle}>Highest Payload Strings</B>
+          <P data={M}accentColor={t.purple}maxBarWidth={z}isGradient/>
+        </T>}
 
-      {hasRootNumericChart && (<View style={graphStyles.chartBlock}>
-          <Text style={graphStyles.chartTitle}>Top-Level Metrics</Text>
-          <GaugeChart data={rootNumericKeys.map(d => ({ label: d.key, value: d.value }))} accentColor={accentColor}/>
-        </View>)}
+      {N&&<T style={S.chartBlock}>
+          <B style={S.chartTitle}>Top-Level Metrics</B>
+          <Se data={l.map(a=>({label:a.key,value:a.value}))}accentColor={s}/>
+        </T>}
 
-      {hasDatesChart && (<View style={graphStyles.chartBlock}>
-          <Text style={graphStyles.chartTitle}>Important Dates</Text>
-          <CalendarChart data={dateKeys.map(d => ({ label: d.key, date: d.date }))} accentColor={accentColor}/>
-        </View>)}
+      {H&&<T style={S.chartBlock}>
+          <B style={S.chartTitle}>Important Dates</B>
+          <Be data={e.map(a=>({label:a.key,date:a.date}))}accentColor={s}/>
+        </T>}
 
-      {hasItemsChart && (<View style={graphStyles.chartBlock}>
-          <Text style={graphStyles.chartTitle}>Item Prices</Text>
-          <BarChart data={filteredItems.map((item, i) => ({
-                label: item.item_name || item.item_id || `Item ${i + 1}`,
-                value: item.price,
-            }))} accentColor={AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
-        </View>)}
-    </View>);
-};
-const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-    };
-};
-const getPiePath = (x, y, radius, innerRadius, startAngle, endAngle) => {
-    const start = polarToCartesian(x, y, radius, endAngle);
-    const end = polarToCartesian(x, y, radius, startAngle);
-    const startInner = polarToCartesian(x, y, innerRadius, endAngle);
-    const endInner = polarToCartesian(x, y, innerRadius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return `
-    M ${start.x} ${start.y}
-    A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}
-    L ${endInner.x} ${endInner.y}
-    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${startInner.x} ${startInner.y}
+      {F&&<T style={S.chartBlock}>
+          <B style={S.chartTitle}>Item Prices</B>
+          <P data={c.map((a,k)=>({label:a.item_name||a.item_id||`Item ${k+1}`,value:a.price}))}accentColor={t.successGreen}maxBarWidth={z}isGradient={!1}/>
+        </T>}
+    </T>},I=(i,s,r,n)=>{const c=(n-90)*Math.PI/180;return{x:i+r*Math.cos(c),y:s+r*Math.sin(c)}},te=(i,s,r,n,c,l)=>{const e=I(i,s,r,l),o=I(i,s,r,c),h=I(i,s,n,l),v=I(i,s,n,c),M=l-c<=180?"0":"1";return`
+    M ${e.x} ${e.y}
+    A ${r} ${r} 0 ${M} 0 ${o.x} ${o.y}
+    L ${v.x} ${v.y}
+    A ${n} ${n} 0 ${M} 1 ${h.x} ${h.y}
     Z
-  `;
-};
-const DonutChart = ({ data, }) => {
-    const total = data.reduce((sum, d) => sum + d.value, 0);
-    if (total === 0)
-        return null;
-    let currentAngle = 0;
-    const radius = 50;
-    const innerRadius = 30;
-    const center = 60;
-    return (<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <Svg width="120" height="120" viewBox="0 0 120 120">
-        {data.map((d, i) => {
-            if (d.value === 0)
-                return null;
-            const angle = (d.value / total) * 360;
-            const startAngle = currentAngle;
-            const endAngle = currentAngle + angle;
-            currentAngle += angle;
-            if (angle === 360) {
-                return (<React.Fragment key={i}>
-                <Circle cx={center} cy={center} r={radius} fill={d.color}/>
-                <Circle cx={center} cy={center} r={innerRadius} fill={AppColors.primaryLight}/>
-              </React.Fragment>);
-            }
-            const path = getPiePath(center, center, radius, innerRadius, startAngle, endAngle);
-            return <Path key={i} d={path} fill={d.color}/>;
-        })}
-      </Svg>
-      <View style={{ marginLeft: 16, flex: 1, gap: 6 }}>
-        {data.map((d, i) => {
-            if (d.value === 0)
-                return null;
-            return (<View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <View style={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: 5,
-                    backgroundColor: d.color,
-                }}/>
-              <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11,
-                    color: AppColors.grayTextStrong,
-                }}>
-                {d.label} ({d.value})
-              </Text>
-            </View>);
-        })}
-      </View>
-    </View>);
-};
-const GaugeChart = ({ data, accentColor, }) => {
-    const maxVal = Math.max(...data.map(d => Math.abs(d.value)), 1);
-    const radius = 26;
-    const stroke = 5;
-    const circumference = 2 * Math.PI * radius;
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            gap: 16,
-            paddingRight: 16,
-            paddingTop: 6,
-            paddingBottom: 6,
-        }}>
-      {data.map(d => {
-            const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
-            const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001);
-            return (<View key={d.label} style={{ alignItems: 'center', width: 70 }}>
-            <Svg width="60" height="60" viewBox="0 0 60 60">
-              <Circle cx="30" cy="30" r={radius} stroke={AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
-              <Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
-            </Svg>
-            <View style={{
-                    position: 'absolute',
-                    top: 20,
-                    height: 20,
-                    width: 60,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-              <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 13,
-                    color: AppColors.primaryBlack,
-                    textAlign: 'center',
-                }}>
-                {d.value >= 1000 ? (d.value / 1000).toFixed(1) + 'k' : d.value}
-              </Text>
-            </View>
-            <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors.grayTextWeak,
-                    marginTop: 6,
-                    textAlign: 'center',
-                }} numberOfLines={1}>
-              {d.label}
-            </Text>
-          </View>);
-        })}
-    </ScrollView>);
-};
-const CalendarChart = ({ data, accentColor, }) => {
-    const months = [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ];
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            gap: 16,
-            paddingRight: 16,
-            paddingTop: 6,
-            paddingBottom: 6,
-        }}>
-      {data.map((d, i) => {
-            const monthText = months[d.date.getMonth()];
-            const dayText = d.date.getDate();
-            const yearText = d.date.getFullYear();
-            return (<View key={d.label + i} style={{ width: 70, alignItems: 'center' }}>
-            <View style={{
-                    width: 58,
-                    height: 62,
-                    backgroundColor: AppColors.white,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    shadowColor: AppColors.black,
-                    shadowOpacity: 0.05,
-                    shadowRadius: 4,
-                    shadowOffset: { width: 0, height: 2 },
-                    elevation: 2,
-                }}>
+  `},Te=({data:i})=>{const s=i.reduce((e,o)=>e+o.value,0);if(s===0)return null;let r=0;const n=50,c=30,l=60;return<T style={{flexDirection:"row",alignItems:"center"}}>
+      <A width="120"height="120"viewBox="0 0 120 120">
+        {i.map((e,o)=>{if(e.value===0)return null;const h=e.value/s*360,v=r,M=r+h;if(r+=h,h===360)return<$.Fragment key={o}>
+                <D cx={l}cy={l}r={n}fill={e.color}/>
+                <D cx={l}cy={l}r={c}fill={t.primaryLight}/>
+              </$.Fragment>;const F=te(l,l,n,c,v,M);return<Q key={o}d={F}fill={e.color}/>})}
+      </A>
+      <T style={{marginLeft:16,flex:1,gap:6}}>
+        {i.map((e,o)=>e.value===0?null:<T key={o}style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <T style={{width:10,height:10,borderRadius:5,backgroundColor:e.color}}/>
+              <B style={{fontFamily:C.interMedium,fontSize:11,color:t.grayTextStrong}}>
+                {e.label} ({e.value})
+              </B>
+            </T>)}
+      </T>
+    </T>},Se=({data:i,accentColor:s})=>{const r=Math.max(...i.map(e=>Math.abs(e.value)),1),n=26,c=5,l=2*Math.PI*n;return<L horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {i.map(e=>{const o=Math.min(Math.abs(e.value)/r,1),h=Math.max(l-o*l,.001);return<T key={e.label}style={{alignItems:"center",width:70}}>
+            <A width="60"height="60"viewBox="0 0 60 60">
+              <D cx="30"cy="30"r={n}stroke={t.grayBorderSecondary}strokeWidth={c}fill="none"/>
+              <D cx="30"cy="30"r={n}stroke={s}strokeWidth={c}fill="none"strokeLinecap="round"strokeDasharray={l}strokeDashoffset={h}rotation="-90"origin="30, 30"/>
+            </A>
+            <T style={{position:"absolute",top:20,height:20,width:60,justifyContent:"center",alignItems:"center"}}>
+              <B style={{fontFamily:C.interBold,fontSize:13,color:t.primaryBlack,textAlign:"center"}}>
+                {e.value>=1e3?(e.value/1e3).toFixed(1)+"k":e.value}
+              </B>
+            </T>
+            <B style={{fontFamily:C.interMedium,fontSize:10,color:t.grayTextWeak,marginTop:6,textAlign:"center"}}numberOfLines={1}>
+              {e.label}
+            </B>
+          </T>})}
+    </L>},Be=({data:i,accentColor:s})=>{const r=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return<L horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {i.map((n,c)=>{const l=r[n.date.getMonth()],e=n.date.getDate(),o=n.date.getFullYear();return<T key={n.label+c}style={{width:70,alignItems:"center"}}>
+            <T style={{width:58,height:62,backgroundColor:t.white,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden",shadowColor:t.black,shadowOpacity:.05,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2}}>
               
-              <View style={{
-                    backgroundColor: accentColor,
-                    height: 18,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors.white,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                }}>
-                  {monthText} {yearText}
-                </Text>
-              </View>
+              <T style={{backgroundColor:s,height:18,justifyContent:"center",alignItems:"center"}}>
+                <B style={{fontFamily:C.interBold,fontSize:9,color:t.white,textTransform:"uppercase",letterSpacing:.5}}>
+                  {l} {o}
+                </B>
+              </T>
               
-              <View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: AppColors.grayBackground,
-                }}>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 24,
-                    color: AppColors.primaryBlack,
-                }}>
-                  {dayText}
-                </Text>
-              </View>
-            </View>
+              <T style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:t.grayBackground}}>
+                <B style={{fontFamily:C.interBold,fontSize:24,color:t.primaryBlack}}>
+                  {e}
+                </B>
+              </T>
+            </T>
 
-            <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors.grayTextWeak,
-                    marginTop: 8,
-                    textAlign: 'center',
-                }} numberOfLines={2}>
-              {d.label.replace(/_/g, ' ')}
-            </Text>
-          </View>);
-        })}
-    </ScrollView>);
-};
-const BarChart = ({ data, accentColor, maxBarWidth, isGradient = false, }) => {
-    const maxVal = Math.max(...data.map(d => d.value), 1);
-    const chartHeight = data.length * (BAR_HEIGHT + PADDING_Y) + 10;
-    return (<View style={graphStyles.svgContainer}>
-      <Svg width="100%" height={chartHeight}>
-        <Defs>
-          <LinearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
-            <Stop offset="0" stopColor={accentColor} stopOpacity="0.6"/>
-            <Stop offset="1" stopColor={accentColor} stopOpacity="1"/>
-          </LinearGradient>
-        </Defs>
-        {data.map((d, i) => {
-            const y = i * (BAR_HEIGHT + PADDING_Y);
-            const barWidth = Math.max((d.value / maxVal) * maxBarWidth, 2);
-            return (<React.Fragment key={d.label}>
+            <B style={{fontFamily:C.interMedium,fontSize:10,color:t.grayTextWeak,marginTop:8,textAlign:"center"}}numberOfLines={2}>
+              {n.label.replace(/_/g," ")}
+            </B>
+          </T>})}
+    </L>},P=({data:i,accentColor:s,maxBarWidth:r,isGradient:n=!1})=>{const c=Math.max(...i.map(e=>e.value),1),l=i.length*(O+R)+10;return<T style={S.svgContainer}>
+      <A width="100%"height={l}>
+        <U>
+          <X id="barGrad"x1="0"y1="0"x2="1"y2="0">
+            <G offset="0"stopColor={s}stopOpacity="0.6"/>
+            <G offset="1"stopColor={s}stopOpacity="1"/>
+          </X>
+        </U>
+        {i.map((e,o)=>{const h=o*(O+R),v=Math.max(e.value/c*r,2);return<$.Fragment key={e.label}>
               
-              <SvgText x={0} y={y + 12} fill={AppColors.grayTextStrong} fontSize="11" fontFamily={AppFonts.interMedium}>
-                {d.label}
-              </SvgText>
+              <W x={0}y={h+12}fill={t.grayTextStrong}fontSize="11"fontFamily={C.interMedium}>
+                {e.label}
+              </W>
 
               
-              <Line x1={0} y1={y + 24} x2={maxBarWidth} y2={y + 24} stroke={AppColors.grayBorderSecondary} strokeDasharray="4"/>
+              <Z x1={0}y1={h+24}x2={r}y2={h+24}stroke={t.grayBorderSecondary}strokeDasharray="4"/>
 
               
-              <Rect x={0} y={y + 16} width={barWidth} height={14} fill={isGradient ? 'url(#barGrad)' : accentColor} rx={4} opacity={0.85}/>
+              <Y x={0}y={h+16}width={v}height={14}fill={n?"url(#barGrad)":s}rx={4}opacity={.85}/>
 
               
-              <SvgText x={barWidth + 6} y={y + 26} fill={AppColors.primaryBlack} fontSize="11" fontFamily={AppFonts.interBold}>
-                {d.value}
-              </SvgText>
-            </React.Fragment>);
-        })}
-      </Svg>
-    </View>);
-};
-const graphStyles = StyleSheet.create({
-    container: {
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        borderRadius: 12,
-        marginBottom: 10,
-        padding: 14,
-        overflow: 'hidden',
-    },
-    headerTitle: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.primaryBlack,
-        fontSize: 14,
-        marginBottom: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        paddingBottom: 8,
-    },
-    chartBlock: {
-        marginBottom: 16,
-    },
-    chartTitle: {
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.grayTextWeak,
-        fontSize: 12,
-        textTransform: 'uppercase',
-        letterSpacing: 0.5,
-        marginBottom: 8,
-    },
-    svgContainer: {
-        marginTop: 4,
-    },
-});
-export default AnalyticsGraph;
+              <W x={v+6}y={h+26}fill={t.primaryBlack}fontSize="11"fontFamily={C.interBold}>
+                {e.value}
+              </W>
+            </$.Fragment>})}
+      </A>
+    </T>},S=K.create({container:{backgroundColor:t.primaryLight,borderWidth:1,borderColor:t.grayBorderSecondary,borderRadius:12,marginBottom:10,padding:14,overflow:"hidden"},headerTitle:{fontFamily:C.interBold,color:t.primaryBlack,fontSize:14,marginBottom:12,borderBottomWidth:1,borderBottomColor:t.dividerColor,paddingBottom:8},chartBlock:{marginBottom:16},chartTitle:{fontFamily:C.interMedium,color:t.grayTextWeak,fontSize:12,textTransform:"uppercase",letterSpacing:.5,marginBottom:8},svgContainer:{marginTop:4}});export default ee;

package/dist/esm/components/AnimatedEntrance.js

@@ -1,6 +1 @@
-import React from 'react';
-import { View } from 'react-native';
-const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, style, }) {
-    return <View style={style}>{children}</View>;
-});
-export default AnimatedEntrance;
+import n from"react";import{View as A}from"react-native";const E=n.memo(function({children:t,style:e}){return<A style={e}>{t}</A>});export default E;

package/dist/esm/components/AppHeaderLogo.js

@@ -1,94 +1,7 @@
-import React, { useState } from 'react';
-import { Image, Platform, StyleSheet, View, } from 'react-native';
-import BrandSquareIcon from './BrandSquareIcon';
-export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
-    const [loadError, setLoadError] = useState(false);
-    if (customIcon) {
-        if (React.isValidElement(customIcon)) {
-            const clonedIcon = React.cloneElement(customIcon, {
-                size,
-                width: size,
-                height: size,
-            });
-            return (<View style={[
-                    logoStyles.svgContainer,
-                    {
-                        width: size,
-                        height: size,
-                        borderRadius: Math.round(size * 0.23),
-                    },
-                ]}>
-          {clonedIcon}
-        </View>);
-        }
-        return (<View style={[
-                logoStyles.imageContainer,
-                {
-                    width: size,
-                    height: size,
-                    borderRadius: Math.round(size * 0.23),
-                },
-            ]}>
-        <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
-      </View>);
-    }
-    if (!loadError && Platform.OS !== 'web') {
-        const nativeSource = Platform.select({
-            ios: { uri: 'AppIcon' },
-            android: { uri: 'ic_launcher' },
-            default: { uri: 'AppIcon' },
-        });
-        return (<View style={[
-                logoStyles.imageContainer,
-                {
-                    width: size,
-                    height: size,
-                    borderRadius: Math.round(size * 0.23),
-                },
-            ]}>
-        <Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
-      </View>);
-    }
-    return (<View style={[
-            logoStyles.svgContainer,
-            {
-                width: size,
-                height: size,
-                borderRadius: Math.round(size * 0.23),
-            },
-        ]}>
-      <BrandSquareIcon size={size}/>
-    </View>);
-};
-const logoStyles = StyleSheet.create({
-    svgContainer: {
-        overflow: 'hidden',
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 3,
-    },
-    imageContainer: {
-        overflow: 'hidden',
-        backgroundColor: 'rgba(255, 255, 255, 0.15)',
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.35)',
-        padding: 2,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 3,
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-    },
-});
-export default AppHeaderLogo;
+import b from"react";import{Image as R,StyleSheet as A,View as C}from"react-native";import S from"./BrandSquareIcon";import{AppColors as o}from"../styles/AppColors";export const AppHeaderLogo=({size:e=46,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(b.isValidElement(t)){const y=b.cloneElement(t,{size:e,width:e,height:e});return<C style={[i.container,{width:e,height:e,borderRadius:r}]}>
+          {y}
+        </C>}return<C style={[i.imageContainer,{width:e,height:e,borderRadius:r}]}>
+        <R source={t}style={[i.image,{borderRadius:r-2}]}resizeMode="cover"/>
+      </C>}return<C style={[i.container,{width:e,height:e,borderRadius:r}]}>
+      <S size={e}/>
+    </C>};const i=A.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:o.whiteAlpha33,backgroundColor:o.whiteAlpha12,shadowColor:o.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:5,elevation:4},imageContainer:{overflow:"hidden",backgroundColor:o.whiteAlpha15,borderWidth:1.5,borderColor:o.whiteAlpha33,alignItems:"center",justifyContent:"center",shadowColor:o.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.3,shadowRadius:4,elevation:3,padding:1.5},image:{width:"100%",height:"100%"}});export default AppHeaderLogo;