kupos-ui-components-lib 10.4.13 → 10.4.14

package/src/components/FilterSortBar/PriceRangeSlider.tsx

@@ -72,66 +72,37 @@ const PriceRangeSlider = ({
   };
 
   return (
-    <div style={{ padding: "8px 4px 4px" }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 28 }}>
-        <div
-          style={{
-            flex: 1,
-            border: "1px solid #E5E5E5",
-            borderRadius: 8,
-            padding: "6px 10px 8px",
-          }}
-        >
-          <div style={{ fontSize: 11, color: "#9B9B9B", marginBottom: 2 }}>{minLabel}</div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: "#464647" }}>
+    <div className="p-[8px_4px_4px]">
+      <div className="flex items-center gap-[8px] mb-[28px]">
+        <div className="flex-1 border border-[#E5E5E5] rounded-[8px] p-[6px_10px_8px]">
+          <div className="text-[11px] text-[#464647] mb-[2px]">{minLabel}</div>
+          <div className="text-[13px] font-bold text-[#464647]">
             {formatCurrency(currentMin, currencySign)}
           </div>
         </div>
-        <span style={{ color: "#9B9B9B", fontSize: 13 }}>-</span>
-        <div
-          style={{
-            flex: 1,
-            border: "1px solid #E5E5E5",
-            borderRadius: 8,
-            padding: "6px 10px 8px",
-          }}
-        >
-          <div style={{ fontSize: 11, color: "#9B9B9B", marginBottom: 2 }}>{maxLabel}</div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: "#464647" }}>
+        <span className="text-[#9B9B9B] text-[13px]">-</span>
+        <div className="flex-1 border border-[#E5E5E5] rounded-[8px] p-[6px_10px_8px]">
+          <div className="text-[11px] text-[#464647] mb-[2px]">{maxLabel}</div>
+          <div className="text-[13px] font-bold text-[#464647]">
             {formatCurrency(currentMax, currencySign)}
           </div>
         </div>
       </div>
 
-      <div style={{ padding: `0 ${THUMB_RADIUS}px`, overflow: "visible" }}>
+      <div className="overflow-visible" style={{ padding: `0 ${THUMB_RADIUS}px` }}>
         <div
           ref={trackRef}
-          style={{
-            position: "relative",
-            height: THUMB_SIZE,
-            display: "flex",
-            alignItems: "center",
-            touchAction: "none",
-            overflow: "visible",
-          }}
+          className="relative flex items-center overflow-visible [touch-action:none]"
+          style={{ height: THUMB_SIZE }}
         >
+          <div className="absolute left-0 right-0 h-[3px] rounded-[2px] bg-[#E5E5E5]" />
+          {/* Stops right at each thumb's border instead of reaching its center
+              (which would run the line underneath half of the circle). */}
           <div
+            className="absolute h-[3px] rounded-[2px]"
             style={{
-              position: "absolute",
-              left: 0,
-              right: 0,
-              height: 3,
-              borderRadius: 2,
-              backgroundColor: "#E5E5E5",
-            }}
-          />
-          <div
-            style={{
-              position: "absolute",
-              left: `${minPct}%`,
-              right: `${100 - maxPct}%`,
-              height: 3,
-              borderRadius: 2,
+              left: `calc(${minPct}% + ${THUMB_RADIUS}px)`,
+              right: `calc(${100 - maxPct}% + ${THUMB_RADIUS}px)`,
               backgroundColor: primaryColor,
             }}
           />
@@ -148,32 +119,20 @@ const PriceRangeSlider = ({
               aria-valuemin={min}
               aria-valuemax={max}
               aria-valuenow={thumb === "min" ? currentMin : currentMax}
+              className="absolute rounded-full bg-white cursor-grab shadow-[0_1px_4px_rgba(0,0,0,0.25)]"
               style={{
-                position: "absolute",
                 left: `${pct}%`,
                 transform: "translateX(-50%)",
                 width: THUMB_SIZE,
                 height: THUMB_SIZE,
-                borderRadius: "50%",
-                backgroundColor: "#fff",
                 border: `2px solid ${primaryColor}`,
-                boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
-                cursor: "grab",
                 zIndex: thumb === "min" ? 2 : 3,
               }}
             />
           ))}
         </div>
       </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          fontSize: 11,
-          color: "#9B9B9B",
-          marginTop: 8,
-        }}
-      >
+      <div className="flex justify-between text-[11px] text-[#464647] mt-[8px]">
         <span>{formatCurrency(min, currencySign)}</span>
         <span>{formatCurrency(max, currencySign)}</span>
       </div>

package/src/components/FilterSortBar/SheetFooter.tsx

@@ -12,45 +12,17 @@ const SheetFooter = ({ onClear, onApply, colors }: SheetFooterProps) => {
   const buttonTextColor = colors.buttonTextColor || colors.primaryTextColor;
 
   return (
-    <div
-      style={{
-        display: "flex",
-        gap: 12,
-        paddingTop: 16,
-        marginBottom: 8,
-      }}
-    >
+    <div className="flex gap-[12px] pt-[16px] mb-[8px]">
       <button
         onClick={onClear}
-        style={{
-          flex: 1,
-          padding: "12px 16px",
-          borderRadius: 10,
-          border: "1px solid #E5E5E5",
-          background: "#fff",
-          color: "#464647",
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: "pointer",
-          WebkitTapHighlightColor: "transparent",
-        }}
+        className="flex-1 px-[16px] py-[12px] rounded-[10px] border border-[#E5E5E5] bg-[#fff] text-[#464647] text-[14px] font-semibold cursor-pointer [-webkit-tap-highlight-color:transparent] font-['DMSans-Regular',sans-serif]"
       >
         Borrar filtro
       </button>
       <button
         onClick={onApply}
-        style={{
-          flex: 1,
-          padding: "12px 16px",
-          borderRadius: 10,
-          border: "none",
-          background: buttonColor,
-          color: buttonTextColor,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: "pointer",
-          WebkitTapHighlightColor: "transparent",
-        }}
+        className="flex-1 px-[16px] py-[12px] rounded-[10px] border-none text-[14px] font-semibold cursor-pointer [-webkit-tap-highlight-color:transparent] font-['DMSans-Regular',sans-serif]"
+        style={{ background: buttonColor, color: buttonTextColor }}
       >
         Aplicar
       </button>

package/src/components/FilterSortBar/defaultIcons.ts

@@ -10,6 +10,11 @@
 import { FilterSortBarIcons } from "./types";
 
 export const DEFAULT_ICONS: FilterSortBarIcons = {
+  // Sourced from src/assets/images/filter/arrow-down.png (re-exported without
+  // its stray XMP orientation metadata, which browsers don't honor for PNGs —
+  // using the file as-is would render sideways).
+  sortArrowIcon:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABDCAYAAADatIboAAADC0lEQVR4nNWaMWsUQRTHf741ixERIqIICopgY4qA2iimM42Q4gqvsxEE8WPYWKRJkc4qnYWNlUqaFJIuVfIFBOUaUQhETvQiA2/gMc7e3uZuc/d+sMUNdzvv/+b/ZuaYgclTAqvADtAHesBLYAEnLABvNPgjYAB8AJba6ExaGoEgYk4/nwIuAWe9CJgzgbeO4BzBOYJzBOcIzhGcIzhHcI7gHME5gnME5wjOEZwjOEdwjuAcwTmCcwTnCM4RnCM4R3CO4BzBOYJzBOcIzhGcIzhHcI7gHME5gnME55wG5oFrwHngB/AN+MXsUQAXgSvAH+BriDcIeAg8AW4Du8Bb4DPwl9mhBG4BXeAe8Bv4CGyjJ+oHeih9qIfSd3VkjsNV4J2+Lz4hMffHyPwisG4Oz8PzBdgMNXBDFQbOAA+A18Aj0z4tSuAm8EKzH8+g0cP0O8FCn4DHwAU9nD6ntgo++zlFOxXAdeA58FTjigQL7QFb6B2GTbXPwAzRgdppuaGdJmGhQjO/lomrr7bvxgskpXo+XND4br48MCJW9KUnIaAwwfcywW9r8PO5Kt9UEbbzkIH3DUZiHAGFFuyrJJlp5suqHy+ZqzKpnbb0HlDZkoBCM7+eCf7Q9G9r4T9KUxPpSPSNncoJCyg08xsV/YbgO6PaONppw6wPuUzMT1DAoukvzfxOTX/U2SmdBaKIqsJuIqAALhvbHGUKtnHwdiQWVUQvefmBFvZK5uWjCoi2WdNVtVHBjkrsxN6BqyvsUQWEgs3Zpq/f70zqomC6TuRqwhZ2nYDCBN+rsE1njL1YpYi4oaoSEb1aJyCOaG6qPFbBTsJOfTMSVQKWawp2R38/dJ4fl6pthy3sZ7pe2AD3tX09KdjBsO1BmyLiSBxm7LSrQdr2nrbntgf7o6ywbdopXezSbUhsy9lu+yRsU7ftiMt/GnTVY22zelK2GTYScRebZrjqibaZWuabFPawzM9E8FW72JyIWODdWQs+tVNudhroPN/07+nU7BRHot/kzwgzgrVTmP/j9qCV4P8B53h9Q9i84bIAAAAASUVORK5CYII=",
   filterIcon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjM5NTggNy4wMDAyNkg1LjE4ODcxTTUuMTg4NzEgNy4wMDAyNkM1LjE4ODcxIDYuNjYyOTkgNS4wNTQxNSA2LjMzOTU0IDQuODE1NjYgNi4xMDEwNUM0LjU3NzE4IDUuODYyNTcgNC4yNTM3MyA1LjcyODU5IDMuOTE2NDYgNS43Mjg1OUMzLjU3OTE5IDUuNzI4NTkgMy4yNTU3NCA1Ljg2MjU3IDMuMDE3MjYgNi4xMDEwNUMyLjc3ODc3IDYuMzM5NTQgMi42NDQ3OSA2LjY2Mjk5IDIuNjQ0NzkgNy4wMDAyNk01LjE4ODcxIDcuMDAwMjZDNS4xODg3MSA3LjMzNzUyIDUuMDU0MTUgNy42NjA5OCA0LjgxNTY2IDcuODk5NDZDNC41NzcxOCA4LjEzNzk0IDQuMjUzNzMgOC4yNzE5MiAzLjkxNjQ2IDguMjcxOTJDMy41NzkxOSA4LjI3MTkyIDMuMjU1NzQgOC4xMzc5NCAzLjAxNzI2IDcuODk5NDZDMi43Nzg3NyA3LjY2MDk4IDIuNjQ0NzkgNy4zMzc1MiAyLjY0NDc5IDcuMDAwMjZNMi42NDQ3OSA3LjAwMDI2SDEuNjA0MTNNMTIuMzk1OCAxMC44NTQzSDkuMDQyNzlNOS4wNDI3OSAxMC44NTQzQzkuMDQyNzkgMTEuMTkxNiA4LjkwODQ5IDExLjUxNTUgOC42Njk5NSAxMS43NTRDOC40MzE0MiAxMS45OTI1IDguMTA3ODkgMTIuMTI2NiA3Ljc3MDU0IDEyLjEyNjZDNy40MzMyOCAxMi4xMjY2IDcuMTA5ODIgMTEuOTkyIDYuODcxMzQgMTEuNzUzNUM2LjYzMjg2IDExLjUxNSA2LjQ5ODg4IDExLjE5MTYgNi40OTg4OCAxMC44NTQzTTkuMDQyNzkgMTAuODU0M0M5LjA0Mjc5IDEwLjUxNyA4LjkwODQ5IDEwLjE5MzcgOC42Njk5NSA5Ljk1NTIyQzguNDMxNDIgOS43MTY2OCA4LjEwNzg5IDkuNTgyNjcgNy43NzA1NCA5LjU4MjY3QzcuNDMzMjggOS41ODI2NyA3LjEwOTgyIDkuNzE2NjUgNi44NzEzNCA5Ljk1NTE0QzYuNjMyODYgMTAuMTkzNiA2LjQ5ODg4IDEwLjUxNyA2LjQ5ODg4IDEwLjg1NDNNNi40OTg4OCAxMC44NTQzSDEuNjA0MTNNMTIuMzk1OCAzLjE0NjE3SDEwLjU4NDVNMTAuNTg0NSAzLjE0NjE3QzEwLjU4NDUgMi45NzkxOCAxMC41NTExIDIuODEzODEgMTAuNDg3MiAyLjY1OTUzQzEwLjQyMzMgMi41MDUyNCAxMC4zMjk2IDIuMzY1MDYgMTAuMjExNSAyLjI0Njk3QzEwLjA5MzQgMi4xMjg4OCA5Ljk1MzIyIDIuMDM1MjEgOS43OTg5NCAxLjk3MTMxQzkuNjQ0NjUgMS45MDc0IDkuNDc5MjkgMS44NzQ1MSA5LjMxMjI5IDEuODc0NTFDOC45NzUwMyAxLjg3NDUxIDguNjUxNTcgMi4wMDg0OSA4LjQxMzA5IDIuMjQ2OTdDOC4xNzQ2MSAyLjQ4NTQ1IDguMDQwNjMgMi44MDg5MSA4LjA0MDYzIDMuMTQ2MTdNMTAuNTg0NSAzLjE0NjE3QzEwLjU4NDUgMy4zMTMxNyAxMC41NTExIDMuNDc4NTMgMTAuNDg3MiAzLjYzMjgyQzEwLjQyMzMgMy43ODcxMSAxMC4zMjk2IDMuOTI3MjkgMTAuMjExNSA0LjA0NTM4QzEwLjA5MzQgNC4xNjM0NiA5Ljk1MzIyIDQuMjU3MTMgOS43OTg5NCA0LjMyMTA0QzkuNjQ0NjUgNC4zODQ5NSA5LjQ3OTI5IDQuNDE3ODQgOS4zMTIyOSA0LjQxNzg0QzguOTc1MDMgNC40MTc4NCA4LjY1MTU3IDQuMjgzODYgOC40MTMwOSA0LjA0NTM4QzguMTc0NjEgMy44MDY4OSA4LjA0MDYzIDMuNDgzNDQgOC4wNDA2MyAzLjE0NjE3TTguMDQwNjMgMy4xNDYxN0gxLjYwNDEzIiBzdHJva2U9IiM0NjQ2NDciIHN0cm9rZS13aWR0aD0iMC44NzUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=",
   searchIcon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjg3NSAxMC4wNjI1QzguMTAzNzUgMTAuMDYyNSAxMC4wNjI1IDguMTAzNzUgMTAuMDYyNSA1LjY4NzVDMTAuMDYyNSAzLjI3MTI1IDguMTAzNzUgMS4zMTI1IDUuNjg3NSAxLjMxMjVDMy4yNzEyNSAxLjMxMjUgMS4zMTI1IDMuMjcxMjUgMS4zMTI1IDUuNjg3NUMxLjMxMjUgOC4xMDM3NSAzLjI3MTI1IDEwLjA2MjUgNS42ODc1IDEwLjA2MjVaIiBzdHJva2U9IiM0NjQ2NDciLz4KPHBhdGggZD0iTTguNzUgOC43NUwxMS4zNzUgMTEuMzc1IiBzdHJva2U9IiM0NjQ2NDciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K",
   categoryIcons: {
@@ -26,4 +31,10 @@ export const DEFAULT_ICONS: FilterSortBarIcons = {
     sunset: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI5MF8zOTIpIj4KPG1hc2sgaWQ9Im1hc2swXzI5MF8zOTIiIHN0eWxlPSJtYXNrLXR5cGU6bHVtaW5hbmNlIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiPgo8cGF0aCBkPSJNMTQgMEgwVjE0SDE0VjBaIiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMjkwXzM5MikiPgo8cGF0aCBkPSJNMy41MzUyOCAxMi4xOTg5QzQuMjQxMSAxMi41MTk3IDUuMTM5NDQgMTIuNTE5NyA1Ljg0NTMgMTIuMTk4OUM2LjU1MTEzIDExLjg3ODEgNy40NDk0OCAxMS44NzgxIDguMTU1MjkgMTIuMTk4OUM4Ljg2MTEgMTIuNTE5NyA5Ljc1OTUgMTIuNTE5NyAxMC40NjUzIDEyLjE5ODlNNy4wMDAyMiAxLjc1VjIuOTE2NjdNMi4zMzM1OCA3LjU4MzMxSDEuMTY2OU0zLjY4MzQ4IDQuMjY2NTdMMi44NTg1MiAzLjQ0MTYxTTEwLjMxNjggNC4yNjY1N0wxMS4xNDE4IDMuNDQxNjFNMTIuODMzNiA3LjU4MzMxSDExLjY2N000LjA4MzU4IDcuNTgzMzFDNC4wODM1OCA1Ljk3MjUyIDUuMzg5NDEgNC42NjY2NyA3LjAwMDIyIDQuNjY2NjdDOC42MTEwNiA0LjY2NjY3IDkuOTE2OTYgNS45NzI1MiA5LjkxNjk2IDcuNTgzMzFNMS4yMjUzIDEwLjE1NzNDMS45MzExMyA5LjgzNjQ5IDIuODI5NDcgOS44MzY0OSAzLjUzNTMgMTAuMTU3M0M0LjI0MTEzIDEwLjQ3ODIgNS4xMzk0NyAxMC40NzgyIDUuODQ1MyAxMC4xNTczQzYuNTUxMTMgOS44MzY0OSA3LjQ0OTQ4IDkuODM2NDkgOC4xNTUyOSAxMC4xNTczQzguODYxMSAxMC40NzgyIDkuNzU5NSAxMC40NzgyIDEwLjQ2NTMgMTAuMTU3M0MxMS4xNzExIDkuODM2NDkgMTIuMDY5NSA5LjgzNjQ5IDEyLjc3NTMgMTAuMTU3MyIgc3Ryb2tlPSIjNDY0NjQ3IiBzdHJva2Utd2lkdGg9IjEuMDUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjkwXzM5MiI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K",
     night: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjI1IDcuNDYwODFDMTIuMTU4MyA4LjQ1Mzc2IDExLjc4NTYgOS40MDAwNyAxMS4xNzU2IDEwLjE4OUMxMC41NjU3IDEwLjk3NzkgOS43NDM3MiAxMS41NzY4IDguODA1ODYgMTEuOTE1NUM3Ljg2NzkzIDEyLjI1NDMgNi44NTI5OSAxMi4zMTg5IDUuODc5NzEgMTIuMTAxOUM0LjkwNjQ0IDExLjg4NDkgNC4wMTUwOCAxMS4zOTUyIDMuMzA5OTcgMTAuNjlDMi42MDQ4NSA5Ljk4NDg5IDIuMTE1MTQgOS4wOTM1NiAxLjg5ODEyIDguMTIwMjhDMS42ODExIDcuMTQ3IDEuNzQ1NzYgNi4xMzIwNSAyLjA4NDUyIDUuMTk0MThDMi40MjMyOSA0LjI1NjI5IDMuMDIyMTYgMy40MzQzIDMuODExMDUgMi44MjQzNUM0LjU5OTk0IDIuMjE0NDIgNS41NDYyMiAxLjg0MTc3IDYuNTM5MTcgMS43NUM1Ljk1Nzg0IDIuNTM2NDkgNS42NzgwOSAzLjUwNTUxIDUuNzUwODEgNC40ODA4MkM1LjgyMzU1IDUuNDU2MTQgNi4yNDM5MiA2LjM3Mjk2IDYuOTM1NDggNy4wNjQ1NEM3LjYyNzA2IDcuNzU2MDcgOC41NDM4NSA4LjE3NjQ5IDkuNTE5MTYgOC4yNDkyMkMxMC40OTQ1IDguMzIxOTUgMTEuNDYzNSA4LjA0MjE2IDEyLjI1IDcuNDYwODFaIiBzdHJva2U9IiM0NjQ2NDciIHN0cm9rZS13aWR0aD0iMC45OTc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjM3NSAyLjUwODUzQzExLjYzMjcgMi41MDg1MyAxMS44NDE3IDIuMjk5NiAxMS44NDE3IDIuMDQxODZDMTEuODQxNyAxLjc4NDEzIDExLjYzMjcgMS41NzUyIDExLjM3NSAxLjU3NTJDMTEuMTE3MiAxLjU3NTIgMTAuOTA4MyAxLjc4NDEzIDEwLjkwODMgMi4wNDE4NkMxMC45MDgzIDIuMjk5NiAxMS4xMTcyIDIuNTA4NTMgMTEuMzc1IDIuNTA4NTNaIiBmaWxsPSIjNDY0NjQ3Ii8+CjxwYXRoIGQ9Ik0xMi41NDE3IDQuMTQxODlDMTIuNzM1IDQuMTQxODkgMTIuODkxNyAzLjk4NTIgMTIuODkxNyAzLjc5MTg5QzEyLjg5MTcgMy41OTg1OSAxMi43MzUgMy40NDE4OSAxMi41NDE3IDMuNDQxODlDMTIuMzQ4NCAzLjQ0MTg5IDEyLjE5MTcgMy41OTg1OSAxMi4xOTE3IDMuNzkxODlDMTIuMTkxNyAzLjk4NTIgMTIuMzQ4NCA0LjE0MTg5IDEyLjU0MTcgNC4xNDE4OVoiIGZpbGw9IiM0NjQ2NDciLz4KPC9zdmc+Cg==",
   },
+  sortIcons: {
+    // Rápido (duration sort) — the only sort chip with no existing category
+    // or time-of-day icon to reuse. Sourced from src/assets/images/filter/rapido.svg.
+    duration:
+      "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMyAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjY0NzEgMS40MTUyOEM5LjkyMDg0IDEuNDE1MzIgMTIuMDgyMSAzLjU3NjUzIDEyLjA4MjEgNi4yMzI2N0MxMi4wODIxIDguODg4NzggOS45MjA4MiAxMS4wNSA3LjI2NDcxIDExLjA1QzQuNjA4NTcgMTEuMDUgMi40NDczNSA4Ljg4ODggMi40NDczMyA2LjIzMjY3QzIuNDQ3MzMgMy41NzY1MSA0LjYwODU1IDEuNDE1MjggNy4yNjQ3MSAxLjQxNTI4Wk03LjI2NDcxIDEuOTg5NUM0LjkyMzYyIDEuOTg5NSAzLjAyMTU1IDMuODkxNTggMy4wMjE1NSA2LjIzMjY3QzMuMDIxNTcgOC41NzM3MyA0LjkyMzY0IDEwLjQ3NTggNy4yNjQ3MSAxMC40NzU4QzkuNjA1NzUgMTAuNDc1OCAxMS41MDc4IDguNTczNzEgMTEuNTA3OSA2LjIzMjY3QzExLjUwNzkgMy44OTE2IDkuNjA1NzcgMS45ODk1MyA3LjI2NDcxIDEuOTg5NVoiIGZpbGw9IiM0NjQ2NDciIHN0cm9rZT0iIzQ2NDY0NyIgc3Ryb2tlLXdpZHRoPSIwLjEiLz4KPHBhdGggZD0iTTcuMjY0MjUgMi41MTEyM0M5LjMxNzc5IDIuNTExMzQgMTAuOTg1OSA0LjE3OTM1IDEwLjk4NTkgNi4yMzI5MUMxMC45ODU4IDguMjg2MzggOS4zMTc3MiA5Ljk1NDQ4IDcuMjY0MjUgOS45NTQ1OUM1LjIxNDQ5IDkuOTU0NTkgMy41NDI2OCA4LjI4NjQ4IDMuNTQyNTcgNi4yMzI5MUMzLjU0MjU3IDQuMTc5MjggNS4yMTA2MyAyLjUxMTIzIDcuMjY0MjUgMi41MTEyM1pNNy4yNjQyNSAzLjA4NTQ1QzUuNTI5NDYgMy4wODU0NSA0LjExNjc5IDQuNDk4MTIgNC4xMTY3OSA2LjIzMjkxQzQuMTE2OSA3Ljk2NzYxIDUuNTI5NTMgOS4zODAzNyA3LjI2NDI1IDkuMzgwMzdDOC45OTg4OCA5LjM4MDI2IDEwLjQxMTYgNy45Njc1NCAxMC40MTE3IDYuMjMyOTFDMTAuNDExNyA0LjQ5ODE5IDguOTk4OTUgMy4wODU1NiA3LjI2NDI1IDMuMDg1NDVaIiBmaWxsPSIjNDY0NjQ3IiBzdHJva2U9IiM0NjQ2NDciIHN0cm9rZS13aWR0aD0iMC4xIi8+CjxwYXRoIGQ9Ik03LjI2NDQzIDUuNTY1OTJDNi44OTUzOCA1LjU2NTkyIDYuNTk3OSA1Ljg2MzQxIDYuNTk3OSA2LjIzMjQ2QzYuNTk3OSA2LjYwMTUxIDYuODk1MzggNi44OTkwMSA3LjI2NDQzIDYuODk5MDFDNy42MzM0OSA2Ljg5OTAxIDcuOTMwOTkgNi42MDE1MSA3LjkzMDk5IDYuMjMyNDZDNy45MzA5OSA1Ljg2MzQxIDcuNjMzNDkgNS41NjU5MiA3LjI2NDQzIDUuNTY1OTJaIiBmaWxsPSIjNDY0NjQ3Ii8+CjxwYXRoIGQ9Ik02LjUzMzkxIDEuMTI1OThMNi43NTIzMyAxLjI3Mjg0QzYuNzE0NjcgMS4xODI0NiA2LjYzMTgyIDEuMTI1OTggNi41MzM5MSAxLjEyNTk4WiIgZmlsbD0iIzQ2NDY0NyIvPgo8cGF0aCBkPSJNNy45OTQ0OSAxLjEyNTk4SDcuMjI2MjdMNi44Nzk4MiAxLjM1OTQ2SDYuNTMzMzRINi4yOTk4N1YxLjc1MTFDNi4yOTk4NyAxLjg3OTE0IDYuNDA1MzEgMS45ODQ1OCA2LjUzMzM0IDEuOTg0NThDNi41NjcyNCAxLjk4NDU4IDYuNTk3MzYgMS45NzcwNSA2LjYyNzQ5IDEuOTY1NzVDNi42Njg5MSAxLjk1ODIyIDYuODIzMzMgMS45NDMxNiA3LjI3ODk5IDEuOTQzMTZDNy43MDgzIDEuOTQzMTYgNy44NTUxNSAxLjk1ODIyIDcuODk2NTcgMS45NjU3NUM4LjAxMzMxIDIuMDE4NDcgOC4xNTI2NSAxLjk2NTc1IDguMjA5MTQgMS44NDkwMUM4LjIyNDIgMS44MTg4OSA4LjIzMTczIDEuNzg1IDguMjMxNzMgMS43NTExVjEuMzU5NDZDOC4yMzE3MyAxLjIzMTQyIDguMTI2MjkgMS4xMjU5OCA3Ljk5ODI1IDEuMTI1OThINy45OTQ0OVpNNi43NDQyMyAxLjg1Mjc4QzYuNzQ0MjMgMS44NTI3OCA2Ljc1OTMxIDEuODIyNjUgNi43NjMwOCAxLjgwMzgzQzYuNzU5MzEgMS44MTg4OSA2Ljc1MTc2IDEuODM3NzEgNi43NDQyMyAxLjg1Mjc4Wk02Ljc2MzA4IDEuODAzODNDNi43NjMwOCAxLjgwMzgzIDYuNzYzMDYgMS43ODg3NiA2Ljc2NjgyIDEuNzc3NDZDNi43NjY4MiAxLjc4NDk5IDYuNzY2ODQgMS43OTYyOSA2Ljc2MzA4IDEuODAzODNaTTcuNzY4NTQgMS44MDM4M0M3Ljc2ODU0IDEuODAzODMgNy43NzYwNyAxLjgzNzcxIDcuNzgzNiAxLjg1Mjc4QzcuNzc2MDcgMS44Mzc3MSA3Ljc3MjMxIDEuODIyNjUgNy43Njg1NCAxLjgwMzgzWk03Ljc2NDc4IDEuNzc3NDZDNy43NjQ3OCAxLjc3NzQ2IDcuNzY0NzggMS43OTI1MiA3Ljc2ODU0IDEuODAwMDZDNy43Njg1NCAxLjc5MjUyIDcuNzY4NTQgMS43ODQ5OSA3Ljc2NDc4IDEuNzc3NDZaIiBmaWxsPSIjNDY0NjQ3Ii8+CjxwYXRoIGQ9Ik03Ljk5NDM5IDEuNDY4NjdINi41MzMyNEM2LjEyNjU0IDEuNDY4NjcgNS43OTg5MSAxLjEzMzUxIDUuODAyNjcgMC43MzA1N0M1LjgwMjY3IDAuMzMxMzkzIDYuMTM0MDcgMC4wMDM3NjU4MiA2LjUzMzI0IDBINy45OTgxNUM4LjE5Mzk4IDAgOC4zNzg1IDAuMDc5MDgyOSA4LjUxNzg0IDAuMjE4NDE4QzguNjU3MTcgMC4zNTc3NTQgOC43Mjg3MiAwLjU0MjI4MSA4LjcyODcyIDAuNzM4MTAzQzguNzI4NzIgMS4xMzcyOCA4LjM5NzMzIDEuNDY0OTEgNy45OTgxNSAxLjQ2ODY3SDcuOTk0MzlaTTcuOTk0MzkgMC40NzQ0OTdINi41MzMyNEM2LjM5MzkxIDAuNDc0NDk3IDYuMjc3MTcgMC41OTEyMzUgNi4yNzcxNyAwLjczMDU3QzYuMjc3MTcgMC44NzM2NzEgNi4zOTAxNCAwLjk5MDQxMyA2LjUzMzI0IDAuOTkwNDEzSDcuOTkwNjJDOC4xMjk5NSAwLjk5MDQxMyA4LjI0NjY5IDAuODczNjc1IDguMjQ2NjkgMC43MzQzNEM4LjI0NjY5IDAuNjY2NTU1IDguMjIwMzUgMC41OTg3NjggOC4xNzEzOSAwLjU0OTgxMkM4LjEyMjQzIDAuNTAwODU3IDguMDU4NDIgMC40NzQ0OTMgNy45ODY4NyAwLjQ3MDcyOEw3Ljk5NDM5IDAuNDc0NDk3WiIgZmlsbD0iIzQ2NDY0NyIvPgo8cGF0aCBkPSJNMy42Mzc5NSAzLjcyNDQ5SDEuODY0MjZDMS43MzI0NiAzLjcyNDQ5IDEuNjI3MDEgMy42MTkwNSAxLjYyNzAxIDMuNDg3MjVDMS42MjcwMSAzLjM1NTQ0IDEuNzMyNDYgMy4yNSAxLjg2NDI2IDMuMjVIMy42Mzc5NUMzLjc2OTc1IDMuMjUgMy44NzUyIDMuMzU1NDQgMy44NzUyIDMuNDg3MjVDMy44NzUyIDMuNjE5MDUgMy43Njk3NSAzLjcyNDQ5IDMuNjM3OTUgMy43MjQ0OVoiIGZpbGw9IiM0NjQ2NDciLz4KPHBhdGggZD0iTTIuNjc3MzYgNi41NDg3SDEuNDUzNDdDMS4zMjE2NiA2LjU0ODcgMS4yMTYyMiA2LjQ0MzI2IDEuMjE2MjIgNi4zMTE0NkMxLjIxNjIyIDYuMTc5NjUgMS4zMjE2NiA2LjA3NDIyIDEuNDUzNDcgNi4wNzQyMkgyLjY3NzM2QzIuODA5MTYgNi4wNzQyMiAyLjkxNDYxIDYuMTc5NjUgMi45MTQ2MSA2LjMxMTQ2QzIuOTE0NjEgNi40NDMyNiAyLjgwOTE2IDYuNTQ4NyAyLjY3NzM2IDYuNTQ4N1oiIGZpbGw9IiM0NjQ2NDciLz4KPHBhdGggZD0iTTIuODYxNjUgNy45MzQ5M0gxLjIwODQ3QzEuMDc2NjcgNy45MzQ5MyAwLjk3MTIyMiA3LjgyOTUgMC45NzEyMjIgNy42OTc3QzAuOTcxMjIyIDcuNTY1ODkgMS4wNzY2NyA3LjQ2MDQ1IDEuMjA4NDcgNy40NjA0NUgyLjg2MTY1QzIuOTkzNDUgNy40NjA0NSAzLjA5ODkgNy41NjU4OSAzLjA5ODkgNy42OTc3QzMuMDk4OSA3LjgyOTUgMi45OTM0NSA3LjkzNDkzIDIuODYxNjUgNy45MzQ5M1oiIGZpbGw9IiM0NjQ2NDciLz4KPHBhdGggZD0iTTIuOTE0NzQgNS4xMzYzNkgwLjIzNzI0OUMwLjEwNTQ0NSA1LjEzNjM2IDAgNS4wMzA5MSAwIDQuODk5MTFDMCA0Ljc2NzMgMC4xMDU0NDUgNC42NjE4NyAwLjIzNzI0OSA0LjY2MTg3SDIuOTE0NzRDMy4wNDY1NSA0LjY2MTg3IDMuMTUxOTkgNC43NjczIDMuMTUxOTkgNC44OTkxMUMzLjE1MTk5IDUuMDMwOTEgMy4wNDY1NSA1LjEzNjM2IDIuOTE0NzQgNS4xMzYzNloiIGZpbGw9IiM0NjQ2NDciLz4KPHBhdGggZD0iTTcuMDkxMjEgNi4yMTcyOUM3LjAzMDk2IDYuMjE3MjkgNi45NzA3MSA2LjE5NDY5IDYuOTI1NTIgNi4xNDk1TDUuOTc2NTIgNS4yMTU1OEM1Ljg4MjM4IDUuMTI1MiA1Ljg4MjM4IDQuOTc0NTcgNS45NzY1MiA0Ljg4MDQyQzYuMDY2OSA0Ljc4NjI4IDYuMjE3NTQgNC43ODYyOCA2LjMxMTY5IDQuODgwNDJMNy4yNjA2NiA1LjgxNDM1QzcuMzU0OCA1LjkwNDczIDcuMzU0OCA2LjA1NTM2IDcuMjYwNjYgNi4xNDk1QzcuMjE1NDcgNi4xOTg0NiA3LjE1MTQ3IDYuMjIxMDUgNy4wOTEyMSA2LjIyMTA1VjYuMjE3MjlaIiBmaWxsPSIjNDY0NjQ3Ii8+CjxwYXRoIGQ9Ik03LjUxMzA0IDYuMjgxMzNDNy40NTI3OSA2LjI4MTMzIDcuMzkyNTMgNi4yNTg3NCA3LjM0NzM0IDYuMjEzNTVDNy4yNTMyIDYuMTE5NCA3LjI1MzIgNS45NzI1MyA3LjM0NzM0IDUuODc4MzhMOC45NTkxIDQuMjU5MDlDOS4wNTMyNSA0LjE2NDk0IDkuMjAwMTIgNC4xNjQ5NCA5LjI5NDI3IDQuMjU5MDlDOS4zODg0MSA0LjM1MzIzIDkuMzg4NDEgNC41MDAxIDkuMjk0MjcgNC41OTQyNEw3LjY4MjQ4IDYuMjEzNTVDNy42MzcyOSA2LjI1ODc0IDcuNTc3MDYgNi4yODUxIDcuNTEzMDQgNi4yODUxVjYuMjgxMzNaIiBmaWxsPSIjNDY0NjQ3Ii8+Cjwvc3ZnPgo=",
+  },
 };

package/src/components/FilterSortBar/icons.tsx

@@ -40,7 +40,7 @@ export const ChevronDownIcon = ({
       width={size}
       height={size * 0.6}
       alt=""
-      style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s ease", flexShrink: 0 }}
+      className={`flex-shrink-0 transition-transform duration-200 ease-in-out ${open ? "rotate-180" : "rotate-0"}`}
     />
   ) : (
     <svg
@@ -49,12 +49,48 @@ export const ChevronDownIcon = ({
       viewBox="0 0 10 6"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s ease", flexShrink: 0 }}
+      className={`flex-shrink-0 transition-transform duration-200 ease-in-out ${open ? "rotate-180" : "rotate-0"}`}
     >
       <path d="M1 1L5 5L9 1" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 
+export const SortArrowIcon = ({
+  size = 9,
+  color = "#464647",
+  direction = "desc",
+  src,
+  /** True once the chip is highlighted (colored background) — flips the raster arrow to white via CSS filter, since unlike the SVG fallback it can't take `color` directly. */
+  active,
+}: {
+  size?: number;
+  color?: string;
+  direction?: "asc" | "desc";
+  src?: string;
+  active?: boolean;
+}) =>
+  src ? (
+    // arrow-down.png is taller than wide (48x67) — keep its aspect ratio
+    // instead of forcing a square box, which would squash it.
+    <img
+      src={src}
+      width={size}
+      height={Math.round(size * 1.4)}
+      alt=""
+      className={`flex-shrink-0 ${direction === "asc" ? "rotate-180" : "rotate-0"} ${active ? "brightness-0 invert" : ""}`}
+    />
+  ) : (
+    <svg width={size} height={size} viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
+      <path
+        d={direction === "asc" ? "M2 6.2L5 3.2L8 6.2" : "M2 3.8L5 6.8L8 3.8"}
+        stroke={color}
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+
 export const SearchIcon = ({
   size = 16,
   color = "#9B9B9B",

package/src/components/FilterSortBar/index.ts

@@ -12,4 +12,6 @@ export type {
   FilterSortBarIcons,
   FilterSortBarMobileProps,
   TimeOfDayVariant,
+  SortDirection,
+  SortOption,
 } from "./types";

package/src/components/FilterSortBar/types.ts

@@ -16,6 +16,10 @@ export interface FilterOptionItem {
   selected: boolean;
   stars?: number;
   icon?: TimeOfDayVariant;
+  /** Excludes this option from the category's inline top-bar chips (still shown/selectable inside the Filtros sheet) — for an option whose concept already has its own standalone chip elsewhere, e.g. an inline time bucket duplicating a "Después de las 6 PM" sort chip. */
+  excludeFromInline?: boolean;
+  /** True when `selected` is only a display mirror of an active sort chip (e.g. a cohort sort chip's matching checkbox), not a real filter selection. Renders checked like any selected option, but is excluded from active-filter counts — the sort chip itself already accounts for that selection, so counting both would double it. */
+  checkedViaSort?: boolean;
 }
 
 export interface PriceRangeValue {
@@ -34,6 +38,8 @@ export interface FilterCategory {
   options?: FilterOptionItem[];
   priceRange?: PriceRangeValue;
   inlineOptions?: boolean;
+  /** When true, this category gets no standalone top-bar chip — it's still a tab inside the Filtros master sheet, just reachable only via the "Filtros" button. */
+  hideChip?: boolean;
 }
 
 export const DEFAULT_CATEGORY_LABELS: Record<FilterCategoryKey, string> = {
@@ -45,6 +51,29 @@ export const DEFAULT_CATEGORY_LABELS: Record<FilterCategoryKey, string> = {
   seatType: "Tipo de asiento",
 };
 
+export type SortDirection = "asc" | "desc";
+
+export interface SortOption {
+  key: string;
+  label: string;
+  /**
+   * Present only on directional (base) sorts — e.g. Horario, Precio, Rápido.
+   * These are mutually exclusive: activating one deactivates the others, and
+   * tapping the already-active one flips its direction instead. Always
+   * renders a directional arrow.
+   */
+  direction?: SortDirection;
+  /** Whether this sort is currently applied. */
+  active: boolean;
+  /**
+   * Result count for this cohort (e.g. buses departing after 6 PM), shown as
+   * a small badge. Only meaningful on non-directional (cohort) sorts, which
+   * toggle on/off independently and combine with whichever directional sort
+   * is active — e.g. "Horario" desc + "Después de las 6 PM" together.
+   */
+  count?: number;
+}
+
 export interface FilterSortBarColors {
   primaryColor?: string;
   primaryTextColor?: string;
@@ -59,6 +88,8 @@ export interface FilterSortBarColors {
 export interface FilterSortBarIcons {
   closeIcon?: string;
   chevronDownIcon?: string;
+  /** Directional arrow shown on active base sort chips (Horario/Empresas/Precio/Rápido). Drawn pointing down; rotated 180° for ascending. */
+  sortArrowIcon?: string;
   searchIcon?: string;
   filterIcon?: string;
   starFilledIcon?: string;
@@ -67,12 +98,17 @@ export interface FilterSortBarIcons {
   categoryIcons?: Partial<Record<FilterCategoryKey, string>>;
   categoryIconsActive?: Partial<Record<FilterCategoryKey, string>>;
   timeOfDayIcons?: Partial<Record<TimeOfDayVariant, string>>;
+  /** Icons for sort chips whose key doesn't already map to a category/time-of-day icon (e.g. "duration" for a Rápido chip). Keyed by SortOption.key. */
+  sortIcons?: Partial<Record<string, string>>;
 }
 
 export interface FilterSortBarMobileProps {
   categories: FilterCategory[];
   onApply: (categoryKey: FilterCategoryKey | "all", updatedCategories: FilterCategory[]) => void;
   onClearFilter: (categoryKey: FilterCategoryKey | "all") => void;
+  /** Sort chips rendered before the filter category chips — see SortOption. */
+  sortOptions?: SortOption[];
+  onSortChange?: (updatedSortOptions: SortOption[]) => void;
   currencySign?: string;
   colors?: FilterSortBarColors;
   icons?: FilterSortBarIcons;

package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx

@@ -710,7 +710,10 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = (props) => {
                         style={{ color: "var(--secondary-color)" }}
                       >{`${creditosLabel}(${virtualLimit}%)`}</span>
                     }
-                    amount={CommonService.currency(virtualMoney, currencySign)}
+                    amount={CommonService.currency(
+                      ((virtualLimit ?? 0) / 100) * Number(virtualMoney ?? 0),
+                      currencySign
+                    )}
                     customStyle={{ color: "var(--secondary-color)" }}
                     className="text-[14px]"
                     currency=""

package/src/index.ts

@@ -90,6 +90,8 @@ export type {
   FilterSortBarIcons,
   FilterSortBarMobileProps,
   TimeOfDayVariant,
+  SortDirection,
+  SortOption,
 } from "./components/FilterSortBar";
 export { DEFAULT_CATEGORY_LABELS } from "./components/FilterSortBar";
 export type { SurveyProps } from "./components/Survey/types";

package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx

@@ -65,10 +65,14 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
     currency,
     insuranceData,
     isPeru,
+    walletMoney,
+    walletLabel,
+    virtualMoney,
+    virtualLimit,
+    creditosLabel,
     showDetails = false,
     setShowDetails,
   } = props;
-  console.log("🚀 ~ PaymentCardMobile ~ selectSeatOnward:", selectSeatOnward);
 
   // We use a Class component wrapper below to hold the state,
   // avoiding Invalid Hook Call issues when linked in external apps with multiple React instances.
@@ -669,34 +673,37 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                           {(modalIsReturn
                             ? selectedReturn[0]
                             : selectedOnward[0]
-                          ).map((val: any, idx: number) => (
-                            <span
-                              key={idx}
-                              style={{
-                                display: "inline-flex",
-                                alignItems: "center",
-                              }}
-                            >
-                              {val.number ||
-                                val.seat_number ||
-                                val.seatNumber ||
-                                val.name ||
-                                ""}
-                              {val.type && (
-                                <span
-                                  style={{
-                                    display: "inline-flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    fontSize: "12px",
-                                    marginLeft: "4px",
-                                  }}
-                                >
-                                  {val.type?.charAt(0)?.toUpperCase()}
-                                </span>
-                              )}
-                            </span>
-                          ))}
+                          ).map((val: any, idx: number) => {
+                            console.log("🚀 ~ PaymentCardMobile ~ val:", val);
+                            return (
+                              <span
+                                key={idx}
+                                style={{
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                }}
+                              >
+                                {val.number ||
+                                  val.seat_number ||
+                                  val.seatNumber ||
+                                  val.name ||
+                                  ""}
+                                {val.type && (
+                                  <span
+                                    style={{
+                                      display: "inline-flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      fontSize: "12px",
+                                      marginLeft: "4px",
+                                    }}
+                                  >
+                                    {val.type?.charAt(0)?.toUpperCase()}
+                                  </span>
+                                )}
+                              </span>
+                            );
+                          })}
                         </span>
                       </div>
                     )}
@@ -792,12 +799,14 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                   ) : null}
 
                   {/* Service fee */}
-                  {props.serviceFeeDataStateValue?.service_fee > 0 && (
+                  {props.serviceFeeDataStateValue
+                    ?.total_convenience_fee_amount && (
                     <div style={S.sectionRow}>
                       <span style={{ flex: 1 }}>Cargo por servicio</span>
                       <span style={S.sectionRowValue} className="bold-text">
                         {CommonService.currency(
-                          props.serviceFeeDataStateValue.service_fee,
+                          props.serviceFeeDataStateValue
+                            .total_convenience_fee_amount,
                           currencySign,
                         )}
                       </span>
@@ -899,6 +908,67 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                     </div>
                   ) : null}
 
+                  {/* Cupon */}
+                  {removeDiscountAtomValue && (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>Cupón</span>
+                      <span
+                        style={{
+                          ...S.sectionRowValue,
+                          color: "var(--secondary-color)",
+                        }}
+                        className="bold-text"
+                      >
+                        {`- ${CommonService.currency((netFare ?? 0) - (discountAmount ?? 0), currencySign)}`}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Wallet */}
+                  {walletMoney ? (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>{walletLabel}</span>
+                      <span
+                        style={{
+                          ...S.sectionRowValue,
+                          color: "var(--secondary-color)",
+                        }}
+                        className="bold-text"
+                      >
+                        {isPeru
+                          ? CommonService.currencyFixed(
+                              walletMoney,
+                              currencySign,
+                            )
+                          : CommonService.currency(walletMoney, currencySign)}
+                      </span>
+                    </div>
+                  ) : null}
+
+                  {/* Virtual credits */}
+                  {virtualMoney ? (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>
+                        <span
+                          style={{ color: "var(--secondary-color)" }}
+                        >{`${creditosLabel}(${virtualLimit}%)`}</span>
+                      </span>
+                      <span
+                        style={{
+                          ...S.sectionRowValue,
+                          color: "var(--secondary-color)",
+                        }}
+                        className="bold-text"
+                      >
+                        {CommonService.currency(
+                          ((virtualLimit ?? 0) / 100) *
+                            Number(virtualMoney ?? 0),
+                          currencySign,
+                        )}
+                      </span>
+                    </div>
+                  ) : null}
+
                   {/* Dashed separator */}
                   <div
                     style={{

package/src/components/FilterSortBar/SingleFilterSheet.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-import { BottomSheet } from "../../ui/BottomSheet";
-import { CloseIcon } from "./icons";
-import OptionCheckboxList from "./OptionCheckboxList";
-import PriceRangeSlider from "./PriceRangeSlider";
-import SheetFooter from "./SheetFooter";
-import { FilterCategory, FilterSortBarColors, FilterSortBarIcons } from "./types";
-
-interface SingleFilterSheetProps {
-  category: FilterCategory | null;
-  onClose: () => void;
-  onToggleOption: (optionId: string) => void;
-  onPriceRangeChange: (currentMin: number, currentMax: number) => void;
-  onClear: () => void;
-  onApply: () => void;
-  currencySign: string;
-  colors: Required<FilterSortBarColors>;
-  icons?: FilterSortBarIcons;
-}
-
-const SingleFilterSheet = ({
-  category,
-  onClose,
-  onToggleOption,
-  onPriceRangeChange,
-  onClear,
-  onApply,
-  currencySign,
-  colors,
-  icons,
-}: SingleFilterSheetProps) => {
-  return (
-    <BottomSheet isOpen={!!category} onClose={onClose} showBackdrop maxHeight="75vh">
-      {category && (
-        <div>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginBottom: 16,
-            }}
-          >
-            <span style={{ fontSize: 16, fontWeight: 700, color: "#464647" }}>
-              {category.sheetTitle || category.sectionLabel || category.label}
-            </span>
-            <div
-              onClick={onClose}
-              style={{ cursor: "pointer", padding: 4, WebkitTapHighlightColor: "transparent" }}
-            >
-              <CloseIcon size={14} src={icons?.closeIcon} />
-            </div>
-          </div>
-
-          <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
-            {category.kind === "price" && category.priceRange ? (
-              <PriceRangeSlider
-                value={category.priceRange}
-                onChange={onPriceRangeChange}
-                currencySign={currencySign}
-                primaryColor={colors.primaryColor}
-              />
-            ) : (
-              <OptionCheckboxList
-                options={category.options || []}
-                kind={category.kind}
-                onToggle={onToggleOption}
-                primaryColor={colors.primaryColor}
-                starColor={colors.buttonColor || colors.primaryColor}
-                icons={icons}
-              />
-            )}
-          </div>
-
-          <SheetFooter onClear={onClear} onApply={onApply} colors={colors} />
-        </div>
-      )}
-    </BottomSheet>
-  );
-};
-
-export default SingleFilterSheet;