kupos-ui-components-lib 9.6.3 → 9.6.5

package/dist/assets/images/anims/service_list/female_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":389.908,"w":378.169,"meta":{"g":"@lottiefiles/creator@1.90.1"},"layers":[{"ty":0,"nm":"Precomp Layer Main Scene_1","sr":1,"st":0,"op":180,"ip":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[189,195]},"s":{"a":0,"k":[104.157,104.157]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,236.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":378,"h":390,"refId":"precomp_Main Scene_jM9TeYrW1Y_3d99d97a-abbe-4c5f-99bc-d6c3a9ec0397_6ced1adb-81c6-4f2a-81fe-41ec223cce28","ind":1,"tp":2},{"ty":4,"nm":"Ellipse 2","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[106.977,106.977]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,194.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[348.546,348.546]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.937,0.937]},"r":1,"o":{"a":0,"k":100}}],"ind":2},{"ty":4,"nm":"Ellipse 1","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[106.977,106.977]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,194.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[348.546,348.546]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.937,0.937]},"r":1,"o":{"a":0,"k":100}}],"ind":3},{"ty":0,"nm":"Nested Scene 2","sr":1,"st":0,"op":0,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":378,"h":390,"refId":"precomp_newScene_pAg4ss2wXg_138db0d9-ba9c-43eb-990d-ed6033f0b644_471ef448-e667-4911-b181-2b927ec28255","ind":4}],"v":"5.7.0","fr":60,"op":180,"ip":0,"assets":[{"nm":"Nested Scene 1","id":"precomp_newScene_eEKvnUyRwM_1e5c472e-e670-4951-b2be-c78f3b3c23a8_936e2ff8-1715-4d83-ac9b-e003a62870fb","fr":60,"layers":[]},{"nm":"Nested Scene 2","id":"precomp_newScene_pAg4ss2wXg_138db0d9-ba9c-43eb-990d-ed6033f0b644_471ef448-e667-4911-b181-2b927ec28255","fr":60,"layers":[]},{"nm":"Main Scene_1","id":"precomp_Main Scene_jM9TeYrW1Y_3d99d97a-abbe-4c5f-99bc-d6c3a9ec0397_6ced1adb-81c6-4f2a-81fe-41ec223cce28","fr":60,"layers":[{"ty":3,"nm":"Main Stroke width - Color Ctrl","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[50,50,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ef":[{"ty":5,"nm":"Stroke width","en":1,"ef":[{"ty":0,"nm":"Slider","v":{"a":0,"k":16}}]},{"ty":5,"nm":"Highlight width","en":1,"ef":[{"ty":0,"nm":"Slider","v":{"a":0,"k":18}}]},{"ty":5,"nm":"Base Color","en":1,"ef":[{"ty":2,"nm":"Color","v":{"a":0,"k":[1,0.361,0.377]}}]},{"ty":5,"nm":"Highlight","en":1,"ef":[{"ty":2,"nm":"Color","v":{"a":0,"k":[1,0.361,0.377]}}]}],"ind":1,"parent":8},{"ty":4,"nm":"bubble","sr":1,"st":0,"op":10798.799,"ip":0,"hd":true,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[272.075,245.691,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[272.207,146.933],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[307.207,110.933],"t":57.018,"ti":[0,0,0],"to":[0,0,0]},{"s":[272.207,146.933],"t":123.158}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.489,"y":1},"s":[0],"t":6.842},{"o":{"x":0.494,"y":0},"i":{"x":0.519,"y":1},"s":[-16.557],"t":41.93},{"o":{"x":0.547,"y":0},"i":{"x":0.551,"y":1},"s":[8.915],"t":77.018},{"o":{"x":0.385,"y":0},"i":{"x":0.43,"y":1.633},"s":[-3.821],"t":103.334},{"s":[0],"t":130}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[44.97,0],[0,-44.97],[-12.308,-14.265],[0,0],[0,0],[-10.847,0],[0,44.969]],"o":[[-44.97,0],[0,20.319],[0,0],[0,0],[9.464,3.85],[44.97,0],[0,-44.97]],"v":[[0,-83.691],[-81.425,-2.266],[-61.672,50.898],[-68.116,83.691],[-30.66,73.182],[0,79.158],[81.425,-2.266]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,162.191]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[328.207,192.589],[351.944,192.589]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 3","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[340.075,169.05],[340.075,206.849]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 4","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,-15.567],[15.641,0],[0,15.567],[-15.641,0]],"o":[[0,15.567],[-15.641,0],[0,-15.567],[15.641,0]],"v":[[28.321,0],[0,28.187],[-28.321,0],[0,-28.187]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,140.863]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[340.075,141.762]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,141.762]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.489,"y":1},"s":[0],"t":11},{"o":{"x":0.494,"y":0},"i":{"x":0.519,"y":1},"s":[-16.557],"t":46.088},{"o":{"x":0.547,"y":0},"i":{"x":0.551,"y":1},"s":[8.915],"t":81.176},{"o":{"x":0.385,"y":0},"i":{"x":0.43,"y":1.633},"s":[-3.821],"t":107.492},{"s":[0],"t":134.158}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"Head","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,297.865,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,200.095],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.189,"y":1},"s":[191.514,212.095],"t":30,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.651,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,194.095],"t":60,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,212.095],"t":90,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":114,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":138.42},{"s":[191.514,202.095],"t":155}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":4.838},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":34},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":64},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":94},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":118.193},{"s":[0],"t":142.58}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[4.662,4.662]],"o":[[-4.662,4.662],[0,0]],"v":[[8.441,-2.331],[-8.441,-2.331]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[2.38,1.849]],"o":[[-2.38,1.849],[0,0]],"v":[[4.308,-0.924],[-4.308,-0.924]]}],"t":60},{"s":[{"c":false,"i":[[0,0],[4.662,4.662]],"o":[[-4.662,4.662],[0,0]],"v":[[8.441,-2.331],[-8.441,-2.331]]}],"t":120}]}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,260.977]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[2.157,16.6],[25.37,0],[0,0],[-27.113,0],[0,27.113]],"o":[[-17.187,0],[-15.163,17.991],[0,0],[0,27.113],[27.114,0],[0,0]],"v":[[49.092,-24.529],[14.136,-53.952],[-49.092,-24.529],[-49.092,4.859],[-0.001,53.952],[49.092,4.859]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,243.365]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3},{"ty":4,"nm":"Head 2","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[191.364,297.865,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,199.095],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.189,"y":1},"s":[191.514,212.095],"t":30,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.651,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,194.095],"t":60,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,212.095],"t":90,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":114,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":138.42},{"s":[191.514,202.095],"t":155}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":4.838},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":34},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":64},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":94},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":118.193},{"s":[0],"t":142.58}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[2.157,16.6],[25.37,0],[0,0],[-27.113,0],[0,27.113]],"o":[[-17.187,0],[-15.163,17.991],[0,0],[0,27.113],[27.114,0],[0,0]],"v":[[49.092,-24.529],[14.136,-53.952],[-49.092,-24.529],[-49.092,4.859],[-0.001,53.952],[49.092,4.859]]}}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,243.365]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":4},{"ty":4,"nm":"Body","sr":1,"st":0,"op":10798.799,"ip":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,352.25,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,257.295]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[-12.718,0],[0,12.719],[0,0]],"o":[[0,0],[0,12.719],[12.719,0],[0,0],[0,0]],"v":[[-23.029,-26.591],[-23.029,3.561],[-0.001,26.591],[23.029,3.561],[23.029,-26.591]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,309.591]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-113.136,75.974],[114.717,76.586],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,369.345]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":5,"tp":4},{"ty":4,"nm":"Mask","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[250.066,250.098,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250.066,154.143]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Body 2","it":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.652,-46.38],[-112.728,-8.328],[-112.864,52.155],[112.864,52.155],[113,-8.328],[82.925,-46.38],[22.669,-52.154]]}],"t":30},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":60},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.652,-46.38],[-112.728,-8.328],[-112.864,52.155],[112.864,52.155],[113,-8.328],[82.925,-46.38],[22.669,-52.154]]}],"t":90},{"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":120}]}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,369.345]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[191.364,352.25]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,352.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":6},{"ty":4,"nm":"Hair","sr":1,"st":0,"op":10798.799,"ip":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,175.258,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,179.258]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":16},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":45.162},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":75.162},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":105.162},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":129.355},{"s":[0],"t":153.742}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[60.022,27.729],[0,13.706],[-3.82,6.033],[0,0],[0,20.738],[-47.742,0],[0,-47.741],[-11.095,-17.52],[0,0],[0,-7.141],[10.939,-6.599]],"o":[[-10.939,-6.599],[0,-7.141],[0,0],[11.095,-17.52],[0,-47.741],[47.741,0],[0,20.738],[0,0],[3.821,6.033],[0,13.706],[-60.022,27.729]],"v":[[-94.604,87.706],[-112.864,55.413],[-107.015,35.244],[-103.428,29.579],[-86.443,-28.992],[0.001,-115.436],[86.444,-28.992],[103.428,29.579],[107.016,35.244],[112.865,55.413],[94.604,87.706]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,248.725]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":7,"parent":3,"tp":6},{"ty":3,"nm":"Zero | troke width - Color Ctrl","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,151.045]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ind":8}]}]}

package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t, }: ServiceItemProps & {
+declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default PeruServiceItemDesktop;

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -14,65 +14,73 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
 import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
 import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
 import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
+import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
 import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
 import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
-import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
-import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
+import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
+import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
+import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
+import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
 import StageTooltip from "../../ui/StagesTooltip";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
-import SeatSection from "../../ui/SeatSection/SeatSection";
-import KuposButton from "../../ui/KuposButton/KuposButton";
-import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
-const ANIMATION_MAP = {
-    promoAnim: {
-        kupos: promoAnimation,
-    },
-    locationAnim: {
-        kupos: locationAnimation,
-        pullman: pullmanLocationAnimation,
-        opsites: opsitesLocationAnimation,
-    },
-    directoAnim: {
-        kupos: directoAnimation,
-    },
-    petFriendlyAnim: {
-        kupos: petFriendlyAnimation,
-        pullman: pullmanPetFriendlyAnimation,
-        opsites: opsitesPetFriendlyAnimation,
-    },
-    priorityStageAnim: {
-        kupos: priorityStageAnimation,
-        pullman: pullmanPriorityStageAnimation,
-        opsites: opsitesPriorityStageAnimation,
-    },
-    flexibleIcon: {
-        kupos: flexibleAnimation,
-        pullman: pullmanFlexibleAnimation,
-        opsites: opsitesFlexibleAnimation,
-    },
-    bombAnimation: {
-        kupos: bombAnimation,
-    },
-    dotAnimation: {
-        kupos: dotAnimation,
-        opsites: dotAnimation,
-    },
-};
-function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t = (key) => key, }) {
-    var _a, _b, _c, _d, _e;
+function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t = (key) => key, }) {
+    var _a, _b, _c, _d;
+    const animationMap = {
+        promoAnim: {
+            kupos: promoAnimation,
+            pullman: pullmanPromoAnimation,
+            opsites: opsitesPromoAnimation,
+            linatal: linatalPromoAnimation,
+        },
+        locationAnim: {
+            kupos: locationAnimation,
+            pullman: pullmanLocationAnimation,
+            opsites: opsitesLocationAnimation,
+            linatal: linatalLocationAnimation,
+        },
+        directoAnim: {
+            kupos: directoAnimation,
+            pullman: pullmanDirectoAnimation,
+            opsites: opsitesDirectoAnimation,
+            linatal: linatalDirectoAnimation,
+        },
+        petFriendlyAnim: {
+            kupos: petFriendlyAnimation,
+            pullman: pullmanPetFriendlyAnimation,
+            opsites: opsitesPetFriendlyAnimation,
+            linatal: linatalPetFriendlyAnimation,
+        },
+        priorityStageAnim: {
+            kupos: priorityStageAnimation,
+            pullman: pullmanPriorityStageAnimation,
+            opsites: opsitesPriorityStageAnimation,
+            linatal: linatalPriorityStageAnimation,
+        },
+        flexibleIcon: {
+            kupos: flexibleAnimation,
+            pullman: pullmanFlexibleAnimation,
+            opsites: opsitesFlexibleAnimation,
+            linatal: linatalFlexibleAnimation,
+        },
+    };
     const getAnimationIcon = (icon) => {
-        var _a;
-        const animation = ANIMATION_MAP[icon];
+        const animation = animationMap[icon];
         if (!animation)
             return null;
-        return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
+        const currentSiteType = siteType || "kupos";
+        return animation[currentSiteType];
     };
     const SvgAmenities = ({ moreAnemities, name, color, }) => {
         var _a;
@@ -216,7 +224,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
     };
     const checkMidnight = () => {
         var _a, _b;
-        setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
         if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
             (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
             ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -305,55 +312,18 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
     const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
         ? extractStage(serviceItem.stage_details_arr, 1)
         : null;
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const items = [
         {
-            key: "amenities",
-            width: "20%",
-            condition: true,
-            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
+            key: "rating",
+            width: "30%",
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",
-            width: "12%",
+            width: "20%",
             condition: serviceItem.duration,
             render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
         },
-        // {
-        //   key: "directo",
-        //   width: "12%",
-        //   condition: serviceItem?.is_direct_trip === true,
-        //   render: (
-        //     <DirectoBlock
-        //       translation={translation}
-        //       getAnimationIcon={getAnimationIcon}
-        //       colors={colors}
-        //       isSoldOut={isSoldOut}
-        //     />
-        //   ),
-        // },
         {
             key: "pet",
             width: "20%",
@@ -364,82 +334,48 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "flexible",
             width: "20%",
-            condition: serviceItem.is_change_ticket === true,
+            condition: false,
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
+        {
+            key: "amenities",
+            width: "20%",
+            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
+        },
     ];
-    const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
-    const grayscaleClass = isSoldOut ? "grayscale" : "";
-    const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
-    const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
-    const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
-    const serviceCardStyle = hasOfferText
-        ? {
-            borderColor: "transparent",
-            borderStyle: "solid",
-            borderWidth: "3px 3px 0 3px",
-            borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
-            background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
-            // zIndex: 1,
-        }
-        : {};
-    const seats = removeDuplicateSeats
-        ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
-        : serviceItem.seat_types || [];
-    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
-    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
-    return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    const amenitiesItem = items.find((i) => i.key === "amenities");
+    const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
+    return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText && !isSoldOut
-                ? "z-[3] rounded-[18px]"
-                : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
-            React.createElement("div", { className: " pt-[20px]", style: {
-                    padding: hasOfferText
-                        ? "20px 15px 10px 15px"
-                        : coachKey
-                            ? "20px 15px 20px 15px"
-                            : "20px 15px 10px 15px",
-                    marginTop: hasDiscount || hasOfferText ? "14px" : "",
-                } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center", 
-                    // style={{ marginTop: showTopLabel ? "8px" : "" }}
-                    style: {
-                        marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
-                    } },
-                    React.createElement("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            // gap: "5px",
-                        } },
-                        React.createElement("div", { 
-                            // className="flex items-center justify-center m-[auto]"
-                            className: "" },
-                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
-                            isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
+            React.createElement("div", { className: "p-[15px] pt-[20px]" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
+                    React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
+                        React.createElement("div", { className: " " },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
+                        isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
                     React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
                             gridTemplateRows: "1fr",
                         } },
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
                             !isCiva &&
                                 (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                    React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                                    React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
                             !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
                             React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
                                 React.createElement("div", null, "\u2022")),
                             !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
                             !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
@@ -455,55 +391,63 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                             margin: "auto",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
+                        React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2
+                                ? { alignItems: "center" }
+                                : { alignItems: "center" } },
+                            React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
+                            React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
+                                    color: isSoldOut ? "#c0c0c0" : colors.priceColor,
+                                    top: 0,
+                                    bottom: 0,
+                                    left: "68%",
+                                    right: 0,
+                                    justifyContent: getNumberOfSeats() < 2 ? "center" : "center",
+                                    gap: "5px",
+                                } },
+                                React.createElement("span", { style: {
+                                        position: "absolute",
+                                        top: getNumberOfSeats() > 1 ? -10 : -5,
+                                        fontWeight: "initial",
+                                        fontSize: "12px",
+                                        left: 0,
+                                        color: "#6a6a6a",
+                                    } }, "Desde"),
+                                getSeatPrice()))),
                     React.createElement("div", null,
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
-                                position: "absolute",
-                                top: serviceDetailsLoading ? "7px" : "5px",
-                                right: "16px",
-                            } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
-                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
-                        React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
-                React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
+                                backgroundColor: serviceDetailsLoading || isSoldOut
+                                    ? "lightgray"
+                                    : colors.kuposButtonColor,
+                                cursor: serviceDetailsLoading || isSoldOut
+                                    ? "not-allowed"
+                                    : "pointer",
+                            } },
+                            React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
+                                isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
+                                serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
+                showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
+                React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
+                    React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
+                            gridTemplateColumns: "30% 18% 23% 23%",
+                            // otherItems
+                            //   .map((i) => i.width)
+                            //   .join(" "),
+                        } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
+                    React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
         children,
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]", style: {
-                background: offerGradient,
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
+                backgroundColor: isSoldOut
+                    ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
+                    : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
-            React.createElement("div", { className: "flex  justify-between items-center w-full" },
-                React.createElement("div", { className: "flex items-center " },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
-                        React.createElement("div", { className: "flex items-center mt-[2px]" },
-                            React.createElement("span", { className: "bold-text ml-[6px]" },
-                                ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
-                                    ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
-                                    : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                                " ",
-                                isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
-                                " ",
-                                "\u00A0"),
-                            " ",
-                            "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
-                                    fontVariantNumeric: "tabular-nums",
-                                    display: "inline-block",
-                                } })))),
-                React.createElement("div", { className: "flex items-center" },
-                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
-                    React.createElement("span", { className: "ml-[6px]" },
-                        React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
-                        " ",
-                        React.createElement("span", null,
-                            " ",
-                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
-                            " |",
-                            " ",
-                            React.createElement("span", { className: "" },
-                                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
-                                React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
-                                " ",
-                                "comprando"))))))),
+            React.createElement(LottiePlayer
+            // animationData={serviceItem.icons.promoAnim}
+            , { 
+                // animationData={serviceItem.icons.promoAnim}
+                animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
+            React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
         React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
             showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
@@ -528,7 +472,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
                 } },
-                renderIcon("connectingServiceIcon", "12px"),
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
                 React.createElement("div", null, "Conexión"))),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,

package/dist/components/ServiceItem/ServiceItemDesktop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -22,6 +22,7 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
+import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -69,8 +70,11 @@ const ANIMATION_MAP = {
     starAnimation: {
         kupos: starAnimation,
     },
+    femaaleAnimation: {
+        kupos: femaleAnimation,
+    },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -239,12 +243,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })),
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
@@ -295,7 +299,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         boxSizing: "border-box",
                     }
                     : {})) },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut })))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })))),
         children,
         React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }