react-native-inapp-inspector 2.4.1 → 2.5.0

package/dist/commonjs/components/AnalyticsDetail.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,r,i,l){l===void 0&&(l=i);var o=Object.getOwnPropertyDescriptor(r,i);(!o||("get"in o?!r.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return r[i]}}),Object.defineProperty(e,l,o)}):(function(e,r,i,l){l===void 0&&(l=i),e[l]=r[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}):function(e,r){e.default=r}),__importStar=this&&this.__importStar||(function(){var e=function(r){return e=Object.getOwnPropertyNames||function(i){var l=[];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(l[l.length]=o);return l},e(r)};return function(r){if(r&&r.__esModule)return r;var i={};if(r!=null)for(var l=e(r),o=0;o<l.length;o++)l[o]!=="default"&&__createBinding(i,r,l[o]);return __setModuleDefault(i,r),i}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),CopyButton_1=__importDefault(require("./CopyButton")),ShareButton_1=__importDefault(require("./ShareButton")),JsonViewer_1=__importDefault(require("./JsonViewer")),SegmentedTabs_1=__importDefault(require("./SegmentedTabs")),HighlightText_1=__importDefault(require("./HighlightText")),AnimatedEntrance_1=__importDefault(require("./AnimatedEntrance")),AppFonts_1=require("../styles/AppFonts"),AppColors_1=require("../styles/AppColors"),helpers_1=require("../helpers"),shareFormatter_1=require("../helpers/shareFormatter"),gaAnalyticsRegistry_1=require("../helpers/gaAnalyticsRegistry"),i18n_1=require("../i18n"),NetworkIcons_1=require("./NetworkIcons"),AnalyticsDetail=({event:e})=>{const{t:r}=(0,i18n_1.useTranslation)(),[i,l]=(0,react_1.useState)("overview"),[o,w]=(0,react_1.useState)(""),a=(0,react_1.useMemo)(()=>e.params??{},[e.params]),d=(0,react_1.useMemo)(()=>e.userProperties??{},[e.userProperties]),u=(0,react_1.useMemo)(()=>Object.keys(a),[a]),s=(0,react_1.useMemo)(()=>Object.keys(d),[d]),b=(0,react_1.useMemo)(()=>(0,gaAnalyticsRegistry_1.getEventCategory)(e.name,a),[e.name,a]),y=(0,react_1.useMemo)(()=>({name:e.name,timestamp:e.timestamp,source:e.source,...e.screenName?{screenName:e.screenName}:{},...e.screenClass?{screenClass:e.screenClass}:{},...e.userId?{userId:e.userId}:{},...e.sessionId?{sessionId:e.sessionId}:{},...e.trackingId?{trackingId:e.trackingId}:{},params:a,...s.length>0?{userProperties:d}:{}}),[e,a,s.length,d]),m=(0,react_1.useMemo)(()=>{const t=a.value??a.price,n=a.currency??"USD";return t!=null&&!isNaN(Number(t))?{amount:Number(t).toFixed(2),currency:String(n).toUpperCase()}:null},[a]),f=(0,react_1.useMemo)(()=>Array.isArray(a.items)?a.items.length:null,[a.items]),h=(0,react_1.useMemo)(()=>e.screenName||a.firebase_screen||a.screen_name||a.page_title||e.screenClass||a.firebase_screen_class,[e.screenName,e.screenClass,a]),x=(0,react_1.useMemo)(()=>{const t=Object.entries(a);if(!o.trim())return t;const n=o.toLowerCase();return t.filter(([_,c])=>{const C=typeof c=="object"?JSON.stringify(c):String(c);return _.toLowerCase().includes(n)||C.toLowerCase().includes(n)})},[a,o]),p=(0,react_1.useMemo)(()=>{switch(b){case"ecommerce":return{label:r("analytics.ecommerceCategory"),color:AppColors_1.AppColors.amber700,bg:AppColors_1.AppColors.amber100,border:AppColors_1.AppColors.amber200,icon:t=><NetworkIcons_1.CartIcon color={t}size={11}/>};case"page_view":return{label:r("analytics.screensCategory"),color:AppColors_1.AppColors.sky600,bg:AppColors_1.AppColors.sky100,border:AppColors_1.AppColors.sky400,icon:t=><NetworkIcons_1.GlobeIcon color={t}size={11}/>};case"system":return{label:r("analytics.systemCategory"),color:AppColors_1.AppColors.purple,bg:AppColors_1.AppColors.purple100,border:AppColors_1.AppColors.purple200,icon:t=><NetworkIcons_1.BoltIcon color={t}size={11}/>};default:return{label:r("analytics.customCategory"),color:AppColors_1.AppColors.brandPurple,bg:AppColors_1.AppColors.purple100,border:AppColors_1.AppColors.purple200,icon:t=><NetworkIcons_1.SparkleIcon color={t}size={11}/>}}},[b,r]),T=[{key:"overview",label:`${r("analytics.overviewTab")} (${u.length})`,icon:t=><NetworkIcons_1.TableIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:t=><NetworkIcons_1.PrettyIcon color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>}];return<react_native_1.ScrollView style={detailStyles.scroll}contentContainerStyle={detailStyles.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,t,i,l){l===void 0&&(l=i);var o=Object.getOwnPropertyDescriptor(t,i);(!o||("get"in o?!t.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,l,o)}):(function(e,t,i,l){l===void 0&&(l=i),e[l]=t[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}):function(e,t){e.default=t}),__importStar=this&&this.__importStar||(function(){var e=function(t){return e=Object.getOwnPropertyNames||function(i){var l=[];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(l[l.length]=o);return l},e(t)};return function(t){if(t&&t.__esModule)return t;var i={};if(t!=null)for(var l=e(t),o=0;o<l.length;o++)l[o]!=="default"&&__createBinding(i,t,l[o]);return __setModuleDefault(i,t),i}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),CopyButton_1=__importDefault(require("./CopyButton")),ShareButton_1=__importDefault(require("./ShareButton")),JsonViewer_1=__importDefault(require("./JsonViewer")),SegmentedTabs_1=__importDefault(require("./SegmentedTabs")),HighlightText_1=__importDefault(require("./HighlightText")),AnimatedEntrance_1=__importDefault(require("./AnimatedEntrance")),AppFonts_1=require("../styles/AppFonts"),AppColors_1=require("../styles/AppColors"),helpers_1=require("../helpers"),shareFormatter_1=require("../helpers/shareFormatter"),gaAnalyticsRegistry_1=require("../helpers/gaAnalyticsRegistry"),i18n_1=require("../i18n"),NetworkIcons_1=require("./NetworkIcons"),AnalyticsDetail=({event:e})=>{const{t}=(0,i18n_1.useTranslation)(),[i,l]=(0,react_1.useState)("overview"),[o,w]=(0,react_1.useState)(""),a=(0,react_1.useMemo)(()=>e.params??{},[e.params]),d=(0,react_1.useMemo)(()=>e.userProperties??{},[e.userProperties]),u=(0,react_1.useMemo)(()=>Object.keys(a),[a]),s=(0,react_1.useMemo)(()=>Object.keys(d),[d]),b=(0,react_1.useMemo)(()=>(0,gaAnalyticsRegistry_1.getEventCategory)(e.name,a),[e.name,a]),y=(0,react_1.useMemo)(()=>({name:e.name,timestamp:e.timestamp,source:e.source,...e.screenName?{screenName:e.screenName}:{},...e.screenClass?{screenClass:e.screenClass}:{},...e.userId?{userId:e.userId}:{},...e.sessionId?{sessionId:e.sessionId}:{},...e.trackingId?{trackingId:e.trackingId}:{},params:a,...s.length>0?{userProperties:d}:{}}),[e,a,s.length,d]),m=(0,react_1.useMemo)(()=>{const r=a.value??a.price,n=a.currency??"USD";return r!=null&&!isNaN(Number(r))?{amount:Number(r).toFixed(2),currency:String(n).toUpperCase()}:null},[a]),f=(0,react_1.useMemo)(()=>Array.isArray(a.items)?a.items.length:null,[a.items]),h=(0,react_1.useMemo)(()=>e.screenName||a.firebase_screen||a.screen_name||a.page_title||e.screenClass||a.firebase_screen_class,[e.screenName,e.screenClass,a]),x=(0,react_1.useMemo)(()=>{const r=Object.entries(a);if(!o.trim())return r;const n=o.toLowerCase();return r.filter(([_,c])=>{const C=typeof c=="object"?JSON.stringify(c):String(c);return _.toLowerCase().includes(n)||C.toLowerCase().includes(n)})},[a,o]),p=(0,react_1.useMemo)(()=>{switch(b){case"ecommerce":return{label:t("analytics.ecommerceCategory"),color:AppColors_1.AppColors.amber700,bg:AppColors_1.AppColors.amber100,border:AppColors_1.AppColors.amber200,icon:r=><NetworkIcons_1.CartIcon color={r}size={11}/>};case"page_view":return{label:t("analytics.screensCategory"),color:AppColors_1.AppColors.sky600,bg:AppColors_1.AppColors.sky100,border:AppColors_1.AppColors.sky400,icon:r=><NetworkIcons_1.GlobeIcon color={r}size={11}/>};case"system":return{label:t("analytics.systemCategory"),color:AppColors_1.AppColors.purple,bg:AppColors_1.AppColors.purple100,border:AppColors_1.AppColors.purple200,icon:r=><NetworkIcons_1.BoltIcon color={r}size={11}/>};default:return{label:t("analytics.customCategory"),color:AppColors_1.AppColors.brandPurple,bg:AppColors_1.AppColors.purple100,border:AppColors_1.AppColors.purple200,icon:r=><NetworkIcons_1.SparkleIcon color={r}size={11}/>}}},[b,t]),T=[{key:"overview",label:`${t("analytics.overviewTab")} (${u.length})`,icon:r=><NetworkIcons_1.TableIcon color={r?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:r=><NetworkIcons_1.PrettyIcon color={r?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>}];return<react_native_1.ScrollView style={detailStyles.scroll}contentContainerStyle={detailStyles.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
       
       
       <react_native_1.View style={detailStyles.heroCard}>
@@ -16,7 +16,7 @@
             <react_native_1.View style={[detailStyles.sourceBadge,e.source==="firebase"?{backgroundColor:AppColors_1.AppColors.amberBg,borderColor:AppColors_1.AppColors.amberBorder}:{backgroundColor:AppColors_1.AppColors.purpleBg,borderColor:AppColors_1.AppColors.purpleBorder}]}>
               <react_native_1.View style={[detailStyles.sourceDot,{backgroundColor:e.source==="firebase"?AppColors_1.AppColors.firebaseOrange:AppColors_1.AppColors.purple}]}/>
               <react_native_1.Text style={[detailStyles.sourceBadgeText,{color:e.source==="firebase"?AppColors_1.AppColors.amber800Warm:AppColors_1.AppColors.purple}]}>
-                {e.source==="firebase"?r("analytics.sourceFirebase"):r("analytics.sourceCustom")}
+                {e.source==="firebase"?t("analytics.sourceFirebase"):t("analytics.sourceCustom")}
               </react_native_1.Text>
             </react_native_1.View>
 
@@ -32,7 +32,7 @@
           
           <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
             <ShareButton_1.default onShare={()=>(0,shareFormatter_1.shareAnalyticsReport)(e)}/>
-            <CopyButton_1.default value={JSON.stringify(y,null,2)}label={r("analytics.eventDetails")}/>
+            <CopyButton_1.default value={JSON.stringify(y,null,2)}label={t("analytics.eventDetails")}/>
           </react_native_1.View>
         </react_native_1.View>
 
@@ -63,17 +63,17 @@
         
         <react_native_1.View style={detailStyles.metricsBar}>
           <react_native_1.View style={detailStyles.metricPill}>
-            <react_native_1.Text style={detailStyles.metricLabel}>Params:</react_native_1.Text>
+            <react_native_1.Text style={detailStyles.metricLabel}>{t("analytics.metricParams","Params:")}</react_native_1.Text>
             <react_native_1.Text style={detailStyles.metricValue}>{u.length}</react_native_1.Text>
           </react_native_1.View>
 
           {s.length>0&&<react_native_1.View style={detailStyles.metricPill}>
-              <react_native_1.Text style={detailStyles.metricLabel}>User Props:</react_native_1.Text>
+              <react_native_1.Text style={detailStyles.metricLabel}>{t("analytics.metricUserProps","User Props:")}</react_native_1.Text>
               <react_native_1.Text style={detailStyles.metricValue}>{s.length}</react_native_1.Text>
             </react_native_1.View>}
 
           <react_native_1.View style={detailStyles.metricPill}>
-            <react_native_1.Text style={detailStyles.metricLabel}>Size:</react_native_1.Text>
+            <react_native_1.Text style={detailStyles.metricLabel}>{t("analytics.metricSize","Size:")}</react_native_1.Text>
             <react_native_1.Text style={detailStyles.metricValue}>{(0,helpers_1.getSize)(y)}</react_native_1.Text>
           </react_native_1.View>
 
@@ -87,7 +87,7 @@
           {f!==null&&<react_native_1.View style={detailStyles.itemsPill}>
               <NetworkIcons_1.PackageIcon size={12}color={AppColors_1.AppColors.blue700}/>
               <react_native_1.Text style={detailStyles.itemsValue}>
-                {f} items
+                {t("analytics.metricItems",{count:f},"{{count}} items")}
               </react_native_1.Text>
             </react_native_1.View>}
         </react_native_1.View>
@@ -95,7 +95,7 @@
 
       
       <react_native_1.View style={detailStyles.tabsWrap}>
-        <SegmentedTabs_1.default tabs={T}activeKey={i}onChange={t=>l(t)}/>
+        <SegmentedTabs_1.default tabs={T}activeKey={i}onChange={r=>l(r)}/>
       </react_native_1.View>
 
       
@@ -104,19 +104,19 @@
           {(e.userId||e.sessionId||e.trackingId)&&<react_native_1.View style={detailStyles.sectionCard}>
               <react_native_1.View style={detailStyles.sectionHeader}>
                 <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple}size={12}/>
-                <react_native_1.Text style={detailStyles.sectionTitle}>SESSION & IDENTITY</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.sectionTitle}>{t("analytics.sessionIdentity","SESSION & IDENTITY")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={detailStyles.sectionBody}>
                 {e.userId&&<react_native_1.View style={detailStyles.kvRow}>
-                    <react_native_1.Text style={detailStyles.kvKey}>User ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvKey}>{t("analytics.userId","User ID")}:</react_native_1.Text>
                     <react_native_1.Text style={detailStyles.kvVal}selectable>{e.userId}</react_native_1.Text>
                   </react_native_1.View>}
                 {e.sessionId&&<react_native_1.View style={detailStyles.kvRow}>
-                    <react_native_1.Text style={detailStyles.kvKey}>Session ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvKey}>{t("analytics.sessionId","Session ID")}:</react_native_1.Text>
                     <react_native_1.Text style={detailStyles.kvVal}selectable>{e.sessionId}</react_native_1.Text>
                   </react_native_1.View>}
                 {e.trackingId&&<react_native_1.View style={detailStyles.kvRow}>
-                    <react_native_1.Text style={detailStyles.kvKey}>Tracking ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvKey}>{t("analytics.trackingId","Tracking ID")}:</react_native_1.Text>
                     <react_native_1.Text style={detailStyles.kvVal}selectable>{e.trackingId}</react_native_1.Text>
                   </react_native_1.View>}
               </react_native_1.View>
@@ -128,18 +128,18 @@
               <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
                 <NetworkIcons_1.TableIcon color={AppColors_1.AppColors.brandPurple}size={12}/>
                 <react_native_1.Text style={detailStyles.sectionTitle}>
-                  EVENT PARAMETERS ({u.length})
+                  {t("analytics.eventParameters",{count:u.length},"EVENT PARAMETERS ({{count}})")}
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.Text style={detailStyles.sectionSubtitle}>
-                Key-Value Attributes
+                {t("analytics.keyValueAttributes","Key-Value Attributes")}
               </react_native_1.Text>
             </react_native_1.View>
 
             
             {u.length>4&&<react_native_1.View style={detailStyles.searchBar}>
                 <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
-                <react_native_1.TextInput placeholder="Filter parameters by key or value..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={o}onChangeText={w}style={detailStyles.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+                <react_native_1.TextInput placeholder={t("analytics.filterParamsPlaceholder","Filter parameters by key or value...")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={o}onChangeText={w}style={detailStyles.searchInput}autoCorrect={!1}autoCapitalize="none"/>
                 {o.length>0&&<react_native_1.Pressable onPress={()=>w("")}hitSlop={8}>
                     <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
                   </react_native_1.Pressable>}
@@ -148,19 +148,19 @@
             {u.length===0?<react_native_1.View style={detailStyles.emptyParamsBox}>
                 <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.grayTextWeak}size={16}/>
                 <react_native_1.Text style={detailStyles.emptyParamsText}>
-                  No custom parameters recorded for this event.
+                  {t("analytics.noParamsRecorded","No custom parameters recorded for this event.")}
                 </react_native_1.Text>
               </react_native_1.View>:x.length===0?<react_native_1.View style={detailStyles.emptyParamsBox}>
                 <react_native_1.Text style={detailStyles.emptyParamsText}>
-                  No parameters matching "{o}"
+                  {t("analytics.noParamsMatching",{search:o},'No parameters matching "{{search}}"')}
                 </react_native_1.Text>
               </react_native_1.View>:<react_native_1.View style={detailStyles.paramList}>
-                {x.map(([t,n],_)=>{const c=typeof n=="object"&&n!==null,C=Array.isArray(n);let g=typeof n;n===null?g="null":C?g=`array [${n.length}]`:c&&(g="object");const A=c?JSON.stringify(n,null,2):String(n),V=t==="value"||t==="price"||t==="currency"||t==="screen_name"||t==="item_id"||t==="item_name";return<AnimatedEntrance_1.default key={t}index={_}distance={4}>
+                {x.map(([r,n],_)=>{const c=typeof n=="object"&&n!==null,C=Array.isArray(n);let g=typeof n;n===null?g="null":C?g=`array [${n.length}]`:c&&(g="object");const A=c?JSON.stringify(n,null,2):String(n),V=r==="value"||r==="price"||r==="currency"||r==="screen_name"||r==="item_id"||r==="item_name";return<AnimatedEntrance_1.default key={r}index={_}distance={4}>
                       <react_native_1.View style={detailStyles.paramCard}>
                         
                         <react_native_1.View style={detailStyles.paramCardHeader}>
                           <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0}}>
-                            <HighlightText_1.default text={t}search={o}style={[detailStyles.paramKeyText,V&&detailStyles.paramKeyHighlighted]}highlightStyle={detailStyles.highlight}/>
+                            <HighlightText_1.default text={r}search={o}style={[detailStyles.paramKeyText,V&&detailStyles.paramKeyHighlighted]}highlightStyle={detailStyles.highlight}/>
                             <react_native_1.View style={detailStyles.typeBadge}>
                               <react_native_1.Text style={detailStyles.typeBadgeText}>
                                 {g.toUpperCase()}
@@ -168,7 +168,7 @@
                             </react_native_1.View>
                           </react_native_1.View>
 
-                          <CopyButton_1.default value={A}label={t}/>
+                          <CopyButton_1.default value={A}label={r}/>
                         </react_native_1.View>
 
                         
@@ -189,10 +189,10 @@
                 </react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={detailStyles.sectionBody}>
-                {s.map(t=><react_native_1.View key={t}style={detailStyles.kvRow}>
-                    <react_native_1.Text style={detailStyles.kvKey}>{t}:</react_native_1.Text>
+                {s.map(r=><react_native_1.View key={r}style={detailStyles.kvRow}>
+                    <react_native_1.Text style={detailStyles.kvKey}>{r}:</react_native_1.Text>
                     <react_native_1.Text style={detailStyles.kvVal}selectable>
-                      {String(d[t])}
+                      {String(d[r])}
                     </react_native_1.Text>
                   </react_native_1.View>)}
               </react_native_1.View>

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -97,4 +97,4 @@
           </react_native_1.View>
         </react_native_1.View>
       </TouchableScale_1.default>
-    </react_native_1.View>}),cardStyles=react_native_1.StyleSheet.create({container:{paddingHorizontal:10,paddingVertical:4,height:86,justifyContent:"center"},gapContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center",marginVertical:4,gap:8},gapLine:{flex:1,height:1,backgroundColor:`${AppColors_1.AppColors.dividerColor}`},gapText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.5},modernCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,paddingHorizontal:12,paddingVertical:9,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.03,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1,overflow:"hidden",height:78,justifyContent:"space-between"},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",height:24},iconBadge:{width:22,height:22,borderRadius:6,borderWidth:1,alignItems:"center",justifyContent:"center"},eventName:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,lineHeight:17,letterSpacing:.1,color:AppColors_1.AppColors.primaryBlack},timestamp:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,lineHeight:14,color:AppColors_1.AppColors.grayTextWeak},highlight:{backgroundColor:AppColors_1.AppColors.yellowHighlight,color:AppColors_1.AppColors.primaryBlack,borderRadius:2},cardBody:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:24,overflow:"hidden"},chipsRow:{flexDirection:"row",alignItems:"center",flexWrap:"nowrap",gap:6,flex:1,overflow:"hidden"},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:6,paddingVertical:2.5,borderRadius:4.5,borderWidth:1,gap:3.5},chipText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,lineHeight:13,color:AppColors_1.AppColors.grayText},screenDot:{width:5,height:5,borderRadius:2.5},duplicateBadge:{backgroundColor:AppColors_1.AppColors.roseBg,borderColor:AppColors_1.AppColors.roseBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},duplicateText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.rose600,textTransform:"uppercase"},idBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:5,backgroundColor:`${AppColors_1.AppColors.slate500}12`,borderWidth:1,borderColor:`${AppColors_1.AppColors.slate500}22`},idBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.2},categoryBadge:{borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},categoryText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,textTransform:"uppercase",letterSpacing:.4}});exports.default=AnalyticsEventCard;
+    </react_native_1.View>}),cardStyles=react_native_1.StyleSheet.create({container:{paddingHorizontal:5,paddingVertical:4,height:86,justifyContent:"center"},gapContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center",marginVertical:4,gap:8},gapLine:{flex:1,height:1,backgroundColor:`${AppColors_1.AppColors.dividerColor}`},gapText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.5},modernCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,paddingHorizontal:8,paddingVertical:8,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.03,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1,overflow:"hidden",height:78,justifyContent:"space-between"},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",height:24},iconBadge:{width:22,height:22,borderRadius:6,borderWidth:1,alignItems:"center",justifyContent:"center"},eventName:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,lineHeight:17,letterSpacing:.1,color:AppColors_1.AppColors.primaryBlack},timestamp:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,lineHeight:14,color:AppColors_1.AppColors.grayTextWeak},highlight:{backgroundColor:AppColors_1.AppColors.yellowHighlight,color:AppColors_1.AppColors.primaryBlack,borderRadius:2},cardBody:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:24,overflow:"hidden"},chipsRow:{flexDirection:"row",alignItems:"center",flexWrap:"nowrap",gap:6,flex:1,overflow:"hidden"},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:6,paddingVertical:2.5,borderRadius:4.5,borderWidth:1,gap:3.5},chipText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,lineHeight:13,color:AppColors_1.AppColors.grayText},screenDot:{width:5,height:5,borderRadius:2.5},duplicateBadge:{backgroundColor:AppColors_1.AppColors.roseBg,borderColor:AppColors_1.AppColors.roseBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},duplicateText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.rose600,textTransform:"uppercase"},idBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:5,backgroundColor:`${AppColors_1.AppColors.slate500}12`,borderWidth:1,borderColor:`${AppColors_1.AppColors.slate500}22`},idBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.2},categoryBadge:{borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},categoryText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,textTransform:"uppercase",letterSpacing:.4}});exports.default=AnalyticsEventCard;

package/dist/commonjs/components/AnalyticsGraph.js

@@ -1,56 +1,56 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,r,a){a===void 0&&(a=r);var n=Object.getOwnPropertyDescriptor(e,r);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,a,n)}):(function(t,e,r,a){a===void 0&&(a=r),t[a]=e[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(r){var a=[];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(a[a.length]=n);return a},t(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var a=t(e),n=0;n<a.length;n++)a[n]!=="default"&&__createBinding(r,e,a[n]);return __setModuleDefault(r,e),r}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../styles/AppColors"),AppFonts_1=require("../styles/AppFonts"),BAR_HEIGHT=24,PADDING_Y=12,AnalyticsGraph=({event:t,accentColor:e})=>{const r=t.params||{},n=(Array.isArray(r.items)?r.items:null)?.filter(l=>typeof l.price=="number")||[],s=[];Object.entries(r).forEach(([l,p])=>{typeof p=="number"&&!l.toLowerCase().includes("id")&&!l.toLowerCase().includes("timestamp")&&s.push({key:l,value:p})});const o=[];Object.entries(r).forEach(([l,p])=>{if(typeof p=="string"&&p.length>=10&&/^\d{4}-\d{2}-\d{2}/.test(p)){const g=new Date(p);isNaN(g.getTime())||o.push({key:l,date:g})}});const i={string:0,number:0,boolean:0,object:0},c=[];Object.entries(r).forEach(([l,p])=>{const g=typeof p;g==="string"?(i.string++,c.push({label:l,value:p.length})):g==="number"?i.number++:g==="boolean"?i.boolean++:g==="object"&&p!==null&&i.object++});const u=[{label:"Strings",value:i.string,color:AppColors_1.AppColors.purple},{label:"Numbers",value:i.number,color:AppColors_1.AppColors.skyBlue},{label:"Booleans",value:i.boolean,color:AppColors_1.AppColors.amber500},{label:"Objects",value:i.object,color:AppColors_1.AppColors.greenColor}].filter(l=>l.value>0);c.sort((l,p)=>p.value-l.value);const h=c.slice(0,5),y=n.length>0,d=s.length>0,_=o.length>0,m=h.length>0,v=u.length>0,f=react_native_1.Dimensions.get("window").width-60-40;return<react_native_1.View style={graphStyles.container}>
-      <react_native_1.Text style={graphStyles.headerTitle}>Data Visualization</react_native_1.Text>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,t,r,e){e===void 0&&(e=r);var n=Object.getOwnPropertyDescriptor(t,r);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(a,e,n)}):(function(a,t,r,e){e===void 0&&(e=r),a[e]=t[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,t){Object.defineProperty(a,"default",{enumerable:!0,value:t})}):function(a,t){a.default=t}),__importStar=this&&this.__importStar||(function(){var a=function(t){return a=Object.getOwnPropertyNames||function(r){var e=[];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[e.length]=n);return e},a(t)};return function(t){if(t&&t.__esModule)return t;var r={};if(t!=null)for(var e=a(t),n=0;n<e.length;n++)e[n]!=="default"&&__createBinding(r,t,e[n]);return __setModuleDefault(r,t),r}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../styles/AppColors"),AppFonts_1=require("../styles/AppFonts"),i18n_1=require("../i18n"),BAR_HEIGHT=24,PADDING_Y=12,AnalyticsGraph=({event:a,accentColor:t})=>{const{t:r}=(0,i18n_1.useTranslation)(),e=a.params||{},l=(Array.isArray(e.items)?e.items:null)?.filter(i=>typeof i.price=="number")||[],o=[];Object.entries(e).forEach(([i,s])=>{typeof s=="number"&&!i.toLowerCase().includes("id")&&!i.toLowerCase().includes("timestamp")&&o.push({key:i,value:s})});const c=[],p=/^\d{4}-\d{2}-\d{2}/;Object.entries(e).forEach(([i,s])=>{if(typeof s=="string"&&s.length>=10&&p.test(s)){const g=new Date(s);isNaN(g.getTime())||c.push({key:i,date:g})}});const u={};Object.values(e).forEach(i=>{let s=typeof i;i===null&&(s="null"),Array.isArray(i)&&(s="array"),u[s]=(u[s]||0)+1});const h=[AppColors_1.AppColors.purple,AppColors_1.AppColors.skyBlue,AppColors_1.AppColors.amber500,AppColors_1.AppColors.greenColor],y=Object.entries(u).map(([i,s],g)=>({label:i,value:s,color:h[g%h.length]})),d=[];Object.entries(e).forEach(([i,s])=>{typeof s=="string"&&d.push({label:i,value:s.length})}),d.sort((i,s)=>s.value-i.value);const f=d.slice(0,5),m=l.length>0,v=o.length>0,w=c.length>0,x=f.length>0,C=y.length>0,_=react_native_1.Dimensions.get("window").width-60-40;return<react_native_1.View style={graphStyles.container}>
+      <react_native_1.Text style={graphStyles.headerTitle}>{r("analytics.dataVisualization","Data Visualization")}</react_native_1.Text>
 
-      {v&&<react_native_1.View style={graphStyles.chartBlock}>
-          <react_native_1.Text style={graphStyles.chartTitle}>Data Types Breakdown</react_native_1.Text>
-          <DonutChart data={u}/>
+      {C&&<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>{r("analytics.dataTypesBreakdown","Data Types Breakdown")}</react_native_1.Text>
+          <DonutChart data={y}/>
         </react_native_1.View>}
 
-      {m&&<react_native_1.View style={graphStyles.chartBlock}>
-          <react_native_1.Text style={graphStyles.chartTitle}>Highest Payload Strings</react_native_1.Text>
-          <BarChart data={h}accentColor={AppColors_1.AppColors.purple}maxBarWidth={f}isGradient/>
+      {x&&<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>{r("analytics.highestPayloadStrings","Highest Payload Strings")}</react_native_1.Text>
+          <BarChart data={f}accentColor={AppColors_1.AppColors.purple}maxBarWidth={_}isGradient/>
         </react_native_1.View>}
 
-      {d&&<react_native_1.View style={graphStyles.chartBlock}>
-          <react_native_1.Text style={graphStyles.chartTitle}>Top-Level Metrics</react_native_1.Text>
-          <GaugeChart data={s.map(l=>({label:l.key,value:l.value}))}accentColor={e}/>
+      {v&&<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>{r("analytics.topLevelMetrics","Top-Level Metrics")}</react_native_1.Text>
+          <GaugeChart data={o.map(i=>({label:i.key,value:i.value}))}accentColor={t}/>
         </react_native_1.View>}
 
-      {_&&<react_native_1.View style={graphStyles.chartBlock}>
-          <react_native_1.Text style={graphStyles.chartTitle}>Important Dates</react_native_1.Text>
-          <CalendarChart data={o.map(l=>({label:l.key,date:l.date}))}accentColor={e}/>
+      {w&&<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>{r("analytics.importantDates","Important Dates")}</react_native_1.Text>
+          <CalendarChart data={c.map(i=>({label:i.key,date:i.date}))}accentColor={t}/>
         </react_native_1.View>}
 
-      {y&&<react_native_1.View style={graphStyles.chartBlock}>
-          <react_native_1.Text style={graphStyles.chartTitle}>Item Prices</react_native_1.Text>
-          <BarChart data={n.map((l,p)=>({label:l.item_name||l.item_id||`Item ${p+1}`,value:l.price}))}accentColor={AppColors_1.AppColors.successGreen}maxBarWidth={f}isGradient={!1}/>
+      {m&&<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>{r("analytics.itemPrices","Item Prices")}</react_native_1.Text>
+          <BarChart data={l.map((i,s)=>({label:i.item_name||i.item_id||`Item ${s+1}`,value:i.price}))}accentColor={AppColors_1.AppColors.successGreen}maxBarWidth={_}isGradient={!1}/>
         </react_native_1.View>}
-    </react_native_1.View>},polarToCartesian=(t,e,r,a)=>{const n=(a-90)*Math.PI/180;return{x:t+r*Math.cos(n),y:e+r*Math.sin(n)}},getPiePath=(t,e,r,a,n,s)=>{const o=polarToCartesian(t,e,r,s),i=polarToCartesian(t,e,r,n),c=polarToCartesian(t,e,a,s),u=polarToCartesian(t,e,a,n),h=s-n<=180?"0":"1";return`
+    </react_native_1.View>},polarToCartesian=(a,t,r,e)=>{const n=(e-90)*Math.PI/180;return{x:a+r*Math.cos(n),y:t+r*Math.sin(n)}},getPiePath=(a,t,r,e,n,l)=>{const o=polarToCartesian(a,t,r,l),c=polarToCartesian(a,t,r,n),p=polarToCartesian(a,t,e,l),u=polarToCartesian(a,t,e,n),h=l-n<=180?"0":"1";return`
     M ${o.x} ${o.y}
-    A ${r} ${r} 0 ${h} 0 ${i.x} ${i.y}
+    A ${r} ${r} 0 ${h} 0 ${c.x} ${c.y}
     L ${u.x} ${u.y}
-    A ${a} ${a} 0 ${h} 1 ${c.x} ${c.y}
+    A ${e} ${e} 0 ${h} 1 ${p.x} ${p.y}
     Z
-  `},DonutChart=({data:t})=>{const e=t.reduce((o,i)=>o+i.value,0);if(e===0)return null;let r=0;const a=50,n=30,s=60;return<react_native_1.View style={{flexDirection:"row",alignItems:"center"}}>
+  `},DonutChart=({data:a})=>{const t=a.reduce((o,c)=>o+c.value,0);if(t===0)return null;let r=0;const e=50,n=30,l=60;return<react_native_1.View style={{flexDirection:"row",alignItems:"center"}}>
       <react_native_svg_1.default width="120"height="120"viewBox="0 0 120 120">
-        {t.map((o,i)=>{if(o.value===0)return null;const c=o.value/e*360,u=r,h=r+c;if(r+=c,c===360)return<react_1.default.Fragment key={i}>
-                <react_native_svg_1.Circle cx={s}cy={s}r={a}fill={o.color}/>
-                <react_native_svg_1.Circle cx={s}cy={s}r={n}fill={AppColors_1.AppColors.primaryLight}/>
-              </react_1.default.Fragment>;const y=getPiePath(s,s,a,n,u,h);return<react_native_svg_1.Path key={i}d={y}fill={o.color}/>})}
+        {a.map((o,c)=>{if(o.value===0)return null;const p=o.value/t*360,u=r,h=r+p;if(r+=p,p===360)return<react_1.default.Fragment key={c}>
+                <react_native_svg_1.Circle cx={l}cy={l}r={e}fill={o.color}/>
+                <react_native_svg_1.Circle cx={l}cy={l}r={n}fill={AppColors_1.AppColors.primaryLight}/>
+              </react_1.default.Fragment>;const y=getPiePath(l,l,e,n,u,h);return<react_native_svg_1.Path key={c}d={y}fill={o.color}/>})}
       </react_native_svg_1.default>
       <react_native_1.View style={{marginLeft:16,flex:1,gap:6}}>
-        {t.map((o,i)=>o.value===0?null:<react_native_1.View key={i}style={{flexDirection:"row",alignItems:"center",gap:6}}>
+        {a.map((o,c)=>o.value===0?null:<react_native_1.View key={c}style={{flexDirection:"row",alignItems:"center",gap:6}}>
               <react_native_1.View style={{width:10,height:10,borderRadius:5,backgroundColor:o.color}}/>
               <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong}}>
                 {o.label} ({o.value})
               </react_native_1.Text>
             </react_native_1.View>)}
       </react_native_1.View>
-    </react_native_1.View>},GaugeChart=({data:t,accentColor:e})=>{const r=Math.max(...t.map(o=>Math.abs(o.value)),1),a=26,n=5,s=2*Math.PI*a;return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
-      {t.map(o=>{const i=Math.min(Math.abs(o.value)/r,1),c=Math.max(s-i*s,.001);return<react_native_1.View key={o.label}style={{alignItems:"center",width:70}}>
+    </react_native_1.View>},GaugeChart=({data:a,accentColor:t})=>{const r=Math.max(...a.map(o=>Math.abs(o.value)),1),e=26,n=5,l=2*Math.PI*e;return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {a.map(o=>{const c=Math.min(Math.abs(o.value)/r,1),p=Math.max(l-c*l,.001);return<react_native_1.View key={o.label}style={{alignItems:"center",width:70}}>
             <react_native_svg_1.default width="60"height="60"viewBox="0 0 60 60">
-              <react_native_svg_1.Circle cx="30"cy="30"r={a}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeWidth={n}fill="none"/>
-              <react_native_svg_1.Circle cx="30"cy="30"r={a}stroke={e}strokeWidth={n}fill="none"strokeLinecap="round"strokeDasharray={s}strokeDashoffset={c}rotation="-90"origin="30, 30"/>
+              <react_native_svg_1.Circle cx="30"cy="30"r={e}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeWidth={n}fill="none"/>
+              <react_native_svg_1.Circle cx="30"cy="30"r={e}stroke={t}strokeWidth={n}fill="none"strokeLinecap="round"strokeDasharray={l}strokeDashoffset={p}rotation="-90"origin="30, 30"/>
             </react_native_svg_1.default>
             <react_native_1.View style={{position:"absolute",top:20,height:20,width:60,justifyContent:"center",alignItems:"center"}}>
               <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,textAlign:"center"}}>
@@ -61,13 +61,13 @@
               {o.label}
             </react_native_1.Text>
           </react_native_1.View>})}
-    </react_native_1.ScrollView>},CalendarChart=({data:t,accentColor:e})=>{const r=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
-      {t.map((a,n)=>{const s=r[a.date.getMonth()],o=a.date.getDate(),i=a.date.getFullYear();return<react_native_1.View key={a.label+n}style={{width:70,alignItems:"center"}}>
+    </react_native_1.ScrollView>},CalendarChart=({data:a,accentColor:t})=>{const r=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {a.map((e,n)=>{const l=r[e.date.getMonth()],o=e.date.getDate(),c=e.date.getFullYear();return<react_native_1.View key={e.label+n}style={{width:70,alignItems:"center"}}>
             <react_native_1.View style={{width:58,height:62,backgroundColor:AppColors_1.AppColors.white,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,overflow:"hidden",shadowColor:AppColors_1.AppColors.black,shadowOpacity:.05,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2}}>
               
-              <react_native_1.View style={{backgroundColor:e,height:18,justifyContent:"center",alignItems:"center"}}>
+              <react_native_1.View style={{backgroundColor:t,height:18,justifyContent:"center",alignItems:"center"}}>
                 <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:AppColors_1.AppColors.white,textTransform:"uppercase",letterSpacing:.5}}>
-                  {s} {i}
+                  {l} {c}
                 </react_native_1.Text>
               </react_native_1.View>
               
@@ -79,31 +79,31 @@
             </react_native_1.View>
 
             <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginTop:8,textAlign:"center"}}numberOfLines={2}>
-              {a.label.replace(/_/g," ")}
+              {e.label.replace(/_/g," ")}
             </react_native_1.Text>
           </react_native_1.View>})}
-    </react_native_1.ScrollView>},BarChart=({data:t,accentColor:e,maxBarWidth:r,isGradient:a=!1})=>{const n=Math.max(...t.map(o=>o.value),1),s=t.length*(BAR_HEIGHT+PADDING_Y)+10;return<react_native_1.View style={graphStyles.svgContainer}>
-      <react_native_svg_1.default width="100%"height={s}>
+    </react_native_1.ScrollView>},BarChart=({data:a,accentColor:t,maxBarWidth:r,isGradient:e=!1})=>{const n=Math.max(...a.map(o=>o.value),1),l=a.length*(BAR_HEIGHT+PADDING_Y)+10;return<react_native_1.View style={graphStyles.svgContainer}>
+      <react_native_svg_1.default width="100%"height={l}>
         <react_native_svg_1.Defs>
           <react_native_svg_1.LinearGradient id="barGrad"x1="0"y1="0"x2="1"y2="0">
-            <react_native_svg_1.Stop offset="0"stopColor={e}stopOpacity="0.6"/>
-            <react_native_svg_1.Stop offset="1"stopColor={e}stopOpacity="1"/>
+            <react_native_svg_1.Stop offset="0"stopColor={t}stopOpacity="0.6"/>
+            <react_native_svg_1.Stop offset="1"stopColor={t}stopOpacity="1"/>
           </react_native_svg_1.LinearGradient>
         </react_native_svg_1.Defs>
-        {t.map((o,i)=>{const c=i*(BAR_HEIGHT+PADDING_Y),u=Math.max(o.value/n*r,2);return<react_1.default.Fragment key={o.label}>
+        {a.map((o,c)=>{const p=c*(BAR_HEIGHT+PADDING_Y),u=Math.max(o.value/n*r,2);return<react_1.default.Fragment key={o.label}>
               
-              <react_native_svg_1.Text x={0}y={c+12}fill={AppColors_1.AppColors.grayTextStrong}fontSize="11"fontFamily={AppFonts_1.AppFonts.interMedium}>
+              <react_native_svg_1.Text x={0}y={p+12}fill={AppColors_1.AppColors.grayTextStrong}fontSize="11"fontFamily={AppFonts_1.AppFonts.interMedium}>
                 {o.label}
               </react_native_svg_1.Text>
 
               
-              <react_native_svg_1.Line x1={0}y1={c+24}x2={r}y2={c+24}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeDasharray="4"/>
+              <react_native_svg_1.Line x1={0}y1={p+24}x2={r}y2={p+24}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeDasharray="4"/>
 
               
-              <react_native_svg_1.Rect x={0}y={c+16}width={u}height={14}fill={a?"url(#barGrad)":e}rx={4}opacity={.85}/>
+              <react_native_svg_1.Rect x={0}y={p+16}width={u}height={14}fill={e?"url(#barGrad)":t}rx={4}opacity={.85}/>
 
               
-              <react_native_svg_1.Text x={u+6}y={c+26}fill={AppColors_1.AppColors.primaryBlack}fontSize="11"fontFamily={AppFonts_1.AppFonts.interBold}>
+              <react_native_svg_1.Text x={u+6}y={p+26}fill={AppColors_1.AppColors.primaryBlack}fontSize="11"fontFamily={AppFonts_1.AppFonts.interBold}>
                 {o.value}
               </react_native_svg_1.Text>
             </react_1.default.Fragment>})}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface AnimatedBrandOwlProps {
+    size?: number;
+    shape?: 'square' | 'circle';
+}
+export declare const AnimatedBrandOwl: React.FC<AnimatedBrandOwlProps>;
+export default AnimatedBrandOwl;

package/dist/commonjs/components/AnimatedBrandOwl.js

@@ -0,0 +1,175 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,t,e,r){r===void 0&&(r=e);var a=Object.getOwnPropertyDescriptor(t,e);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(o,r,a)}):(function(o,t,e,r){r===void 0&&(r=e),o[r]=t[e]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,t){Object.defineProperty(o,"default",{enumerable:!0,value:t})}):function(o,t){o.default=t}),__importStar=this&&this.__importStar||(function(){var o=function(t){return o=Object.getOwnPropertyNames||function(e){var r=[];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(r[r.length]=a);return r},o(t)};return function(t){if(t&&t.__esModule)return t;var e={};if(t!=null)for(var r=o(t),a=0;a<r.length;a++)r[a]!=="default"&&__createBinding(e,t,r[a]);return __setModuleDefault(e,t),e}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.AnimatedBrandOwl=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../styles/AppColors"),AnimatedBrandOwl=({size:o=64,shape:t="square"})=>{const e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current;(0,react_1.useEffect)(()=>{const l=react_native_1.Animated.loop(react_native_1.Animated.sequence([react_native_1.Animated.timing(e,{toValue:1,duration:2200,easing:react_native_1.Easing.inOut(react_native_1.Easing.sin),useNativeDriver:!0}),react_native_1.Animated.timing(e,{toValue:0,duration:2200,easing:react_native_1.Easing.inOut(react_native_1.Easing.sin),useNativeDriver:!0})]));return l.start(),()=>l.stop()},[e]);const r=e.interpolate({inputRange:[0,1],outputRange:[0,-8]}),a=e.interpolate({inputRange:[0,.5,1],outputRange:["0deg","-1.8deg","0deg"]}),i=t==="square",s=i?Math.round(o*.2265):o/2;return<react_native_1.View style={[styles.container,{width:o,height:o,borderRadius:s}]}>
+      <react_native_1.Animated.View style={[styles.animatedLayer,{transform:[{translateY:r},{rotate:a}]}]}>
+        <react_native_svg_1.default width={o}height={o}viewBox="0 0 256 256"fill="none">
+          <react_native_svg_1.Defs>
+            
+            <react_native_svg_1.LinearGradient id="owl_beam"x1="70"y1="74"x2="194"y2="187"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.teal300}/>
+              <react_native_svg_1.Stop offset="0.5"stopColor={AppColors_1.AppColors.sky400}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.purple400}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.RadialGradient id="owl_halo"cx="0.5"cy="0.45"r="0.55">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.sky400}stopOpacity={.25}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.sky400}stopOpacity={0}/>
+            </react_native_svg_1.RadialGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_body"x1="78"y1="60"x2="178"y2="186"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.navy700}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy900}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_beak"x1="120"y1="151"x2="136"y2="168"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.amber300}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.orange400}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.RadialGradient id="owl_iris"cx="0.42"cy="0.38"r="0.72">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.amber200}/>
+              <react_native_svg_1.Stop offset="0.5"stopColor={AppColors_1.AppColors.amber400}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.amber500}/>
+            </react_native_svg_1.RadialGradient>
+
+            
+            <react_native_svg_1.RadialGradient id="owl_blush"cx="0.5"cy="0.5"r="0.5">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.rose400}stopOpacity={.6}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.rose400}stopOpacity={0}/>
+            </react_native_svg_1.RadialGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_wing"x1="70"y1="120"x2="190"y2="206"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.navy800}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy950}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_faceplate"x1="70"y1="72"x2="186"y2="152"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.steel500}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy700}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.RadialGradient id="owl_lensglass"cx="0.4"cy="0.32"r="0.75">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.sky300}stopOpacity={.25}/>
+              <react_native_svg_1.Stop offset="0.7"stopColor={AppColors_1.AppColors.sky300}stopOpacity={.06}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.sky300}stopOpacity={0}/>
+            </react_native_svg_1.RadialGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_belly"x1="94"y1="126"x2="162"y2="212"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.steel600}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy700}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_tile"x1="30"y1="30"x2="210"y2="222"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.navy900}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy950}/>
+            </react_native_svg_1.LinearGradient>
+
+            
+            <react_native_svg_1.LinearGradient id="owl_edge"x1="14"y1="22"x2="220"y2="228"gradientUnits="userSpaceOnUse">
+              <react_native_svg_1.Stop offset="0"stopColor={AppColors_1.AppColors.steel600}/>
+              <react_native_svg_1.Stop offset="1"stopColor={AppColors_1.AppColors.navy800}/>
+            </react_native_svg_1.LinearGradient>
+          </react_native_svg_1.Defs>
+
+          
+          {i?<>
+              <react_native_svg_1.Rect x={8}y={8}width={240}height={240}rx={58}fill="url(#owl_tile)"/>
+              <react_native_svg_1.Rect x={8.6}y={8.6}width={238.8}height={238.8}rx={57.4}fill="none"stroke="url(#owl_edge)"strokeOpacity={.75}strokeWidth={1.6}/>
+              <react_native_svg_1.Circle cx={128}cy={128}r={104}fill="url(#owl_halo)"/>
+            </>:<>
+              <react_native_svg_1.Circle cx={128}cy={128}r={122}fill="url(#owl_tile)"/>
+              <react_native_svg_1.Circle cx={128}cy={128}r={121.4}fill="none"stroke="url(#owl_edge)"strokeOpacity={.75}strokeWidth={1.6}/>
+              <react_native_svg_1.Circle cx={128}cy={128}r={105}fill="url(#owl_halo)"/>
+            </>}
+
+          
+          <react_native_svg_1.G transform={i?"translate(128 128) scale(1.16) translate(-128 -134)":"translate(128 132) scale(1.08) translate(-128 -134)"}>
+            
+            <react_native_svg_1.Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z"fill="url(#owl_wing)"stroke="url(#owl_beam)"strokeWidth={2.5}strokeOpacity={.5}/>
+            <react_native_svg_1.Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z"fill="url(#owl_wing)"stroke="url(#owl_beam)"strokeWidth={2.5}strokeOpacity={.5}/>
+
+            
+            <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(#owl_body)"stroke="url(#owl_beam)"strokeWidth={4}strokeLinejoin="round"/>
+
+            
+            <react_native_svg_1.Path d="M99 48 L114 62 L104 63 L98 55 Z"fill="#080F22"opacity={.55}/>
+            <react_native_svg_1.Path d="M157 48 L142 62 L152 63 L158 55 Z"fill="#080F22"opacity={.55}/>
+
+            
+            <react_native_svg_1.G stroke="#22325A"strokeWidth={2.2}fill="none"strokeLinecap="round"opacity={.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>
+
+            
+            <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(#owl_belly)"/>
+
+            
+            <react_native_svg_1.G stroke="#4A659E"strokeWidth={2.3}fill="none"strokeLinecap="round"opacity={.45}>
+              <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>
+
+            
+            <react_native_svg_1.Rect x={107}y={161}width={42}height={32}rx={9}fill="#0A1020"stroke="url(#owl_beam)"strokeWidth={2}strokeOpacity={.8}/>
+            <react_native_svg_1.G stroke="#7DD3FC"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>
+
+            
+            <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(#owl_faceplate)"stroke="#52709E"strokeWidth={2.6}strokeOpacity={.7}/>
+            <react_native_svg_1.Path d="M128 96 L128 120"stroke="#52709E"strokeWidth={2}strokeLinecap="round"strokeOpacity={.45}/>
+
+            
+            <react_native_svg_1.G stroke="url(#owl_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>
+
+            
+            <react_native_svg_1.Circle cx={153}cy={107}r={17}fill="url(#owl_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={.95}/>
+            <react_native_svg_1.Circle cx={149.6}cy={111}r={1.6}fill="#FFFFFF"opacity={.7}/>
+
+            
+            <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(#owl_beak)"/>
+
+            
+            <react_native_svg_1.Circle cx={95}cy={103}r={20}fill="url(#owl_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={.95}/>
+            <react_native_svg_1.Circle cx={91}cy={107}r={1.8}fill="#FFFFFF"opacity={.7}/>
+            <react_native_svg_1.Circle cx={95}cy={103}r={28}fill="url(#owl_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={.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(#owl_beam)"strokeWidth={8.5}strokeLinecap="round"/>
+
+            
+            <react_native_svg_1.Circle cx={95}cy={103}r={28}fill="none"stroke="url(#owl_beam)"strokeWidth={7}/>
+
+            
+            <react_native_svg_1.Ellipse cx={83}cy={127}rx={9}ry={6}fill="url(#owl_blush)"/>
+            <react_native_svg_1.Ellipse cx={167}cy={122}rx={9}ry={6}fill="url(#owl_blush)"/>
+          </react_native_svg_1.G>
+        </react_native_svg_1.default>
+      </react_native_1.Animated.View>
+    </react_native_1.View>};exports.AnimatedBrandOwl=AnimatedBrandOwl;const styles=react_native_1.StyleSheet.create({container:{overflow:"visible",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},animatedLayer:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"}});exports.default=exports.AnimatedBrandOwl;

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

@@ -3,6 +3,7 @@ import { ImageSourcePropType } from 'react-native';
 interface AppHeaderLogoProps {
     size?: number;
     customIcon?: ImageSourcePropType | null;
+    shape?: 'square' | 'circle';
 }
 export declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
 export default AppHeaderLogo;

package/dist/commonjs/components/AppHeaderLogo.js

@@ -1,5 +1,7 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppHeaderLogo=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),BrandCircleIcon_1=__importDefault(require("./BrandCircleIcon")),AppHeaderLogo=({size:e=52,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(react_1.default.isValidElement(t)){const n=react_1.default.cloneElement(t,{size:e,width:e,height:e});return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
-          {n}
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppHeaderLogo=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),BrandCircleIcon_1=require("./BrandCircleIcon"),AppHeaderLogo=({size:e=64,customIcon:t,shape:n="circle"})=>{const r=n==="circle"?e/2:Math.round(e*.2265);if(t){if(react_1.default.isValidElement(t)){const a=react_1.default.cloneElement(t,{size:e,width:e,height:e});return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
+          {a}
         </react_native_1.View>}return<react_native_1.View style={[logoStyles.imageContainer,{width:e,height:e,borderRadius:r}]}>
         <react_native_1.Image source={t}style={[logoStyles.image,{borderRadius:r}]}resizeMode="cover"/>
-      </react_native_1.View>}return<BrandCircleIcon_1.default size={e}/>};exports.AppHeaderLogo=AppHeaderLogo;const logoStyles=react_native_1.StyleSheet.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},imageContainer:{overflow:"hidden",backgroundColor:"transparent",alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});exports.default=exports.AppHeaderLogo;
+      </react_native_1.View>}return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
+      <BrandCircleIcon_1.BrandCircleIcon size={e}/>
+    </react_native_1.View>};exports.AppHeaderLogo=AppHeaderLogo;const logoStyles=react_native_1.StyleSheet.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},imageContainer:{overflow:"hidden",backgroundColor:"transparent",alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});exports.default=exports.AppHeaderLogo;