@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/Assets/language.json

@@ -0,0 +1,208 @@
+{
+  "vi": {
+    "errorCode": "Mã lỗi: ",
+    "seeMore": "Xem thêm",
+    "cancel": "Huỷ",
+    "done": "Xong",
+    "confirm": "Xác nhận",
+    "month": "tháng",
+    "day": "ngày",
+    "choose": "Chọn",
+    "sent": "Đã gửi",
+    "received": "Đã tiếp nhận",
+    "processing": "Đang xử lý",
+    "processed": "Đã xử lý",
+    "addImg": "Thêm hình",
+    "chooseBtn": "Chọn button",
+    "imgEg": "Hình ảnh tham khảo",
+    "filter": "Sắp xếp",
+    "shipping": "Đang giao hàng",
+    "men": "Nam",
+    "women": "Nữ",
+    "more": "Khác",
+    "expDate": "Ngày hết hạn",
+    "exp": "HSD",
+    "inActive": "Chưa kích hoạt",
+    "voucherRemindHour": "Hết hạn sau {hours} giờ",
+    "voucherRemindMinute": "Hết hạn sau {minutes} phút",
+    "voucherRemindSecond": "Hết hạn sau {seconds} giây",
+    "voucherRemindDay": "Hết hạn sau {days} ngày",
+    "chooseRoundtrip": "Chọn vé khứ hồi",
+    "depart": "Ngày đi",
+    "return": "Ngày về",
+    "departing": "Đi",
+    "returning": "Về",
+    "jan": "Tháng 1",
+    "feb": "Tháng 2",
+    "mar": "Tháng 3",
+    "apr": "Tháng 4",
+    "may": "Tháng 5",
+    "jun": "Tháng 6",
+    "jul": "Tháng 7",
+    "aug": "Tháng 8",
+    "sep": "Tháng 9",
+    "oct": "Tháng 10",
+    "nov": "Tháng 11",
+    "dec": "Tháng 12",
+    "mon": "T2",
+    "tue": "T3",
+    "wed": "T4",
+    "thu": "T5",
+    "fri": "T6",
+    "sat": "T7",
+    "sun": "CN",
+    "showLunar": "Hiển thị lịch âm",
+    "newYear": "Tết Dương lịch",
+    "valentine": "Ngày Lễ Tình nhân",
+    "womenDay": "Ngày Quốc tế Phụ nữ",
+    "liberationDay": "Ngày giải phóng Miền Nam thống nhất đất nước",
+    "laborDay": "Ngày Quốc tế Lao động",
+    "childrenDay": "Ngày Quốc tế Thiếu nhi",
+    "nationalDay": "Quốc khánh nước CHXHCN Việt Nam",
+    "womenDayVN": "Ngày Phụ nữ Việt Nam",
+    "teacherDay": "Ngày Nhà giáo Việt Nam",
+    "christmasEve": "Ngày Lễ Giáng Sinh",
+    "christmas": "Ngày Lễ Giáng Sinh",
+    "lunarNewYear": "Tết Nguyên Đán",
+    "hungKingDay": "Giỗ Tổ Hùng Vương",
+    "balance": "Số dư trong ví",
+    "chooseDate": "Chọn ngày tháng năm",
+    "year": "năm",
+    "hour": "giờ",
+    "minute": "phút",
+    "from": "Từ",
+    "to": "Đến",
+    "connected": "Đã kết nối",
+    "disconnected": "Mất kết nối",
+    "hide": "Ẩn",
+    "viewAllTitle": "Xem tất cả",
+    "headerTitle": "Lịch sử thanh toán",
+    "SHORTEN": "THU GỌN",
+    "viewMoreBank": "XEM THÊM (${otherItemCount} ngân hàng)",
+    "transaction_success": "Thành công",
+    "transaction_fail": "Thất bại",
+    "transaction_processing": "Đang xử lý",
+    "viewMore": "Xem thêm",
+    "shorten": "Thu gọn",
+    "Payment": "Thanh toán ${serviceName}",
+    "currencyUnit": "đ",
+    "Month": "Tháng",
+    "save": "Lưu",
+    "favoriteIn": "Thêm dịch vụ yêu thích",
+    "favoriteOut": "Xóa dịch vụ yêu thích",
+    "deviceIn": "Thêm vào thiết bị",
+    "setting": "Cài đặt",
+    "transaction": "Lịch sử giao dịch",
+    "share": "Chia sẽ dịch vụ",
+    "information": "Thông tin chung",
+    "tutorial": "Hướng dẫn sử dụng",
+    "question": "Câu hỏi thường gặp",
+    "support": "Trung tâm hỗ trợ",
+    "skip": "Bỏ qua",
+    "enterPhoneNumber": "Vui lòng nhập số điện thoại",
+    "invalidPhoneNumber": "Số điện thoại không đúng"
+  },
+  "en": {
+    "seeMore": "See more",
+    "cancel": "Cancel",
+    "done": "Done",
+    "confirm": "Confirm",
+    "month": "month",
+    "day": "day",
+    "choose": "Choose",
+    "sent": "Sent",
+    "received": "Received",
+    "processing": "Processing",
+    "processed": "Done",
+    "addImg": "Add image",
+    "chooseBtn": "Choose button",
+    "imgEg": "Example images",
+    "filter": "Filter",
+    "shipping": "Shipping",
+    "men": "Men",
+    "women": "Women",
+    "more": "More",
+    "expDate": "Expiration date",
+    "exp": "EXP",
+    "inActive": "Not Activated",
+    "voucherRemindHour": "Revoke after {hours} hours",
+    "voucherRemindMinute": "Revoke after {minutes} minutes",
+    "voucherRemindSecond": "Revoke after {seconds} seconds",
+    "voucherRemindDay": "Revoke after {days} days",
+    "chooseRoundtrip": "Choose roundtrip ticket",
+    "depart": "Departing",
+    "return": "Returning",
+    "departing": "De",
+    "returning": "Re",
+    "jan": "January",
+    "feb": "February",
+    "mar": "March",
+    "apr": "April",
+    "may": "May",
+    "jun": "June",
+    "jul": "July",
+    "aug": "August",
+    "sep": "September",
+    "oct": "October",
+    "nov": "November",
+    "dec": "December",
+    "mon": "Mon",
+    "tue": "Tue",
+    "wed": "Wed",
+    "thu": "Thu",
+    "fri": "Fri",
+    "sat": "Sat",
+    "sun": "Sun",
+    "showLunar": "Show Lunar Calendar",
+    "newYear": "New Year's Day",
+    "valentine": "Valentine's Day",
+    "womenDay": "International Women's Day",
+    "liberationDay": "Liberation Day",
+    "laborDay": "Internation Labor's Day",
+    "childrenDay": "International Labor's Day",
+    "nationalDay": "National Day",
+    "womenDayVN": "Vietnamese Women's Day",
+    "teacherDay": "Teacher's Day",
+    "christmasEve": "Christmas Eve",
+    "christmas": "Christmas Day",
+    "lunarNewYear": "Lunar New Year",
+    "hungKingDay": "Hung Kings' Festival",
+    "balance": "Wallet Balance",
+    "chooseDate": "Choose date",
+    "year": "year",
+    "hour": "hour",
+    "minute": "minute",
+    "from": "From",
+    "to": "To",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "hide": "Hide",
+    "viewAllTitle": "View all",
+    "headerTitle": "Transaction history",
+    "SHORTEN": "SHORTEN",
+    "viewMoreBank": "VIEW MORE (${otherItemCount} banks)",
+    "transaction_success": "Success",
+    "transaction_fail": "Fail",
+    "transaction_processing": "Processing",
+    "viewMore": "View more",
+    "shorten": "Shorten",
+    "Payment": "${serviceName} payment",
+    "currencyUnit": "VND",
+    "Month": "Month",
+    "save": "Save",
+    "favoriteIn": "Add to favorite services",
+    "favoriteOut": "Remove to favorite services",
+    "deviceIn": "Add to device",
+    "setting": "Settings",
+    "transaction": "Transaction History",
+    "share": "Share",
+    "information": "Information",
+    "tutorial": "Instruction",
+    "question": "FAQ",
+    "support": "Support center",
+    "errorCode": "Error code: ",
+    "skip": "Skip",
+    "enterPhoneNumber": "Please enter your phone number",
+    "invalidPhoneNumber": "Invalid phone number"
+  }
+}

package/src/foundations/Assets/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.972549019608,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0}],"markers":[]}

package/src/foundations/Assets/pinAnimation.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":24,"ip":0,"op":48,"w":72,"h":72,"nm":"Comp 2","ddd":0,"assets":[{"id":"image_0","w":72,"h":72,"u":"","p":"data:image/png;base64,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","e":1}],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12.26,46.01,0],"ix":2,"l":2},"a":{"a":0,"k":[20.385,-25.365,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"t":24,"s":[0,0,100],"e":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":29,"s":[100,100,100],"e":[0,0,100]},{"t":32}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[6,6],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.921568627451,0.18431372549,0.588235294118,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[20.385,-25.365],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":22,"op":49,"st":12,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[55.635,16.01,0],"ix":2,"l":2},"a":{"a":0,"k":[20.385,-25.365,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"t":22,"s":[0,0,100],"e":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27,"s":[100,100,100],"e":[0,0,100]},{"t":30}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[8,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.478431372549,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[20.385,-25.365],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":22,"op":49,"st":12,"ct":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"tick","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[36,36,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[3.938,16.25],[13,25.75],[29.688,7.438]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":28,"s":[1,0.800000011921,0,1],"e":[0.188235309077,0.196078446332,0.20000001496,1]},{"t":36}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.573],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":24,"s":[0],"e":[100]},{"t":28}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":24,"op":49,"st":16,"ct":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[36.812,39.373,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,-0.174]},"t":0,"s":[100,100,100],"e":[95,95,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":2,"s":[95,95,100],"e":[105,105,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,3.356]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[105,105,100],"e":[100,100,100]},{"t":9}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":16,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":35,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[1,0.800000011921,0,1],"e":[1,0.800000011921,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":28,"s":[1,0.800000011921,0,1],"e":[0.188235309077,0.196078446332,0.20000001496,1]},{"t":36}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.312,-1.188],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.183,87.642],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[100],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":16,"s":[100],"e":[24]},{"t":24}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":13,"s":[100],"e":[100]},{"t":20}],"ix":2},"o":{"a":0,"k":108,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":12,"op":49,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":6,"ty":2,"nm":"pin-to-home.png","cl":"png","refId":"image_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[100],"e":[0]},{"t":12}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[36,36,0],"ix":2,"l":2},"a":{"a":0,"k":[36,36,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,-0.667]},"t":0,"s":[100,100,100],"e":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":2,"s":[96,96,100],"e":[105,105,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,3.356]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":8,"s":[105,105,100],"e":[100,100,100]},{"t":10}],"ix":6,"l":2}},"ao":0,"ip":0,"op":12,"st":0,"bm":0}],"markers":[]}

package/src/foundations/Assets/unpinAnimation.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":24,"ip":0,"op":24,"w":72,"h":72,"nm":"Comp 2.1_unpin","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"tick","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":11,"s":[100],"e":[0]},{"t":14}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[52.812,52.594,0],"ix":2,"l":2},"a":{"a":0,"k":[16.812,16.594,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,-0.833]},"t":4,"s":[100,100,100],"e":[95,95,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[95,95,100],"e":[105,105,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,2.754]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[105,105,100],"e":[100,100,100]},{"t":12}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[3.938,16.25],[13,25.75],[29.688,7.438]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.188235309077,0.196078446332,0.20000001496,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":24,"st":-8,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"star 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[36.812,39.373,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":16,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":35,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0.188235309077,0.196078446332,0.20000001496,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.312,-1.188],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[86.183,87.642],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.498],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[24],"e":[0]},{"t":18}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":108,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":24,"st":4,"ct":1,"bm":0}],"markers":[]}

package/src/foundations/Badge/Badge.tsx

@@ -0,0 +1,104 @@
+import React, { FC, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useComponentId } from '../Application';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { BadgeProps } from './types';
+import { Colors, Radius, Spacing } from '../Consts';
+import { Text, useScaleSize } from '../Text';
+
+const Badge: FC<BadgeProps> = ({
+  label = '',
+  style,
+  backgroundColor,
+  accessibilityLabel,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const { componentId } = useComponentId('Badge', accessibilityLabel);
+  const scaledSize = useScaleSize(16);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  
+  const styles = StyleSheet.create({
+    badge: {
+      paddingHorizontal: Spacing.XS,
+      borderRadius: Radius.M,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: scaledSize - 2,
+      minWidth: scaledSize - 2,
+      flexDirection: 'row',
+      alignSelf: 'baseline',
+    },
+    badgeContainer: {
+      borderRadius: Radius.M,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: scaledSize,
+      minWidth: scaledSize,
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: Colors.black_01,
+      backgroundColor: 'transparent',
+      alignSelf: 'baseline',
+    },
+    debugBaseLine: {
+      borderWidth: 1,
+      borderColor: Colors.green_06,
+    },
+  });
+
+  const isValidatedColor = () => {
+    const colorKeys = Object.keys(Colors);
+    const colorValue = Object.values(Colors);
+    if (backgroundColor) {
+      const colorIndex = colorValue.indexOf(backgroundColor);
+      if (colorIndex !== -1) {
+        if (colorKeys[colorIndex]?.includes('_03')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(label) > 99) {
+      return '99+';
+    }
+    return label.toString();
+  };
+
+  let badgeColor = isNumber()
+    ? theme.colors.error.primary
+    : theme.colors.warning.primary;
+
+  if (backgroundColor && isValidatedColor()) {
+    badgeColor = backgroundColor;
+  }
+
+  return (
+    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
+      <View
+        style={[styles.badge, { backgroundColor: badgeColor }]}
+        accessibilityLabel={componentId}
+      >
+        <Text
+          color={Colors.black_01}
+          typography={'action_xxs_bold'}
+          accessibilityLabel={`${componentId}|text`}
+        >
+          {formatTitle()}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default Badge;

package/src/foundations/Badge/BadgeDot.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { BadgeDotProps } from './types';
+import styles from './styles';
+import { MiniAppContext } from '../Context';
+
+const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
+  const context = useContext<any>(MiniAppContext);
+  let dotStyle;
+  let dotContainerStyle;
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  if (size === 'large') {
+    dotStyle = styles.dot;
+    dotContainerStyle = styles.dotContainer;
+  } else {
+    dotStyle = styles.dotSmall;
+    dotContainerStyle = styles.dotSmallContainer;
+  }
+
+  return (
+    <View
+      style={[
+        style,
+        dotContainerStyle,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      <View style={[dotStyle]} />
+    </View>
+  );
+};
+
+export default BadgeDot;

package/src/foundations/Badge/BadgeDotAnimation.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { BadgeDotProps } from './types';
+import styles from './styles';
+
+const DURATION = 500;
+
+const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
+  // Refs for animated values
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const waveScaleAnim = useRef(new Animated.Value(1)).current;
+  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
+
+  const dotStyle =
+    size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
+  const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
+
+  useEffect(() => {
+    // Infinite loop animation for the scale and wave effect
+    const animation = Animated.loop(
+      Animated.parallel([
+        // Dot pulse animation
+        Animated.sequence([
+          Animated.spring(scaleAnim, {
+            toValue: 1, // Scale up slightly
+            friction: 5, // Controls the "bounciness" of the spring
+            tension: 30, // Controls the "stiffness" of the spring
+            useNativeDriver: true,
+          }),
+          Animated.spring(scaleAnim, {
+            toValue: 1.1,
+            friction: 5,
+            tension: 30,
+            useNativeDriver: true,
+          }),
+        ]), // Wave animation
+        Animated.sequence([
+          Animated.timing(waveScaleAnim, {
+            toValue: 2.5,
+            duration: DURATION * 3,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveScaleAnim, {
+            toValue: 1, // Reset wave size
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ]), // Wave opacity animation
+        Animated.sequence([
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0.3, // Wave becomes visible
+            duration: DURATION * 2,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0, // Wave fades out
+            duration: DURATION,
+            useNativeDriver: true,
+          }),
+        ]),
+      ]),
+    );
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [scaleAnim, waveOpacityAnim, waveScaleAnim]);
+
+  return (
+    <View style={[styles.dotAnimationContainer, style]}>
+      {/* Wave Animation */}
+      <Animated.View
+        style={[
+          waveStyle,
+          {
+            transform: [{ scale: waveScaleAnim }],
+            opacity: waveOpacityAnim,
+          },
+        ]}
+      />
+      {/* Dot Animation */}
+      <Animated.View
+        style={[
+          dotStyle,
+          {
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default BadgeDotAnimation;

package/src/foundations/Badge/BadgeRibbon.tsx

@@ -0,0 +1,112 @@
+import React, { FC, useContext, useMemo } from 'react';
+import { View } from 'react-native';
+import { DownTail, UpTail } from './Shape';
+import styles from './styles';
+import { BadgeRibbonProps } from './types';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { Text } from '../Text';
+import { Colors } from '../Consts';
+import { Image } from '../Image';
+
+const BadgeRibbon: FC<BadgeRibbonProps> = ({
+  position = 'top_right',
+  label = 'Label',
+  isRound = false,
+  style = {},
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const isRight = position === 'top_right' || position === 'bottom_right';
+  const isUpTail = position === 'bottom_left' || position === 'top_right';
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
+  const textRotate = ribbonRotate;
+  const textMargin = useMemo(() => (isUpTail ? 4 : 0), [isUpTail]);
+  const skewMargin = textMargin;
+
+  const ribbonTransform = useMemo(
+    () => [{ rotateZ: ribbonRotate }],
+    [ribbonRotate],
+  );
+  const textTransform = useMemo(() => [{ rotateZ: textRotate }], [textRotate]);
+
+  const ribbonTail = isUpTail ? <UpTail /> : <DownTail />;
+  const renderRoundContent = () => (
+    <View
+      collapsable={false}
+      style={[
+        styles.ribbonContent,
+        {
+          backgroundColor: theme.colors.warning.primary,
+          marginTop: textMargin,
+        },
+      ]}
+    >
+      <View
+        collapsable={false}
+        style={{ transform: textTransform, marginVertical: -2 }}
+      >
+        <Text
+          style={styles.ribbonLabel}
+          color={Colors.black_01}
+          typography="label_xs_medium"
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+
+  const renderSkewContent = () => (
+    <View style={{ flexDirection: 'row', marginTop: skewMargin }}>
+      <View
+        collapsable={false}
+        style={[
+          styles.ribbonSkewContent,
+          { backgroundColor: theme.colors.warning.primary },
+        ]}
+      >
+        <View
+          collapsable={false}
+          style={{ transform: textTransform, marginVertical: -2 }}
+        >
+          <Text
+            style={styles.ribbonLabel}
+            color={Colors.black_01}
+            typography="label_xs_medium"
+          >
+            {label}
+          </Text>
+        </View>
+      </View>
+      <Image
+        source={{
+          uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+        }}
+        style={styles.skew}
+      />
+    </View>
+  );
+
+  const content = isRound ? renderRoundContent() : renderSkewContent();
+
+  return (
+    <View
+      collapsable={false}
+      key={isRight ? 'right' : 'left'}
+      style={[
+        styles.ribbon,
+        style,
+        { transform: ribbonTransform },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {ribbonTail}
+      {content}
+    </View>
+  );
+};
+
+export default BadgeRibbon;

package/src/foundations/Badge/Shape.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './styles';
+import {Image} from '../Image';
+
+const UpTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png',
+      }}
+      style={[styles.tail, {transform: [{rotate: '180deg'}]}]}
+    />
+  );
+};
+
+const DownTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_4x.png',
+      }}
+      style={styles.tail}
+    />
+  );
+};
+
+export {UpTail, DownTail};