@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/console/CyberpunkButtonOutline.js

@@ -1,257 +1 @@
-"use strict";
-
-import { useState, useRef } from "react";
-import { View, Pressable, Animated, StyleSheet } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CyberpunkButtonOutline({
-  children,
-  onPress,
-  style,
-  accentColor = "#00ffff"
-}) {
-  const [isPressed, setIsPressed] = useState(false);
-  const animatedScale = useRef(new Animated.Value(1)).current;
-  const animatedOpacity = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    setIsPressed(true);
-    Animated.parallel([Animated.spring(animatedScale, {
-      toValue: 0.98,
-      useNativeDriver: true,
-      tension: 100,
-      friction: 10
-    }), Animated.timing(animatedOpacity, {
-      toValue: 1.2,
-      duration: 100,
-      useNativeDriver: true
-    })]).start();
-  };
-  const handlePressOut = () => {
-    setIsPressed(false);
-    Animated.parallel([Animated.spring(animatedScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      tension: 100,
-      friction: 10
-    }), Animated.timing(animatedOpacity, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true
-    })]).start();
-  };
-  const cornerCutSize = 15;
-  const borderWidth = isPressed ? 3 : 2.5;
-  return /*#__PURE__*/_jsx(Pressable, {
-    onPress: onPress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    style: style,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
-      style: {
-        position: "relative",
-        height: 80,
-        marginBottom: 12,
-        transform: [{
-          scale: animatedScale
-        }],
-        opacity: animatedOpacity
-      },
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.mainFrame, {
-          borderColor: accentColor,
-          borderWidth: borderWidth,
-          opacity: isPressed ? 1 : 0.95,
-          shadowColor: accentColor,
-          shadowOffset: {
-            width: 0,
-            height: 0
-          },
-          shadowOpacity: 0.6,
-          shadowRadius: 8
-        }],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.cornerCut, {
-            top: -borderWidth,
-            left: -borderWidth,
-            width: cornerCutSize,
-            height: cornerCutSize,
-            borderRightWidth: borderWidth,
-            borderBottomWidth: borderWidth,
-            borderRightColor: accentColor,
-            borderBottomColor: accentColor,
-            backgroundColor: style?.backgroundColor || "transparent",
-            transform: [{
-              rotate: "0deg"
-            }]
-          }]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerCut, {
-            top: -borderWidth,
-            right: -borderWidth,
-            width: cornerCutSize,
-            height: cornerCutSize,
-            borderLeftWidth: borderWidth,
-            borderBottomWidth: borderWidth,
-            borderLeftColor: accentColor,
-            borderBottomColor: accentColor,
-            backgroundColor: style?.backgroundColor || "transparent",
-            transform: [{
-              rotate: "0deg"
-            }]
-          }]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerCut, {
-            bottom: -borderWidth,
-            left: -borderWidth,
-            width: cornerCutSize,
-            height: cornerCutSize,
-            borderRightWidth: borderWidth,
-            borderTopWidth: borderWidth,
-            borderRightColor: accentColor,
-            borderTopColor: accentColor,
-            backgroundColor: style?.backgroundColor || "transparent",
-            transform: [{
-              rotate: "0deg"
-            }]
-          }]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerCut, {
-            bottom: -borderWidth,
-            right: -borderWidth,
-            width: cornerCutSize,
-            height: cornerCutSize,
-            borderLeftWidth: borderWidth,
-            borderTopWidth: borderWidth,
-            borderLeftColor: accentColor,
-            borderTopColor: accentColor,
-            backgroundColor: style?.backgroundColor || "transparent",
-            transform: [{
-              rotate: "0deg"
-            }]
-          }]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.innerFrame, {
-          top: 3,
-          left: 3,
-          right: 3,
-          bottom: 3,
-          borderColor: accentColor,
-          borderWidth: 1.5,
-          opacity: 0.6,
-          shadowColor: accentColor,
-          shadowOffset: {
-            width: 0,
-            height: 0
-          },
-          shadowOpacity: 0.4,
-          shadowRadius: 4
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          top: 5,
-          left: cornerCutSize,
-          width: 10,
-          height: 1,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          top: cornerCutSize,
-          left: 5,
-          width: 1,
-          height: 10,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          top: 5,
-          right: cornerCutSize,
-          width: 10,
-          height: 1,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          top: cornerCutSize,
-          right: 5,
-          width: 1,
-          height: 10,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          bottom: 5,
-          left: cornerCutSize,
-          width: 10,
-          height: 1,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          bottom: cornerCutSize,
-          left: 5,
-          width: 1,
-          height: 10,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          bottom: 5,
-          right: cornerCutSize,
-          width: 10,
-          height: 1,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.accentLine, {
-          bottom: cornerCutSize,
-          right: 5,
-          width: 1,
-          height: 10,
-          backgroundColor: accentColor,
-          opacity: 0.6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          paddingLeft: 35,
-          paddingRight: 25,
-          paddingVertical: 12,
-          justifyContent: "center"
-        },
-        children: children
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  mainFrame: {
-    position: "absolute",
-    top: 0,
-    left: 10,
-    right: 10,
-    bottom: 0,
-    borderRadius: 2
-  },
-  innerFrame: {
-    position: "absolute",
-    borderRadius: 2
-  },
-  cornerCut: {
-    position: "absolute"
-  },
-  accentLine: {
-    position: "absolute"
-  }
-});
+"use strict";import{useState as y,useRef as g}from"react";import{View as r,Pressable as w,Animated as a,StyleSheet as k}from"react-native";import{jsx as i,jsxs as b}from"react/jsx-runtime";export function CyberpunkButtonOutline({children:p,onPress:c,style:d,accentColor:t="#00ffff"}){const[l,u]=y(false);const n=g(new a.Value(1)).current;const h=g(new a.Value(1)).current;const f=()=>{u(true);a.parallel([a.spring(n,{toValue:.98,useNativeDriver:true,tension:100,friction:10}),a.timing(h,{toValue:1.2,duration:100,useNativeDriver:true})]).start()};const m=()=>{u(false);a.parallel([a.spring(n,{toValue:1,useNativeDriver:true,tension:100,friction:10}),a.timing(h,{toValue:1,duration:100,useNativeDriver:true})]).start()};const e=15;const o=l?3:2.5;return i(w,{onPress:c,onPressIn:f,onPressOut:m,style:d,children:b(a.View,{style:{position:"relative",height:80,marginBottom:12,transform:[{scale:n}],opacity:h},children:[b(r,{style:[s.mainFrame,{borderColor:t,borderWidth:o,opacity:l?1:.95,shadowColor:t,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:8}],children:[i(r,{style:[s.cornerCut,{top:-o,left:-o,width:e,height:e,borderRightWidth:o,borderBottomWidth:o,borderRightColor:t,borderBottomColor:t,backgroundColor:d?.backgroundColor||"transparent",transform:[{rotate:"0deg"}]}]}),i(r,{style:[s.cornerCut,{top:-o,right:-o,width:e,height:e,borderLeftWidth:o,borderBottomWidth:o,borderLeftColor:t,borderBottomColor:t,backgroundColor:d?.backgroundColor||"transparent",transform:[{rotate:"0deg"}]}]}),i(r,{style:[s.cornerCut,{bottom:-o,left:-o,width:e,height:e,borderRightWidth:o,borderTopWidth:o,borderRightColor:t,borderTopColor:t,backgroundColor:d?.backgroundColor||"transparent",transform:[{rotate:"0deg"}]}]}),i(r,{style:[s.cornerCut,{bottom:-o,right:-o,width:e,height:e,borderLeftWidth:o,borderTopWidth:o,borderLeftColor:t,borderTopColor:t,backgroundColor:d?.backgroundColor||"transparent",transform:[{rotate:"0deg"}]}]})]}),i(r,{style:[s.innerFrame,{top:3,left:3,right:3,bottom:3,borderColor:t,borderWidth:1.5,opacity:.6,shadowColor:t,shadowOffset:{width:0,height:0},shadowOpacity:.4,shadowRadius:4}]}),i(r,{style:[s.accentLine,{top:5,left:e,width:10,height:1,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{top:e,left:5,width:1,height:10,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{top:5,right:e,width:10,height:1,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{top:e,right:5,width:1,height:10,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{bottom:5,left:e,width:10,height:1,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{bottom:e,left:5,width:1,height:10,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{bottom:5,right:e,width:10,height:1,backgroundColor:t,opacity:.6}]}),i(r,{style:[s.accentLine,{bottom:e,right:5,width:1,height:10,backgroundColor:t,opacity:.6}]}),i(r,{style:{position:"absolute",top:0,left:0,right:0,bottom:0,paddingLeft:35,paddingRight:25,paddingVertical:12,justifyContent:"center"},children:p})]})})}const s=k.create({mainFrame:{position:"absolute",top:0,left:10,right:10,bottom:0,borderRadius:2},innerFrame:{position:"absolute",borderRadius:2},cornerCut:{position:"absolute"},accentLine:{position:"absolute"}});

package/lib/module/ui/console/CyberpunkIconContainer.js

@@ -1,182 +1 @@
-"use strict";
-
-import { View, StyleSheet } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CyberpunkIconContainer({
-  children,
-  color,
-  size = 42
-}) {
-  const borderWidth = 1.5;
-  const cornerSize = 4;
-  return /*#__PURE__*/_jsxs(View, {
-    style: {
-      width: size,
-      height: size,
-      position: "relative"
-    },
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.mainFrame, {
-        width: size,
-        height: size,
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-        borderColor: color,
-        borderWidth: borderWidth,
-        shadowColor: color,
-        shadowOffset: {
-          width: 0,
-          height: 0
-        },
-        shadowOpacity: 0.6,
-        shadowRadius: 4
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.innerFrame, {
-        top: 2,
-        left: 2,
-        right: 2,
-        bottom: 2,
-        borderColor: color,
-        borderWidth: 0.5,
-        opacity: 0.4
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        top: 0,
-        left: 0,
-        width: cornerSize,
-        height: borderWidth,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        top: 0,
-        left: 0,
-        width: borderWidth,
-        height: cornerSize,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        top: 0,
-        right: 0,
-        width: cornerSize,
-        height: borderWidth,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        top: 0,
-        right: 0,
-        width: borderWidth,
-        height: cornerSize,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        bottom: 0,
-        left: 0,
-        width: cornerSize,
-        height: borderWidth,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        bottom: 0,
-        left: 0,
-        width: borderWidth,
-        height: cornerSize,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        bottom: 0,
-        right: 0,
-        width: cornerSize,
-        height: borderWidth,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.cornerAccent, {
-        bottom: 0,
-        right: 0,
-        width: borderWidth,
-        height: cornerSize,
-        backgroundColor: color,
-        opacity: 0.8
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.techDot, {
-        top: -1,
-        left: size / 2 - 1,
-        backgroundColor: color,
-        opacity: 0.6
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.techDot, {
-        bottom: -1,
-        left: size / 2 - 1,
-        backgroundColor: color,
-        opacity: 0.6
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.techDot, {
-        left: -1,
-        top: size / 2 - 1,
-        backgroundColor: color,
-        opacity: 0.6
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.techDot, {
-        right: -1,
-        top: size / 2 - 1,
-        backgroundColor: color,
-        opacity: 0.6
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        justifyContent: "center",
-        alignItems: "center",
-        shadowColor: color,
-        shadowOffset: {
-          width: 0,
-          height: 0
-        },
-        shadowOpacity: 0.8,
-        shadowRadius: 4
-      },
-      children: children
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  mainFrame: {
-    position: "absolute",
-    borderRadius: 2
-  },
-  innerFrame: {
-    position: "absolute",
-    borderRadius: 2
-  },
-  cornerAccent: {
-    position: "absolute"
-  },
-  techDot: {
-    position: "absolute",
-    width: 2,
-    height: 2,
-    borderRadius: 1
-  }
-});
+"use strict";import{View as o,StyleSheet as c}from"react-native";import{jsx as e,jsxs as d}from"react/jsx-runtime";export function CyberpunkIconContainer({children:a,color:t,size:h=42}){const i=1.5;const n=4;return d(o,{style:{width:h,height:h,position:"relative"},children:[e(o,{style:[r.mainFrame,{width:h,height:h,backgroundColor:"rgba(0, 0, 0, 0.6)",borderColor:t,borderWidth:i,shadowColor:t,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4}]}),e(o,{style:[r.innerFrame,{top:2,left:2,right:2,bottom:2,borderColor:t,borderWidth:.5,opacity:.4}]}),e(o,{style:[r.cornerAccent,{top:0,left:0,width:n,height:i,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{top:0,left:0,width:i,height:n,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{top:0,right:0,width:n,height:i,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{top:0,right:0,width:i,height:n,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{bottom:0,left:0,width:n,height:i,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{bottom:0,left:0,width:i,height:n,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{bottom:0,right:0,width:n,height:i,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.cornerAccent,{bottom:0,right:0,width:i,height:n,backgroundColor:t,opacity:.8}]}),e(o,{style:[r.techDot,{top:-1,left:h/2-1,backgroundColor:t,opacity:.6}]}),e(o,{style:[r.techDot,{bottom:-1,left:h/2-1,backgroundColor:t,opacity:.6}]}),e(o,{style:[r.techDot,{left:-1,top:h/2-1,backgroundColor:t,opacity:.6}]}),e(o,{style:[r.techDot,{right:-1,top:h/2-1,backgroundColor:t,opacity:.6}]}),e(o,{style:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center",shadowColor:t,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},children:a})]})}const r=c.create({mainFrame:{position:"absolute",borderRadius:2},innerFrame:{position:"absolute",borderRadius:2},cornerAccent:{position:"absolute"},techDot:{position:"absolute",width:2,height:2,borderRadius:1}});

package/lib/module/ui/console/CyberpunkSectionButton.js

@@ -1,119 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { ChevronRight } from "../../icons/index.js";
-import { CyberpunkButtonOutline } from "./CyberpunkButtonOutline.js";
-import { CyberpunkIconContainer } from "./CyberpunkIconContainer.js";
-import { gameUIColors } from "../gameUI/index.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CyberpunkSectionButton({
-  id: _id,
-  title,
-  subtitle,
-  icon: Icon,
-  iconColor,
-  iconBackgroundColor,
-  onPress,
-  index = 0
-}) {
-  return /*#__PURE__*/_jsx(CyberpunkButtonOutline, {
-    onPress: onPress,
-    accentColor: iconColor,
-    index: index,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.iconWrapper,
-        children: /*#__PURE__*/_jsx(CyberpunkIconContainer, {
-          color: iconColor,
-          size: 36,
-          children: /*#__PURE__*/_jsx(Icon, {
-            size: 20,
-            color: iconColor,
-            strokeWidth: 2.5
-          })
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.title, {
-            color: gameUIColors.text
-          }],
-          children: title
-        }), subtitle && /*#__PURE__*/_jsx(Text, {
-          style: [styles.subtitle, {
-            color: iconColor
-          }],
-          children: subtitle
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.dataDots,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.dot, {
-            backgroundColor: iconColor,
-            opacity: 0.9
-          }]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.dot, {
-            backgroundColor: iconColor,
-            opacity: 0.6
-          }]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.dot, {
-            backgroundColor: iconColor,
-            opacity: 0.3
-          }]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.arrowContainer,
-        children: /*#__PURE__*/_jsx(ChevronRight, {
-          size: 20,
-          color: `${iconColor}CC`
-        })
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    height: "100%"
-  },
-  iconWrapper: {
-    marginRight: 12
-  },
-  textContainer: {
-    flex: 1,
-    marginRight: 10
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    fontFamily: monoFont
-  },
-  subtitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    marginTop: 1,
-    letterSpacing: 0.5,
-    fontFamily: monoFont,
-    opacity: 0.85
-  },
-  arrowContainer: {
-    marginLeft: 8
-  },
-  dataDots: {
-    flexDirection: "row",
-    gap: 3,
-    alignItems: "center",
-    marginRight: 12
-  },
-  dot: {
-    width: 5,
-    height: 5,
-    borderRadius: 2.5
-  }
-});
+"use strict";import{View as o,Text as a,StyleSheet as g}from"react-native";import{ChevronRight as h}from"../../icons/index.js";import{CyberpunkButtonOutline as p}from"./CyberpunkButtonOutline.js";import{CyberpunkIconContainer as y}from"./CyberpunkIconContainer.js";import{gameUIColors as f}from"../gameUI/index.js";import{monoFont as l}from"../fonts.js";import{jsx as t,jsxs as i}from"react/jsx-runtime";export function CyberpunkSectionButton({id:u,title:s,subtitle:n,icon:c,iconColor:r,iconBackgroundColor:x,onPress:d,index:m=0}){return t(p,{onPress:d,accentColor:r,index:m,children:i(o,{style:e.content,children:[t(o,{style:e.iconWrapper,children:t(y,{color:r,size:36,children:t(c,{size:20,color:r,strokeWidth:2.5})})}),i(o,{style:e.textContainer,children:[t(a,{style:[e.title,{color:f.text}],children:s}),n&&t(a,{style:[e.subtitle,{color:r}],children:n})]}),i(o,{style:e.dataDots,children:[t(o,{style:[e.dot,{backgroundColor:r,opacity:.9}]}),t(o,{style:[e.dot,{backgroundColor:r,opacity:.6}]}),t(o,{style:[e.dot,{backgroundColor:r,opacity:.3}]})]}),t(o,{style:e.arrowContainer,children:t(h,{size:20,color:`${r}CC`})})]})})}const e=g.create({content:{flexDirection:"row",alignItems:"center",height:"100%"},iconWrapper:{marginRight:12},textContainer:{flex:1,marginRight:10},title:{fontSize:14,fontWeight:"700",letterSpacing:.5,fontFamily:l},subtitle:{fontSize:12,fontWeight:"600",marginTop:1,letterSpacing:.5,fontFamily:l,opacity:.85},arrowContainer:{marginLeft:8},dataDots:{flexDirection:"row",gap:3,alignItems:"center",marginRight:12},dot:{width:5,height:5,borderRadius:2.5}});