react-native-inapp-inspector 2.4.1 → 2.5.0

package/dist/esm/capture.d.ts

@@ -5,6 +5,7 @@ export type AudioSource = 'none' | 'app' | 'mic' | 'mixed';
 export type RecordingFormat = 'mp4' | 'gif';
 export declare const ScreenCapture: {
     takeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+    captureScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
     startRecording: (options?: RecordingOptions) => Promise<boolean>;
     stopRecording: () => Promise<RecordingResult | null>;
     isRecording: () => Promise<boolean>;
@@ -16,6 +17,7 @@ export declare const ScreenCapture: {
 };
 export declare const ScreenRecorder: {
     takeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+    captureScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
     startRecording: (options?: RecordingOptions) => Promise<boolean>;
     stopRecording: () => Promise<RecordingResult | null>;
     isRecording: () => Promise<boolean>;

package/dist/esm/capture.js

@@ -1 +1 @@
-import{takeNativeScreenshot as t,startNativeVideoRecording as a,stopNativeVideoRecording as i,isNativeRecordingActive as n,playNativeVideo as c,convertNativeVideoToGif as o,fetchCapturedMediaList as d,deleteCapturedMediaFile as s,clearAllCapturedMediaFiles as u}from"./native/NativeInspector";export const ScreenCapture={takeScreenshot:async e=>t(e),startRecording:async e=>a(e),stopRecording:async()=>i(),isRecording:async()=>n(),playVideo:async e=>c(e),convertToGif:async(e,r)=>o(e,r),getMediaList:async()=>d(),deleteMedia:async e=>s(e),clearAllMedia:async()=>u()},ScreenRecorder=ScreenCapture;export default ScreenCapture;
+import{takeNativeScreenshot as r,startNativeVideoRecording as a,stopNativeVideoRecording as n,isNativeRecordingActive as i,playNativeVideo as c,convertNativeVideoToGif as o,fetchCapturedMediaList as d,deleteCapturedMediaFile as s,clearAllCapturedMediaFiles as u}from"./native/NativeInspector";export const ScreenCapture={takeScreenshot:async e=>r(e),captureScreenshot:async e=>r(e),startRecording:async e=>a(e),stopRecording:async()=>n(),isRecording:async()=>i(),playVideo:async e=>c(e),convertToGif:async(e,t)=>o(e,t),getMediaList:async()=>d(),deleteMedia:async e=>s(e),clearAllMedia:async()=>u()},ScreenRecorder=ScreenCapture;export default ScreenCapture;

package/dist/esm/components/AnalyticsDetail.js

@@ -1,4 +1,4 @@
-import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView as Te,StyleSheet as Ve,Text as B,TextInput as Be,View as C}from"react-native";import G from"./CopyButton";import Se from"./ShareButton";import Y from"./JsonViewer";import Ie from"./SegmentedTabs";import Q from"./HighlightText";import Pe from"./AnimatedEntrance";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{getSize as Re,formatDateTime as De}from"../helpers";import{shareAnalyticsReport as We}from"../helpers/shareFormatter";import{getEventCategory as He}from"../helpers/gaAnalyticsRegistry";import{useTranslation as Fe}from"../i18n";import{SparkleIcon as X,ClockIcon as Ne,SearchIcon as Ae,ClearIcon as Oe,LayersIcon as Ee,CartIcon as Ke,GlobeIcon as Le,BoltIcon as Me,PinIcon as $e,MoneyIcon as _e,PrettyIcon as Je,TableIcon as Z,DocIcon as Ue,PackageIcon as Ge}from"./NetworkIcons";const Ye=({event:T})=>{const{t:P}=Fe(),[A,ee]=q("overview"),[R,v]=q(""),k=z(()=>T.params??{},[T.params]),F=z(()=>T.userProperties??{},[T.userProperties]),N=z(()=>Object.keys(k),[k]),D=z(()=>Object.keys(F),[F]),M=z(()=>He(T.name,k),[T.name,k]),O=z(()=>({name:T.name,timestamp:T.timestamp,source:T.source,...T.screenName?{screenName:T.screenName}:{},...T.screenClass?{screenClass:T.screenClass}:{},...T.userId?{userId:T.userId}:{},...T.sessionId?{sessionId:T.sessionId}:{},...T.trackingId?{trackingId:T.trackingId}:{},params:k,...D.length>0?{userProperties:F}:{}}),[T,k,D.length,F]),E=z(()=>{const V=k.value??k.price,I=k.currency??"USD";return V!=null&&!isNaN(Number(V))?{amount:Number(V).toFixed(2),currency:String(I).toUpperCase()}:null},[k]),$=z(()=>Array.isArray(k.items)?k.items.length:null,[k.items]),_=z(()=>T.screenName||k.firebase_screen||k.screen_name||k.page_title||T.screenClass||k.firebase_screen_class,[T.screenName,T.screenClass,k]),J=z(()=>{const V=Object.entries(k);if(!R.trim())return V;const I=R.toLowerCase();return V.filter(([K,W])=>{const L=typeof W=="object"?JSON.stringify(W):String(W);return K.toLowerCase().includes(I)||L.toLowerCase().includes(I)})},[k,R]),H=z(()=>{switch(M){case"ecommerce":return{label:P("analytics.ecommerceCategory"),color:e.amber700,bg:e.amber100,border:e.amber200,icon:V=><Ke color={V}size={11}/>};case"page_view":return{label:P("analytics.screensCategory"),color:e.sky600,bg:e.sky100,border:e.sky400,icon:V=><Le color={V}size={11}/>};case"system":return{label:P("analytics.systemCategory"),color:e.purple,bg:e.purple100,border:e.purple200,icon:V=><Me color={V}size={11}/>};default:return{label:P("analytics.customCategory"),color:e.brandPurple,bg:e.purple100,border:e.purple200,icon:V=><X color={V}size={11}/>}}},[M,P]),re=[{key:"overview",label:`${P("analytics.overviewTab")} (${N.length})`,icon:V=><Z color={V?e.white:e.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:V=><Je color={V?e.white:e.grayText}size={12}/>}];return<Te style={r.scroll}contentContainerStyle={r.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
+import{useState as q,useMemo as P}from"react";import{Pressable as Ce,ScrollView as Te,StyleSheet as Ve,Text as B,TextInput as Be,View as C}from"react-native";import G from"./CopyButton";import Ie from"./ShareButton";import Y from"./JsonViewer";import Se from"./SegmentedTabs";import Q from"./HighlightText";import Pe from"./AnimatedEntrance";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{getSize as Re,formatDateTime as De}from"../helpers";import{shareAnalyticsReport as We}from"../helpers/shareFormatter";import{getEventCategory as He}from"../helpers/gaAnalyticsRegistry";import{useTranslation as Fe}from"../i18n";import{SparkleIcon as X,ClockIcon as Ae,SearchIcon as Ne,ClearIcon as Oe,LayersIcon as Ee,CartIcon as Ke,GlobeIcon as Le,BoltIcon as Me,PinIcon as $e,MoneyIcon as _e,PrettyIcon as Ue,TableIcon as Z,DocIcon as Je,PackageIcon as Ge}from"./NetworkIcons";const Ye=({event:T})=>{const{t:k}=Fe(),[j,ee]=q("overview"),[R,v]=q(""),I=P(()=>T.params??{},[T.params]),F=P(()=>T.userProperties??{},[T.userProperties]),A=P(()=>Object.keys(I),[I]),D=P(()=>Object.keys(F),[F]),M=P(()=>He(T.name,I),[T.name,I]),O=P(()=>({name:T.name,timestamp:T.timestamp,source:T.source,...T.screenName?{screenName:T.screenName}:{},...T.screenClass?{screenClass:T.screenClass}:{},...T.userId?{userId:T.userId}:{},...T.sessionId?{sessionId:T.sessionId}:{},...T.trackingId?{trackingId:T.trackingId}:{},params:I,...D.length>0?{userProperties:F}:{}}),[T,I,D.length,F]),E=P(()=>{const V=I.value??I.price,z=I.currency??"USD";return V!=null&&!isNaN(Number(V))?{amount:Number(V).toFixed(2),currency:String(z).toUpperCase()}:null},[I]),$=P(()=>Array.isArray(I.items)?I.items.length:null,[I.items]),_=P(()=>T.screenName||I.firebase_screen||I.screen_name||I.page_title||T.screenClass||I.firebase_screen_class,[T.screenName,T.screenClass,I]),U=P(()=>{const V=Object.entries(I);if(!R.trim())return V;const z=R.toLowerCase();return V.filter(([K,W])=>{const L=typeof W=="object"?JSON.stringify(W):String(W);return K.toLowerCase().includes(z)||L.toLowerCase().includes(z)})},[I,R]),H=P(()=>{switch(M){case"ecommerce":return{label:k("analytics.ecommerceCategory"),color:e.amber700,bg:e.amber100,border:e.amber200,icon:V=><Ke color={V}size={11}/>};case"page_view":return{label:k("analytics.screensCategory"),color:e.sky600,bg:e.sky100,border:e.sky400,icon:V=><Le color={V}size={11}/>};case"system":return{label:k("analytics.systemCategory"),color:e.purple,bg:e.purple100,border:e.purple200,icon:V=><Me color={V}size={11}/>};default:return{label:k("analytics.customCategory"),color:e.brandPurple,bg:e.purple100,border:e.purple200,icon:V=><X color={V}size={11}/>}}},[M,k]),re=[{key:"overview",label:`${k("analytics.overviewTab")} (${A.length})`,icon:V=><Z color={V?e.white:e.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:V=><Ue color={V?e.white:e.grayText}size={12}/>}];return<Te style={r.scroll}contentContainerStyle={r.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
       
       
       <C style={r.heroCard}>
@@ -16,7 +16,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
             <C style={[r.sourceBadge,T.source==="firebase"?{backgroundColor:e.amberBg,borderColor:e.amberBorder}:{backgroundColor:e.purpleBg,borderColor:e.purpleBorder}]}>
               <C style={[r.sourceDot,{backgroundColor:T.source==="firebase"?e.firebaseOrange:e.purple}]}/>
               <B style={[r.sourceBadgeText,{color:T.source==="firebase"?e.amber800Warm:e.purple}]}>
-                {T.source==="firebase"?P("analytics.sourceFirebase"):P("analytics.sourceCustom")}
+                {T.source==="firebase"?k("analytics.sourceFirebase"):k("analytics.sourceCustom")}
               </B>
             </C>
 
@@ -31,8 +31,8 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
 
           
           <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
-            <Se onShare={()=>We(T)}/>
-            <G value={JSON.stringify(O,null,2)}label={P("analytics.eventDetails")}/>
+            <Ie onShare={()=>We(T)}/>
+            <G value={JSON.stringify(O,null,2)}label={k("analytics.eventDetails")}/>
           </C>
         </C>
 
@@ -46,7 +46,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
         
         <C style={r.metaRow}>
           <C style={r.timePill}>
-            <Ne color={e.purple}size={11}/>
+            <Ae color={e.purple}size={11}/>
             <B style={r.timeText}>
               {De(T.timestamp)}
             </B>
@@ -63,17 +63,17 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
         
         <C style={r.metricsBar}>
           <C style={r.metricPill}>
-            <B style={r.metricLabel}>Params:</B>
-            <B style={r.metricValue}>{N.length}</B>
+            <B style={r.metricLabel}>{k("analytics.metricParams","Params:")}</B>
+            <B style={r.metricValue}>{A.length}</B>
           </C>
 
           {D.length>0&&<C style={r.metricPill}>
-              <B style={r.metricLabel}>User Props:</B>
+              <B style={r.metricLabel}>{k("analytics.metricUserProps","User Props:")}</B>
               <B style={r.metricValue}>{D.length}</B>
             </C>}
 
           <C style={r.metricPill}>
-            <B style={r.metricLabel}>Size:</B>
+            <B style={r.metricLabel}>{k("analytics.metricSize","Size:")}</B>
             <B style={r.metricValue}>{Re(O)}</B>
           </C>
 
@@ -87,7 +87,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
           {$!==null&&<C style={r.itemsPill}>
               <Ge size={12}color={e.blue700}/>
               <B style={r.itemsValue}>
-                {$} items
+                {k("analytics.metricItems",{count:$},"{{count}} items")}
               </B>
             </C>}
         </C>
@@ -95,28 +95,28 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
 
       
       <C style={r.tabsWrap}>
-        <Ie tabs={re}activeKey={A}onChange={V=>ee(V)}/>
+        <Se tabs={re}activeKey={j}onChange={V=>ee(V)}/>
       </C>
 
       
-      {A==="overview"&&<C style={r.tabContent}>
+      {j==="overview"&&<C style={r.tabContent}>
           
           {(T.userId||T.sessionId||T.trackingId)&&<C style={r.sectionCard}>
               <C style={r.sectionHeader}>
                 <Ee color={e.purple}size={12}/>
-                <B style={r.sectionTitle}>SESSION & IDENTITY</B>
+                <B style={r.sectionTitle}>{k("analytics.sessionIdentity","SESSION & IDENTITY")}</B>
               </C>
               <C style={r.sectionBody}>
                 {T.userId&&<C style={r.kvRow}>
-                    <B style={r.kvKey}>User ID:</B>
+                    <B style={r.kvKey}>{k("analytics.userId","User ID")}:</B>
                     <B style={r.kvVal}selectable>{T.userId}</B>
                   </C>}
                 {T.sessionId&&<C style={r.kvRow}>
-                    <B style={r.kvKey}>Session ID:</B>
+                    <B style={r.kvKey}>{k("analytics.sessionId","Session ID")}:</B>
                     <B style={r.kvVal}selectable>{T.sessionId}</B>
                   </C>}
                 {T.trackingId&&<C style={r.kvRow}>
-                    <B style={r.kvKey}>Tracking ID:</B>
+                    <B style={r.kvKey}>{k("analytics.trackingId","Tracking ID")}:</B>
                     <B style={r.kvVal}selectable>{T.trackingId}</B>
                   </C>}
               </C>
@@ -128,34 +128,34 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
               <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
                 <Z color={e.brandPurple}size={12}/>
                 <B style={r.sectionTitle}>
-                  EVENT PARAMETERS ({N.length})
+                  {k("analytics.eventParameters",{count:A.length},"EVENT PARAMETERS ({{count}})")}
                 </B>
               </C>
               <B style={r.sectionSubtitle}>
-                Key-Value Attributes
+                {k("analytics.keyValueAttributes","Key-Value Attributes")}
               </B>
             </C>
 
             
-            {N.length>4&&<C style={r.searchBar}>
-                <Ae color={e.grayTextWeak}size={13}/>
-                <Be placeholder="Filter parameters by key or value..."placeholderTextColor={e.grayTextWeak}value={R}onChangeText={v}style={r.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {A.length>4&&<C style={r.searchBar}>
+                <Ne color={e.grayTextWeak}size={13}/>
+                <Be placeholder={k("analytics.filterParamsPlaceholder","Filter parameters by key or value...")}placeholderTextColor={e.grayTextWeak}value={R}onChangeText={v}style={r.searchInput}autoCorrect={!1}autoCapitalize="none"/>
                 {R.length>0&&<Ce onPress={()=>v("")}hitSlop={8}>
                     <Oe color={e.grayTextWeak}size={13}/>
                   </Ce>}
               </C>}
 
-            {N.length===0?<C style={r.emptyParamsBox}>
-                <Ue color={e.grayTextWeak}size={16}/>
+            {A.length===0?<C style={r.emptyParamsBox}>
+                <Je color={e.grayTextWeak}size={16}/>
                 <B style={r.emptyParamsText}>
-                  No custom parameters recorded for this event.
+                  {k("analytics.noParamsRecorded","No custom parameters recorded for this event.")}
                 </B>
-              </C>:J.length===0?<C style={r.emptyParamsBox}>
+              </C>:U.length===0?<C style={r.emptyParamsBox}>
                 <B style={r.emptyParamsText}>
-                  No parameters matching "{R}"
+                  {k("analytics.noParamsMatching",{search:R},'No parameters matching "{{search}}"')}
                 </B>
               </C>:<C style={r.paramList}>
-                {J.map(([V,I],K)=>{const W=typeof I=="object"&&I!==null,L=Array.isArray(I);let j=typeof I;I===null?j="null":L?j=`array [${I.length}]`:W&&(j="object");const U=W?JSON.stringify(I,null,2):String(I),te=V==="value"||V==="price"||V==="currency"||V==="screen_name"||V==="item_id"||V==="item_name";return<Pe key={V}index={K}distance={4}>
+                {U.map(([V,z],K)=>{const W=typeof z=="object"&&z!==null,L=Array.isArray(z);let N=typeof z;z===null?N="null":L?N=`array [${z.length}]`:W&&(N="object");const J=W?JSON.stringify(z,null,2):String(z),te=V==="value"||V==="price"||V==="currency"||V==="screen_name"||V==="item_id"||V==="item_name";return<Pe key={V}index={K}distance={4}>
                       <C style={r.paramCard}>
                         
                         <C style={r.paramCardHeader}>
@@ -163,17 +163,17 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
                             <Q text={V}search={R}style={[r.paramKeyText,te&&r.paramKeyHighlighted]}highlightStyle={r.highlight}/>
                             <C style={r.typeBadge}>
                               <B style={r.typeBadgeText}>
-                                {j.toUpperCase()}
+                                {N.toUpperCase()}
                               </B>
                             </C>
                           </C>
 
-                          <G value={U}label={V}/>
+                          <G value={J}label={V}/>
                         </C>
 
                         
                         <C style={r.paramValBox}>
-                          {W?<Y data={I}search={R}hideTabs wrap/>:<Q text={U}search={R}style={r.paramValText}highlightStyle={r.highlight}selectable/>}
+                          {W?<Y data={z}search={R}hideTabs wrap/>:<Q text={J}search={R}style={r.paramValText}highlightStyle={r.highlight}selectable/>}
                         </C>
                       </C>
                     </Pe>})}
@@ -200,7 +200,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
         </C>}
 
       
-      {A==="json"&&<C style={r.jsonContainer}>
+      {j==="json"&&<C style={r.jsonContainer}>
           <Y data={O}defaultExpandDepth={2}fullHeight/>
         </C>}
     </Te>},r=Ve.create({scroll:{flex:1,backgroundColor:e.grayBackground},content:{paddingTop:12,paddingBottom:40,paddingHorizontal:12},heroCard:{backgroundColor:e.white,borderRadius:12,padding:14,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2,marginBottom:12},heroTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},idBadge:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:S.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.2},sourceBadge:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},sourceDot:{width:6,height:6,borderRadius:3},sourceBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.4},catBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},catBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.3},titleRow:{marginBottom:8},eventTitle:{fontFamily:S.interBold,fontSize:16,color:e.primaryBlack,lineHeight:22},metaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:10},timePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10.5,color:e.purple},screenPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.sky500}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.sky500}2E`,maxWidth:220},screenText:{fontFamily:S.interMedium,fontSize:10.5,color:e.sky600},metricsBar:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},metricPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},metricLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},metricValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},revenuePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},revenueValue:{fontFamily:S.interBold,fontSize:10.5,color:e.greenSuccessDark},itemsPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.blueTintBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.sky100},itemsValue:{fontFamily:S.interBold,fontSize:10.5,color:e.blue700},tabsWrap:{marginBottom:12},tabContent:{gap:12},sectionCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},sectionHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionHeaderBetween:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionTitle:{fontFamily:S.interBold,fontSize:11,color:e.slate700,letterSpacing:.4},sectionSubtitle:{fontFamily:S.interMedium,fontSize:10,color:e.grayTextWeak},sectionBody:{gap:6},kvRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3},kvKey:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},kvVal:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:8,paddingVertical:5,borderWidth:1,borderColor:e.dividerColor,marginBottom:10,gap:6},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:11,color:e.primaryBlack,paddingVertical:0},emptyParamsBox:{alignItems:"center",justifyContent:"center",paddingVertical:20,gap:6},emptyParamsText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},paramList:{gap:8},paramCard:{backgroundColor:e.grayBackground,borderRadius:8,padding:9,borderWidth:1,borderColor:e.dividerColor},paramCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},paramKeyText:{fontFamily:S.interBold,fontSize:11.5,color:e.primaryBlack},paramKeyHighlighted:{color:e.brandPurple},typeBadge:{backgroundColor:e.slate200,paddingHorizontal:5,paddingVertical:1.5,borderRadius:3},typeBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.slate700,letterSpacing:.3},paramValBox:{marginTop:2},paramValText:{fontFamily:S.interRegular,fontSize:11,color:e.slate700,lineHeight:16},jsonContainer:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden",backgroundColor:e.white,minHeight:300},highlight:{backgroundColor:e.yellow200,color:e.yellow800,fontFamily:S.interBold}});export default Ye;

package/dist/esm/components/AnalyticsEventCard.js

@@ -97,4 +97,4 @@ import K,{useEffect as U,useRef as q}from"react";import{Animated as F,StyleSheet
           </C>
         </C>
       </Te>
-    </C>}),r=j.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:`${e.dividerColor}`},gapText:{fontFamily:T.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.5},modernCard:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:12,paddingVertical:9,shadowColor:e.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:T.interBold,fontSize:13,lineHeight:17,letterSpacing:.1,color:e.primaryBlack},timestamp:{fontFamily:T.interMedium,fontSize:10.5,lineHeight:14,color:e.grayTextWeak},highlight:{backgroundColor:e.yellowHighlight,color:e.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:T.interMedium,fontSize:10,lineHeight:13,color:e.grayText},screenDot:{width:5,height:5,borderRadius:2.5},duplicateBadge:{backgroundColor:e.roseBg,borderColor:e.roseBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},duplicateText:{fontFamily:T.interBold,fontSize:8.5,color:e.rose600,textTransform:"uppercase"},idBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:T.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.2},categoryBadge:{borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},categoryText:{fontFamily:T.interBold,fontSize:8.5,textTransform:"uppercase",letterSpacing:.4}});export default We;
+    </C>}),r=j.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:`${e.dividerColor}`},gapText:{fontFamily:T.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.5},modernCard:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,paddingVertical:8,shadowColor:e.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:T.interBold,fontSize:13,lineHeight:17,letterSpacing:.1,color:e.primaryBlack},timestamp:{fontFamily:T.interMedium,fontSize:10.5,lineHeight:14,color:e.grayTextWeak},highlight:{backgroundColor:e.yellowHighlight,color:e.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:T.interMedium,fontSize:10,lineHeight:13,color:e.grayText},screenDot:{width:5,height:5,borderRadius:2.5},duplicateBadge:{backgroundColor:e.roseBg,borderColor:e.roseBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},duplicateText:{fontFamily:T.interBold,fontSize:8.5,color:e.rose600,textTransform:"uppercase"},idBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:T.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.2},categoryBadge:{borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},categoryText:{fontFamily:T.interBold,fontSize:8.5,textTransform:"uppercase",letterSpacing:.4}});export default We;

package/dist/esm/components/AnalyticsGraph.js

@@ -1,111 +1,111 @@
-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>
+import L from"react";import{View as T,Text as S,ScrollView as W,Dimensions as Y,StyleSheet as Z}from"react-native";import A,{Rect as Q,Text as O,Line as U,Circle as D,Path as X,Defs as Tt,LinearGradient as St,Stop as P}from"react-native-svg";import{AppColors as a}from"../styles/AppColors";import{AppFonts as C}from"../styles/AppFonts";import{useTranslation as Bt}from"../i18n";const R=24,G=12,Ct=({event:n,accentColor:s})=>{const{t:o}=Bt(),e=n.params||{},i=(Array.isArray(e.items)?e.items:null)?.filter(r=>typeof r.price=="number")||[],t=[];Object.entries(e).forEach(([r,l])=>{typeof l=="number"&&!r.toLowerCase().includes("id")&&!r.toLowerCase().includes("timestamp")&&t.push({key:r,value:l})});const c=[],b=/^\d{4}-\d{2}-\d{2}/;Object.entries(e).forEach(([r,l])=>{if(typeof l=="string"&&l.length>=10&&b.test(l)){const V=new Date(l);isNaN(V.getTime())||c.push({key:r,date:V})}});const B={};Object.values(e).forEach(r=>{let l=typeof r;r===null&&(l="null"),Array.isArray(r)&&(l="array"),B[l]=(B[l]||0)+1});const v=[a.purple,a.skyBlue,a.amber500,a.greenColor],M=Object.entries(B).map(([r,l],V)=>({label:r,value:l,color:v[V%v.length]})),F=[];Object.entries(e).forEach(([r,l])=>{typeof l=="string"&&F.push({label:r,value:l.length})}),F.sort((r,l)=>l.value-r.value);const z=F.slice(0,5),N=i.length>0,E=t.length>0,_=c.length>0,J=z.length>0,K=M.length>0,$=Y.get("window").width-60-40;return<T style={k.container}>
+      <S style={k.headerTitle}>{o("analytics.dataVisualization","Data Visualization")}</S>
 
-      {E&&<T style={S.chartBlock}>
-          <B style={S.chartTitle}>Data Types Breakdown</B>
-          <Te data={v}/>
+      {K&&<T style={k.chartBlock}>
+          <S style={k.chartTitle}>{o("analytics.dataTypesBreakdown","Data Types Breakdown")}</S>
+          <Mt data={M}/>
         </T>}
 
-      {_&&<T style={S.chartBlock}>
-          <B style={S.chartTitle}>Highest Payload Strings</B>
-          <P data={M}accentColor={t.purple}maxBarWidth={z}isGradient/>
+      {J&&<T style={k.chartBlock}>
+          <S style={k.chartTitle}>{o("analytics.highestPayloadStrings","Highest Payload Strings")}</S>
+          <H data={z}accentColor={a.purple}maxBarWidth={$}isGradient/>
         </T>}
 
-      {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}/>
+      {E&&<T style={k.chartBlock}>
+          <S style={k.chartTitle}>{o("analytics.topLevelMetrics","Top-Level Metrics")}</S>
+          <Vt data={t.map(r=>({label:r.key,value:r.value}))}accentColor={s}/>
         </T>}
 
-      {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 style={k.chartBlock}>
+          <S style={k.chartTitle}>{o("analytics.importantDates","Important Dates")}</S>
+          <Dt data={c.map(r=>({label:r.key,date:r.date}))}accentColor={s}/>
         </T>}
 
-      {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}/>
+      {N&&<T style={k.chartBlock}>
+          <S style={k.chartTitle}>{o("analytics.itemPrices","Item Prices")}</S>
+          <H data={i.map((r,l)=>({label:r.item_name||r.item_id||`Item ${l+1}`,value:r.price}))}accentColor={a.successGreen}maxBarWidth={$}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}
+    </T>},I=(n,s,o,e)=>{const h=(e-90)*Math.PI/180;return{x:n+o*Math.cos(h),y:s+o*Math.sin(h)}},vt=(n,s,o,e,h,i)=>{const t=I(n,s,o,i),c=I(n,s,o,h),b=I(n,s,e,i),B=I(n,s,e,h),v=i-h<=180?"0":"1";return`
+    M ${t.x} ${t.y}
+    A ${o} ${o} 0 ${v} 0 ${c.x} ${c.y}
+    L ${B.x} ${B.y}
+    A ${e} ${e} 0 ${v} 1 ${b.x} ${b.y}
     Z
-  `},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"}}>
+  `},Mt=({data:n})=>{const s=n.reduce((t,c)=>t+c.value,0);if(s===0)return null;let o=0;const e=50,h=30,i=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}/>})}
+        {n.map((t,c)=>{if(t.value===0)return null;const b=t.value/s*360,B=o,v=o+b;if(o+=b,b===360)return<L.Fragment key={c}>
+                <D cx={i}cy={i}r={e}fill={t.color}/>
+                <D cx={i}cy={i}r={h}fill={a.primaryLight}/>
+              </L.Fragment>;const M=vt(i,i,e,h,B,v);return<X key={c}d={M}fill={t.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>
+        {n.map((t,c)=>t.value===0?null:<T key={c}style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <T style={{width:10,height:10,borderRadius:5,backgroundColor:t.color}}/>
+              <S style={{fontFamily:C.interMedium,fontSize:11,color:a.grayTextStrong}}>
+                {t.label} ({t.value})
+              </S>
             </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}}>
+    </T>},Vt=({data:n,accentColor:s})=>{const o=Math.max(...n.map(t=>Math.abs(t.value)),1),e=26,h=5,i=2*Math.PI*e;return<W horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {n.map(t=>{const c=Math.min(Math.abs(t.value)/o,1),b=Math.max(i-c*i,.001);return<T key={t.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"/>
+              <D cx="30"cy="30"r={e}stroke={a.grayBorderSecondary}strokeWidth={h}fill="none"/>
+              <D cx="30"cy="30"r={e}stroke={s}strokeWidth={h}fill="none"strokeLinecap="round"strokeDasharray={i}strokeDashoffset={b}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>
+              <S style={{fontFamily:C.interBold,fontSize:13,color:a.primaryBlack,textAlign:"center"}}>
+                {t.value>=1e3?(t.value/1e3).toFixed(1)+"k":t.value}
+              </S>
             </T>
-            <B style={{fontFamily:C.interMedium,fontSize:10,color:t.grayTextWeak,marginTop:6,textAlign:"center"}}numberOfLines={1}>
-              {e.label}
-            </B>
+            <S style={{fontFamily:C.interMedium,fontSize:10,color:a.grayTextWeak,marginTop:6,textAlign:"center"}}numberOfLines={1}>
+              {t.label}
+            </S>
           </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}}>
+    </W>},Dt=({data:n,accentColor:s})=>{const o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return<W horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {n.map((e,h)=>{const i=o[e.date.getMonth()],t=e.date.getDate(),c=e.date.getFullYear();return<T key={e.label+h}style={{width:70,alignItems:"center"}}>
+            <T style={{width:58,height:62,backgroundColor:a.white,borderRadius:8,borderWidth:1,borderColor:a.grayBorderSecondary,overflow:"hidden",shadowColor:a.black,shadowOpacity:.05,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2}}>
               
               <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>
+                <S style={{fontFamily:C.interBold,fontSize:9,color:a.white,textTransform:"uppercase",letterSpacing:.5}}>
+                  {i} {c}
+                </S>
               </T>
               
-              <T style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:t.grayBackground}}>
-                <B style={{fontFamily:C.interBold,fontSize:24,color:t.primaryBlack}}>
-                  {e}
-                </B>
+              <T style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:a.grayBackground}}>
+                <S style={{fontFamily:C.interBold,fontSize:24,color:a.primaryBlack}}>
+                  {t}
+                </S>
               </T>
             </T>
 
-            <B style={{fontFamily:C.interMedium,fontSize:10,color:t.grayTextWeak,marginTop:8,textAlign:"center"}}numberOfLines={2}>
-              {n.label.replace(/_/g," ")}
-            </B>
+            <S style={{fontFamily:C.interMedium,fontSize:10,color:a.grayTextWeak,marginTop:8,textAlign:"center"}}numberOfLines={2}>
+              {e.label.replace(/_/g," ")}
+            </S>
           </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}>
+    </W>},H=({data:n,accentColor:s,maxBarWidth:o,isGradient:e=!1})=>{const h=Math.max(...n.map(t=>t.value),1),i=n.length*(R+G)+10;return<T style={k.svgContainer}>
+      <A width="100%"height={i}>
+        <Tt>
+          <St id="barGrad"x1="0"y1="0"x2="1"y2="0">
+            <P offset="0"stopColor={s}stopOpacity="0.6"/>
+            <P offset="1"stopColor={s}stopOpacity="1"/>
+          </St>
+        </Tt>
+        {n.map((t,c)=>{const b=c*(R+G),B=Math.max(t.value/h*o,2);return<L.Fragment key={t.label}>
               
-              <W x={0}y={h+12}fill={t.grayTextStrong}fontSize="11"fontFamily={C.interMedium}>
-                {e.label}
-              </W>
+              <O x={0}y={b+12}fill={a.grayTextStrong}fontSize="11"fontFamily={C.interMedium}>
+                {t.label}
+              </O>
 
               
-              <Z x1={0}y1={h+24}x2={r}y2={h+24}stroke={t.grayBorderSecondary}strokeDasharray="4"/>
+              <U x1={0}y1={b+24}x2={o}y2={b+24}stroke={a.grayBorderSecondary}strokeDasharray="4"/>
 
               
-              <Y x={0}y={h+16}width={v}height={14}fill={n?"url(#barGrad)":s}rx={4}opacity={.85}/>
+              <Q x={0}y={b+16}width={B}height={14}fill={e?"url(#barGrad)":s}rx={4}opacity={.85}/>
 
               
-              <W x={v+6}y={h+26}fill={t.primaryBlack}fontSize="11"fontFamily={C.interBold}>
-                {e.value}
-              </W>
-            </$.Fragment>})}
+              <O x={B+6}y={b+26}fill={a.primaryBlack}fontSize="11"fontFamily={C.interBold}>
+                {t.value}
+              </O>
+            </L.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;
+    </T>},k=Z.create({container:{backgroundColor:a.primaryLight,borderWidth:1,borderColor:a.grayBorderSecondary,borderRadius:12,marginBottom:10,padding:14,overflow:"hidden"},headerTitle:{fontFamily:C.interBold,color:a.primaryBlack,fontSize:14,marginBottom:12,borderBottomWidth:1,borderBottomColor:a.dividerColor,paddingBottom:8},chartBlock:{marginBottom:16},chartTitle:{fontFamily:C.interMedium,color:a.grayTextWeak,fontSize:12,textTransform:"uppercase",letterSpacing:.5,marginBottom:8},svgContainer:{marginTop:4}});export default Ct;

package/dist/esm/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;