kupos-ui-components-lib 10.4.11 → 10.4.13

package/dist/styles.css

@@ -363,6 +363,9 @@
 .inline-block {
   display: inline-block;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .h-\[1px\] {
   height: 1px;
 }
@@ -450,6 +453,9 @@
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[22px\] {
+  width: 22px;
+}
 .w-\[26px\] {
   width: 26px;
 }
@@ -539,6 +545,9 @@
 .flex-1 {
   flex: 1;
 }
+.flex-shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -615,6 +624,9 @@
 .flex-row {
   flex-direction: row;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .content-center {
   align-content: center;
 }
@@ -1116,6 +1128,10 @@
   --tw-leading: 1.4;
   line-height: 1.4;
 }
+.leading-\[1\.5\] {
+  --tw-leading: 1.5;
+  line-height: 1.5;
+}
 .leading-\[1\.25\] {
   --tw-leading: 1.25;
   line-height: 1.25;
@@ -1262,6 +1278,9 @@
 .filter {
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
+.backdrop-filter {
+  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+}
 .transition {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
   transition-timing-function: var(--tw-ease, ease);
@@ -1588,6 +1607,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1640,6 +1695,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;

package/dist/ui/BottomSheet/BottomSheet.d.ts

@@ -11,7 +11,8 @@ export interface BottomSheetProps {
     closeOnBackdrop?: boolean;
     padding?: string | number;
     maxHeight?: string;
+    height?: string;
     borderRadius?: string;
 }
-declare const BottomSheet: ({ isOpen, onClose, children, showHandle, showBackdrop, backdropColor, blurBackground, blurAmount, closeOnBackdrop, padding, maxHeight, borderRadius, }: BottomSheetProps) => React.JSX.Element;
+declare const BottomSheet: ({ isOpen, onClose, children, showHandle, showBackdrop, backdropColor, blurBackground, blurAmount, closeOnBackdrop, padding, maxHeight, height, borderRadius, }: BottomSheetProps) => React.JSX.Element;
 export default BottomSheet;

package/dist/ui/BottomSheet/BottomSheet.js

@@ -26,7 +26,7 @@ const injectStyle = () => {
   `;
     document.head.appendChild(style);
 };
-const BottomSheet = ({ isOpen, onClose, children, showHandle = true, showBackdrop = false, backdropColor = "rgba(0,0,0,0.45)", blurBackground = false, blurAmount = "6px", closeOnBackdrop = true, padding = "20px 20px 32px", maxHeight = "92vh", borderRadius = "24px 24px 0 0", }) => {
+const BottomSheet = ({ isOpen, onClose, children, showHandle = true, showBackdrop = false, backdropColor = "rgba(0,0,0,0.45)", blurBackground = false, blurAmount = "6px", closeOnBackdrop = true, padding = "20px 20px 0px", maxHeight = "92vh", height, borderRadius = "24px 24px 0 0", }) => {
     if (!isOpen)
         return null;
     injectStyle();
@@ -52,6 +52,7 @@ const BottomSheet = ({ isOpen, onClose, children, showHandle = true, showBackdro
                 zIndex: 9999,
                 background: "#FFFFFF",
                 maxHeight,
+                height,
                 borderRadius,
                 overflowY: "auto",
                 boxSizing: "border-box",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.11",
+  "version": "10.4.13",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/patch.py

@@ -0,0 +1,35 @@
+import sys
+
+with open('src/components/PaymentSideBar/PaymentSideBarMobile.tsx', 'r') as f:
+    lines = f.readlines()
+
+new_lines = []
+skip = False
+for i, line in enumerate(lines):
+    if line.startswith('const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({'):
+        new_lines.append('import { PaymentCardMobile } from "../../ui/PaymentCardMobile";\n\n')
+        new_lines.append('const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = (props) => {\n')
+        new_lines.append('  const {\n')
+        continue
+    if '}) => {' in line and 'isNewUi = false' in lines[i-3]:
+        new_lines.append('  } = props;\n')
+        continue
+    
+    # Skip the block 250-671 (0-indexed 249 to 670)
+    # The block starts at "// Derive active journey data"
+    if '// Derive active journey data' in line:
+        skip = True
+        new_lines.append('  return (\n')
+        new_lines.append('    <>\n')
+        new_lines.append('      {isNewUi ? (\n')
+        new_lines.append('        <PaymentCardMobile {...props} />\n')
+        new_lines.append('      ) : (\n')
+        continue
+    if skip:
+        # The old UI block starts at: "      ) : (" (wait, we are skipping up to the `) : (` )
+        if line.strip() == ') : (':
+            skip = False
+            continue
+        # Also need to handle the fact that old code has `<>` and `return (` before it
+        # Actually, let's just do a string replacement.
+        pass

package/src/assets/images/filter/bus.svg

@@ -0,0 +1,19 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_401)">
+<path d="M11.8062 12.4287H2.15209C2.04362 12.4287 1.93948 12.3731 1.88742 12.2856L1.04567 10.8577C1.01963 10.818 1.01096 10.7702 1.01096 10.7265V0.942593C1.01096 0.421582 1.47088 0 2.03928 0H11.8626C12.431 0 12.891 0.421582 12.891 0.942593V10.7265C12.891 10.7702 12.8779 10.814 12.8605 10.8498L12.0795 12.2775C12.0275 12.369 11.9233 12.4287 11.8105 12.4287H11.8062ZM2.33 11.8759H11.6196L12.2878 10.6589V0.942593C12.2878 0.727825 12.0969 0.552829 11.8626 0.552829H2.03928C1.80498 0.552829 1.61406 0.727825 1.61406 0.942593V10.6549L2.33432 11.8759H2.33Z" fill="#464647"/>
+<path d="M12.5351 2.82816H1.36237C1.19749 2.82816 1.06299 2.70486 1.06299 2.55373C1.06299 2.40259 1.19749 2.2793 1.36237 2.2793H12.5351C12.7 2.2793 12.8344 2.40259 12.8344 2.55373C12.8344 2.70486 12.7 2.82816 12.5351 2.82816Z" fill="#464647"/>
+<path d="M12.5349 11.0205H1.36222C1.19734 11.0205 1.06284 10.8972 1.06284 10.7461C1.06284 10.595 1.19734 10.4717 1.36222 10.4717H12.5349C12.6998 10.4717 12.8343 10.595 12.8343 10.7461C12.8343 10.8972 12.6998 11.0205 12.5349 11.0205Z" fill="#464647"/>
+<path d="M12.279 7.93069H1.52287C1.35799 7.93069 1.22348 7.8074 1.22348 7.65626C1.22348 7.50513 1.35799 7.38184 1.52287 7.38184H12.279C12.4439 7.38184 12.5784 7.50513 12.5784 7.65626C12.5784 7.8074 12.4439 7.93069 12.279 7.93069Z" fill="#464647"/>
+<path d="M12.5698 9.79946H10.0228C9.74076 9.79946 9.5108 9.58868 9.5108 9.33015C9.5108 9.07163 9.74076 8.86084 10.0228 8.86084H12.5698" fill="#464647"/>
+<path d="M1.35352 9.79946H3.90046C4.18248 9.79946 4.41244 9.58868 4.41244 9.33015C4.41244 9.07163 4.18248 8.86084 3.90046 8.86084H1.35352" fill="#464647"/>
+<path d="M4.72922 12.2979V13.2922C4.72922 13.682 4.3821 14.0001 3.95689 14.0001H3.28002C2.8548 14.0001 2.50769 13.682 2.50769 13.2922V12.2979" fill="#464647"/>
+<path d="M11.5588 12.2979V13.2922C11.5588 13.682 11.2117 14.0001 10.7865 14.0001H10.1096C9.68439 14.0001 9.33728 13.682 9.33728 13.2922V12.2979" fill="#464647"/>
+<path d="M1.05002 2.97852H0.238641C0.106844 2.97852 0 3.07646 0 3.19727V6.04494C0 6.16574 0.106844 6.26367 0.238641 6.26367H1.05002C1.18182 6.26367 1.28866 6.16574 1.28866 6.04494V3.19727C1.28866 3.07646 1.18182 2.97852 1.05002 2.97852Z" fill="#464647"/>
+<path d="M13.6631 2.97852H12.8518C12.7199 2.97852 12.6131 3.07646 12.6131 3.19727V6.04494C12.6131 6.16574 12.7199 6.26367 12.8518 6.26367H13.6631C13.795 6.26367 13.9018 6.16574 13.9018 6.04494V3.19727C13.9018 3.07646 13.795 2.97852 13.6631 2.97852Z" fill="#464647"/>
+</g>
+<defs>
+<clipPath id="clip0_290_401">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/clock.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 12.25C9.8995 12.25 12.25 9.8995 12.25 7C12.25 4.10051 9.8995 1.75 7 1.75C4.10051 1.75 1.75 4.10051 1.75 7C1.75 9.8995 4.10051 12.25 7 12.25Z" stroke="#464647" stroke-width="0.975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 4.0835V7.00016L8.75 8.75016" stroke="#464647" stroke-width="0.975" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/filter/filter.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3958 7.00026H5.18871M5.18871 7.00026C5.18871 6.66299 5.05415 6.33954 4.81566 6.10105C4.57718 5.86257 4.25373 5.72859 3.91646 5.72859C3.57919 5.72859 3.25574 5.86257 3.01726 6.10105C2.77877 6.33954 2.64479 6.66299 2.64479 7.00026M5.18871 7.00026C5.18871 7.33752 5.05415 7.66098 4.81566 7.89946C4.57718 8.13794 4.25373 8.27192 3.91646 8.27192C3.57919 8.27192 3.25574 8.13794 3.01726 7.89946C2.77877 7.66098 2.64479 7.33752 2.64479 7.00026M2.64479 7.00026H1.60413M12.3958 10.8543H9.04279M9.04279 10.8543C9.04279 11.1916 8.90849 11.5155 8.66995 11.754C8.43142 11.9925 8.10789 12.1266 7.77054 12.1266C7.43328 12.1266 7.10982 11.992 6.87134 11.7535C6.63286 11.515 6.49888 11.1916 6.49888 10.8543M9.04279 10.8543C9.04279 10.517 8.90849 10.1937 8.66995 9.95522C8.43142 9.71668 8.10789 9.58267 7.77054 9.58267C7.43328 9.58267 7.10982 9.71665 6.87134 9.95514C6.63286 10.1936 6.49888 10.517 6.49888 10.8543M6.49888 10.8543H1.60413M12.3958 3.14617H10.5845M10.5845 3.14617C10.5845 2.97918 10.5511 2.81381 10.4872 2.65953C10.4233 2.50524 10.3296 2.36506 10.2115 2.24697C10.0934 2.12888 9.95322 2.03521 9.79894 1.97131C9.64465 1.9074 9.47929 1.87451 9.31229 1.87451C8.97503 1.87451 8.65157 2.00849 8.41309 2.24697C8.17461 2.48545 8.04063 2.80891 8.04063 3.14617M10.5845 3.14617C10.5845 3.31317 10.5511 3.47853 10.4872 3.63282C10.4233 3.78711 10.3296 3.92729 10.2115 4.04538C10.0934 4.16346 9.95322 4.25713 9.79894 4.32104C9.64465 4.38495 9.47929 4.41784 9.31229 4.41784C8.97503 4.41784 8.65157 4.28386 8.41309 4.04538C8.17461 3.80689 8.04063 3.48344 8.04063 3.14617M8.04063 3.14617H1.60413" stroke="#464647" stroke-width="0.875" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>

package/src/assets/images/filter/money.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_416)">
+<path d="M11.067 7.11523C10.961 7.11523 10.8757 7.20127 10.8757 7.30808C10.8757 7.44157 10.7668 7.55135 10.6344 7.55135C10.502 7.55135 10.3931 7.44157 10.3931 7.30808C10.3931 7.20127 10.3077 7.11523 10.2018 7.11523C10.0958 7.11523 10.0105 7.20127 10.0105 7.30808C10.0105 7.65518 10.2901 7.93702 10.6344 7.93702C10.9787 7.93702 11.2583 7.65518 11.2583 7.30808C11.2583 7.20127 11.1729 7.11523 11.067 7.11523Z" fill="#464647" stroke="#464647" stroke-width="0.503153"/>
+<path d="M12.8529 7.14788L12.3173 6.97581C12.2496 6.95504 12.1937 6.89868 12.1731 6.82747C12.0613 6.46553 11.8906 6.12436 11.6669 5.81582C11.5639 5.67638 11.4521 5.53991 11.3285 5.41234C11.408 5.06226 11.4492 4.66769 11.4462 4.32355C11.4374 3.83404 11.3403 3.54627 11.149 3.44539C11.046 3.392 10.7311 3.22586 9.03308 4.00908C8.99188 4.02688 8.95656 4.05061 8.92125 4.07731C8.80648 4.04764 8.68876 4.01797 8.57105 3.99128C8.55633 3.98831 8.54162 3.98534 8.5269 3.98238C8.66522 3.67976 8.74468 3.35046 8.75939 3.00928C8.76528 2.90248 8.68288 2.81349 8.57693 2.80755C8.47099 2.80162 8.3827 2.88468 8.37682 2.99149C8.35328 3.54923 8.12079 4.07731 7.72939 4.47188C7.49396 4.70923 7.22027 4.8813 6.92599 4.9881C6.41687 4.91689 5.90187 4.91689 5.39276 4.9881C5.09847 4.8813 4.82479 4.70923 4.58936 4.47188C4.17147 4.05061 3.93899 3.48693 3.93899 2.89062C3.93899 2.2943 4.16853 1.73063 4.58936 1.30935C5.00725 0.888076 5.56639 0.653704 6.1579 0.653704C6.74942 0.653704 7.30856 0.885109 7.72645 1.30935C7.89419 1.47846 8.03545 1.67426 8.14139 1.8849C8.18848 1.97983 8.30325 2.0184 8.39742 1.97094C8.49159 1.92346 8.52985 1.80776 8.48276 1.71283C8.35916 1.46362 8.19436 1.23815 7.99719 1.03938C7.50573 0.543935 6.85242 0.270996 6.1579 0.270996C5.46339 0.270996 4.81007 0.543935 4.31862 1.03938C3.82716 1.53482 3.55642 2.19344 3.55642 2.89359C3.55642 3.59373 3.82716 4.25234 4.31862 4.74779C4.45987 4.89019 4.6129 5.01479 4.7777 5.11567C4.65999 5.14534 4.54227 5.18093 4.42456 5.21951C4.3245 5.25214 4.27153 5.36191 4.3039 5.46277C4.33627 5.56365 4.44516 5.61704 4.54522 5.58441C5.58405 5.23434 6.72882 5.23434 7.76765 5.58441C7.78825 5.59034 7.80885 5.59331 7.82945 5.59331C7.9089 5.59331 7.98248 5.54287 8.00896 5.46277C8.04133 5.36191 7.98836 5.25214 7.8883 5.21951C7.77353 5.18093 7.65582 5.14534 7.53516 5.11567C7.69702 5.01183 7.85299 4.89019 7.99425 4.74779C8.12079 4.62022 8.22968 4.48375 8.32679 4.33838C8.37976 4.34728 8.43273 4.35915 8.48276 4.37102C8.55045 4.38585 8.61813 4.40069 8.68582 4.41848C8.68582 4.42739 8.68288 4.43628 8.67993 4.44222C8.58576 4.88723 8.59165 5.27883 8.69759 5.61111C8.79176 5.90779 8.96245 6.14809 9.20376 6.32609C9.48922 6.53673 9.83059 6.62573 10.1425 6.62573C10.375 6.62573 10.5928 6.5753 10.7488 6.48333C10.9283 6.38246 11.0784 6.16588 11.1961 5.84252C11.252 5.90779 11.302 5.97305 11.352 6.04128C11.5522 6.31719 11.7022 6.6198 11.8023 6.9402C11.8612 7.13008 12.0083 7.27841 12.1937 7.33775L12.7293 7.50982C12.8706 7.55432 12.9647 7.68485 12.9647 7.83319V8.72914C12.9647 8.87748 12.8706 9.00801 12.7293 9.05252L11.867 9.33139C11.7287 9.37589 11.611 9.47083 11.5374 9.60137C11.199 10.1917 10.6634 10.6812 9.95125 11.055C9.86885 11.0996 9.81293 11.1767 9.79528 11.2657L9.51865 12.7431C9.50982 12.7847 9.4745 12.8143 9.4333 12.8143H8.53279C8.49159 12.8143 8.45628 12.7847 8.44745 12.7431L8.29442 11.9273C8.26499 11.7671 8.1149 11.6602 7.95305 11.684C7.56459 11.7434 7.1673 11.773 6.76708 11.773C6.46985 11.773 6.17556 11.7552 5.89305 11.7226C5.73707 11.7047 5.59287 11.8116 5.56345 11.9659L5.41925 12.7402C5.41042 12.7816 5.3751 12.8114 5.3339 12.8114H4.43339C4.39219 12.8114 4.35687 12.7816 4.34805 12.7402L4.08025 11.3458C4.06259 11.2568 4.00667 11.1796 3.92722 11.1351C2.71182 10.4825 2.07027 9.38776 2.07027 7.9756C2.07027 7.26061 2.22624 6.63166 2.52936 6.09765C2.81482 5.60221 3.22976 5.1928 3.7683 4.87833C3.85953 4.82493 3.8919 4.70923 3.83893 4.61726C3.78596 4.52529 3.67119 4.49562 3.57996 4.54605C2.54113 5.15127 1.9143 6.08876 1.74067 7.27545C1.72302 7.27545 1.70536 7.27248 1.68476 7.26952C1.6877 7.14194 1.66416 7.01141 1.61413 6.88681C1.5023 6.6109 1.2757 6.40916 1.03439 6.37653C0.846044 6.34982 0.663587 6.4329 0.539987 6.59903C0.35753 6.8423 0.386958 7.03217 0.445816 7.15085C0.54293 7.34962 0.787187 7.49202 1.19624 7.58102C1.18447 7.59882 1.1727 7.61366 1.15799 7.63146C0.916673 7.93702 0.631216 8.00526 0.445816 8.01119C0.33693 8.01416 0.251587 8.10316 0.251587 8.21293H0.266301C0.266301 8.3227 0.351644 8.40874 0.457587 8.41467C0.472301 8.41467 0.487016 8.41467 0.50173 8.41467C0.737159 8.41467 1.1109 8.32864 1.47287 7.87176C1.52879 7.80056 1.57587 7.72343 1.61119 7.64629C1.6465 7.64926 1.68182 7.65518 1.71419 7.65816C1.7083 7.76199 1.70536 7.86879 1.70536 7.9756C1.70536 8.77661 1.8937 9.48862 2.26744 10.0938C2.61176 10.6516 3.10322 11.1114 3.73005 11.4555L3.98902 12.8114C4.03022 13.0339 4.22445 13.1941 4.4481 13.1941H5.34862C5.57227 13.1941 5.7665 13.0339 5.8077 12.8114L5.94013 12.1113C6.21382 12.1409 6.49633 12.1557 6.78179 12.1557C7.17319 12.1557 7.56753 12.129 7.9501 12.0726L8.08842 12.8114C8.12962 13.0339 8.32385 13.1941 8.5475 13.1941H9.44802C9.67168 13.1941 9.8659 13.0339 9.9071 12.8114L10.1778 11.3725C10.94 10.9661 11.511 10.435 11.8818 9.78827C11.9082 9.7408 11.9494 9.70816 11.9965 9.69334L12.8588 9.41446C13.159 9.31655 13.3591 9.04065 13.3591 8.72321V7.82725C13.3591 7.50982 13.159 7.23391 12.8588 7.13601L12.8529 7.14788ZM11.0342 4.86646C10.9606 5.49838 10.7635 6.03832 10.5663 6.15106C10.3426 6.27863 9.82176 6.30532 9.4333 6.01755C9.04485 5.72978 8.91242 5.21357 9.05956 4.52232C9.07428 4.45408 9.1243 4.39178 9.18905 4.36211C10.1425 3.92304 10.6928 3.77767 10.8959 3.77767C10.9253 3.77767 10.9489 3.78064 10.9636 3.78657C11.0254 3.85183 11.1048 4.22862 11.0313 4.86646H11.0342ZM0.801901 6.99657C0.781301 6.95504 0.828387 6.88384 0.857816 6.84527C0.904901 6.78297 0.949044 6.7711 0.981416 6.7711C0.987302 6.7711 0.99613 6.7711 1.00202 6.7711C1.0903 6.78297 1.21096 6.88088 1.27864 7.04404C1.29336 7.0826 1.31396 7.14491 1.31984 7.22502C1.05499 7.16864 0.85193 7.09151 0.807787 6.99954L0.801901 6.99657Z" fill="#464647" stroke="#464647" stroke-width="0.503153"/>
+<path d="M6.34922 2.67378V1.98549C6.58465 2.00329 6.67293 2.11009 6.75239 2.11009C6.85245 2.11009 6.89953 1.98252 6.89953 1.91726C6.89953 1.75112 6.57582 1.67992 6.34922 1.67398V1.58201C6.34922 1.54048 6.29919 1.50488 6.24916 1.50488C6.19325 1.50488 6.15205 1.54345 6.15205 1.58201V1.67992C5.83422 1.71255 5.51345 1.88166 5.51345 2.30886C5.51345 2.73608 5.84893 2.86364 6.15205 2.97341V3.7685C5.81068 3.74179 5.71945 3.50446 5.60762 3.50446C5.52228 3.50446 5.45459 3.61719 5.45459 3.69729C5.45459 3.86343 5.7371 4.08891 6.15205 4.0978V4.20164C6.15205 4.24318 6.19325 4.27877 6.24916 4.27877C6.29919 4.27877 6.34922 4.2402 6.34922 4.20164V4.08593C6.71119 4.0355 6.96133 3.80409 6.96133 3.38876C6.96133 2.92891 6.6435 2.78057 6.34922 2.6708V2.67378ZM6.17265 2.6085C5.99608 2.54027 5.84893 2.46906 5.84893 2.27623C5.84893 2.1012 5.9843 2.01516 6.17265 1.99143V2.6085ZM6.33156 3.76257V3.04758C6.49636 3.11878 6.62585 3.21371 6.62585 3.42732C6.62585 3.62015 6.51108 3.72992 6.33156 3.76257Z" fill="#464647" stroke="#464647" stroke-width="0.503153"/>
+</g>
+<defs>
+<clipPath id="clip0_290_416">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/night.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.25 7.46081C12.1583 8.45376 11.7856 9.40007 11.1756 10.189C10.5657 10.9779 9.74372 11.5768 8.80586 11.9155C7.86793 12.2543 6.85299 12.3189 5.87971 12.1019C4.90644 11.8849 4.01508 11.3952 3.30997 10.69C2.60485 9.98489 2.11514 9.09356 1.89812 8.12028C1.6811 7.147 1.74576 6.13205 2.08452 5.19418C2.42329 4.25629 3.02216 3.4343 3.81105 2.82435C4.59994 2.21442 5.54622 1.84177 6.53917 1.75C5.95784 2.53649 5.67809 3.50551 5.75081 4.48082C5.82355 5.45614 6.24392 6.37296 6.93548 7.06454C7.62706 7.75607 8.54385 8.17649 9.51916 8.24922C10.4945 8.32195 11.4635 8.04216 12.25 7.46081Z" stroke="#464647" stroke-width="0.9975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.375 2.50853C11.6327 2.50853 11.8417 2.2996 11.8417 2.04186C11.8417 1.78413 11.6327 1.5752 11.375 1.5752C11.1172 1.5752 10.9083 1.78413 10.9083 2.04186C10.9083 2.2996 11.1172 2.50853 11.375 2.50853Z" fill="#464647"/>
+<path d="M12.5417 4.14189C12.735 4.14189 12.8917 3.9852 12.8917 3.79189C12.8917 3.59859 12.735 3.44189 12.5417 3.44189C12.3484 3.44189 12.1917 3.59859 12.1917 3.79189C12.1917 3.9852 12.3484 4.14189 12.5417 4.14189Z" fill="#464647"/>
+</svg>

package/src/assets/images/filter/rise.svg

@@ -0,0 +1,20 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_420)">
+<mask id="mask0_290_420" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M14 0H0V14H14V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_290_420)">
+<mask id="mask1_290_420" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M14 0H0V14H14V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_290_420)">
+<path d="M2.33358 10.4998H1.1669M3.68348 7.18304L2.85852 6.35811M10.317 7.18304L11.142 6.35811M12.8336 10.4998H11.667M4.08358 10.4998C4.08358 8.88901 5.38941 7.58316 7.00022 7.58316C8.61106 7.58316 9.91696 8.88901 9.91696 10.4998M12.8336 12.8332H1.1669M9.33362 3.49984L7.00022 1.1665L4.6669 3.49984M7.00022 1.1665V5.24984" stroke="#464647" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_290_420">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/search.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.6875 10.0625C8.10375 10.0625 10.0625 8.10375 10.0625 5.6875C10.0625 3.27125 8.10375 1.3125 5.6875 1.3125C3.27125 1.3125 1.3125 3.27125 1.3125 5.6875C1.3125 8.10375 3.27125 10.0625 5.6875 10.0625Z" stroke="#464647"/>
+<path d="M8.75 8.75L11.375 11.375" stroke="#464647" stroke-linecap="round"/>
+</svg>

package/src/assets/images/filter/seat.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.50006 1.5H4.50005C3.67163 1.5 3.00006 2.17158 3.00006 3V6C3.00006 6.82843 3.67163 7.5 4.50005 7.5H9.50006C10.3285 7.5 11 6.82843 11 6V3C11 2.17158 10.3285 1.5 9.50006 1.5Z" stroke="#464647" stroke-width="1.02143"/>
+<path d="M2.00006 7.5H12.0001V9.5C12.0001 10.0304 11.7893 10.5391 11.4142 10.9142C11.0392 11.2893 10.5305 11.5 10.0001 11.5H4.00006C3.46963 11.5 2.96091 11.2893 2.58584 10.9142C2.21077 10.5391 2.00006 10.0304 2.00006 9.5V7.5Z" stroke="#464647" stroke-width="1.02143" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/filter/star.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_377)">
+<path d="M7.00457 0.572754C7.03703 0.572754 7.05711 0.581229 7.06723 0.587669C7.07641 0.593605 7.08546 0.602277 7.09343 0.618741L8.91977 4.49534L9.04509 4.76007L9.31397 4.80109L13.4087 5.42379C13.4315 5.42718 13.4493 5.43614 13.46 5.44491L13.4736 5.48593C13.4751 5.49055 13.4754 5.49512 13.4736 5.50208C13.4715 5.51042 13.4651 5.52583 13.4485 5.5431L10.492 8.55962L10.2835 8.77215L10.3348 9.07915L11.0343 13.3311C11.0366 13.3481 11.0354 13.3628 11.0309 13.3746C11.0269 13.3849 11.0182 13.3949 11.0059 13.4057C10.9845 13.4184 10.959 13.4268 10.9421 13.4268L10.8965 13.4143L10.8896 13.4106L7.23357 11.3934L6.99659 11.2629L6.75961 11.3934L3.1058 13.4094C3.06791 13.4299 3.0269 13.425 2.9987 13.4031L2.99073 13.3957L2.96453 13.366C2.96268 13.361 2.96146 13.3536 2.96338 13.3423V13.3386L3.66748 9.07044L3.71761 8.76345L3.50912 8.55091L0.548019 5.52943L0.543461 5.52446L0.525232 5.49835C0.524568 5.49547 0.523835 5.48877 0.52751 5.47723C0.531337 5.46544 0.537884 5.45499 0.548019 5.44616C0.558589 5.43696 0.57549 5.42735 0.599288 5.42379L4.69515 4.80109L4.96517 4.76007L5.08935 4.49534L6.91227 0.627442C6.92596 0.600107 6.96134 0.572866 7.00457 0.572754Z" stroke="#464647" stroke-width="0.9"/>
+</g>
+<defs>
+<clipPath id="clip0_290_377">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/sun.svg

@@ -0,0 +1,20 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_379)">
+<mask id="mask0_290_379" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M14 0H0V14H14V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_290_379)">
+<mask id="mask1_290_379" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M14 0H0V14H14V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_290_379)">
+<path d="M7.00022 1.1665V2.33317M7.00022 11.6665V12.8332M2.33358 6.99985H1.1669M3.68348 3.68307L2.85852 2.85811M10.3171 3.68307L11.142 2.85811M3.68348 10.319L2.85852 11.1439M10.3171 10.319L11.142 11.1439M12.8336 6.99985H11.667M9.91696 6.99985C9.91696 8.61062 8.61106 9.9165 7.00022 9.9165C5.38941 9.9165 4.08358 8.61062 4.08358 6.99985C4.08358 5.38901 5.38941 4.08316 7.00022 4.08316C8.61106 4.08316 9.91696 5.38901 9.91696 6.99985Z" stroke="#464647" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_290_379">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/sunset.svg

@@ -0,0 +1,15 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_392)">
+<mask id="mask0_290_392" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<path d="M14 0H0V14H14V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_290_392)">
+<path d="M3.53528 12.1989C4.2411 12.5197 5.13944 12.5197 5.8453 12.1989C6.55113 11.8781 7.44948 11.8781 8.15529 12.1989C8.8611 12.5197 9.7595 12.5197 10.4653 12.1989M7.00022 1.75V2.91667M2.33358 7.58331H1.1669M3.68348 4.26657L2.85852 3.44161M10.3168 4.26657L11.1418 3.44161M12.8336 7.58331H11.667M4.08358 7.58331C4.08358 5.97252 5.38941 4.66667 7.00022 4.66667C8.61106 4.66667 9.91696 5.97252 9.91696 7.58331M1.2253 10.1573C1.93113 9.83649 2.82947 9.83649 3.5353 10.1573C4.24113 10.4782 5.13947 10.4782 5.8453 10.1573C6.55113 9.83649 7.44948 9.83649 8.15529 10.1573C8.8611 10.4782 9.7595 10.4782 10.4653 10.1573C11.1711 9.83649 12.0695 9.83649 12.7753 10.1573" stroke="#464647" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_290_392">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/filter/track.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.35199 7.23096C8.45655 7.23096 9.35198 6.33552 9.35198 5.23095C9.35198 4.12639 8.45655 3.23096 7.35199 3.23096C6.24742 3.23096 5.35199 4.12639 5.35199 5.23095C5.35199 6.33552 6.24742 7.23096 7.35199 7.23096Z" stroke="#464647" stroke-width="1.02143"/>
+<path d="M7.50587 1.07715C5.12587 1.07715 3.19818 2.92102 3.19818 5.19755C3.19818 8.8029 7.50587 12.9233 7.50587 12.9233C7.50587 12.9233 11.8135 8.8029 11.8135 5.19755C11.8135 2.92102 9.88587 1.07715 7.50587 1.07715Z" stroke="#464647" stroke-width="1.02143" stroke-linejoin="round"/>
+</svg>

package/src/components/FilterSortBar/FilterChip.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { ChevronDownIcon, FilterIcon } from "./icons";
+import { FilterSortBarColors, FilterSortBarIcons } from "./types";
+
+interface FilterChipProps {
+  label: string;
+  active: boolean;
+  isOpen: boolean;
+  onClick: () => void;
+  isFiltersButton?: boolean;
+  /** Category icon (bus, clock, etc.) shown before the label on non-Filtros chips, used while unselected. */
+  iconSrc?: string;
+  /** White/active variant of iconSrc, used once this chip is selected (colored background). Falls back to iconSrc if unset. */
+  activeIconSrc?: string;
+  /** Number of active selections in this category; renders as a small badge and hides the label when > 0 on collapsible chips. */
+  badgeCount?: number;
+  /** When true, the label text is hidden and only the icon + badge + chevron show (used for the Filtros button once the strip is scrolled). */
+  collapsed?: boolean;
+  colors: Required<
+    Pick<
+      FilterSortBarColors,
+      "primaryColor" | "primaryTextColor" | "chipBorderColor" | "chipTextColor" | "badgeBackgroundColor" | "badgeTextColor"
+    >
+  >;
+  icons?: FilterSortBarIcons;
+}
+
+const FilterChip = ({
+  label,
+  active,
+  isOpen,
+  onClick,
+  isFiltersButton,
+  iconSrc,
+  activeIconSrc,
+  badgeCount = 0,
+  collapsed,
+  colors,
+  icons,
+}: FilterChipProps) => {
+  const isHighlighted = active || isOpen;
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "9px 14px",
+        borderRadius: 20,
+        border: `1px solid ${isHighlighted ? colors.primaryColor : colors.chipBorderColor}`,
+        backgroundColor: isHighlighted ? colors.primaryColor : "#fff",
+        color: isHighlighted ? colors.primaryTextColor : colors.chipTextColor,
+        fontSize: 13,
+        fontWeight: 500,
+        whiteSpace: "nowrap",
+        cursor: "pointer",
+        transition: "padding 0.2s ease",
+        WebkitTapHighlightColor: "transparent",
+      }}
+    >
+      {isFiltersButton && (
+        <FilterIcon
+          size={14}
+          color={isHighlighted ? colors.primaryTextColor : colors.chipTextColor}
+          src={icons?.filterIcon}
+          active={isHighlighted}
+        />
+      )}
+      {!isFiltersButton && iconSrc && (
+        <img
+          src={isHighlighted && activeIconSrc ? activeIconSrc : iconSrc}
+          width={14}
+          height={14}
+          alt=""
+          style={isHighlighted && !activeIconSrc ? { filter: "brightness(0) invert(1)" } : undefined}
+        />
+      )}
+      {badgeCount > 0 && (
+        <span
+          style={{
+            display: "inline-flex",
+            flexShrink: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            boxSizing: "border-box",
+            fontSize: 10,
+            fontWeight: 700,
+            lineHeight: 1,
+            backgroundColor: colors.badgeBackgroundColor,
+            color: colors.badgeTextColor,
+          }}
+        >
+          {badgeCount}
+        </span>
+      )}
+      {!collapsed && <span>{label}</span>}
+      <ChevronDownIcon
+        size={8}
+        color={isHighlighted ? colors.primaryTextColor : colors.chipTextColor}
+        open={isOpen}
+        src={icons?.chevronDownIcon}
+      />
+    </button>
+  );
+};
+
+export default FilterChip;