@superleapai/flow-ui 2.5.18 → 2.5.20

package/components/file-input.js

@@ -10,16 +10,23 @@
   // Tabler-style inline SVGs (no external deps) – match React IconFile, IconCopy, IconEye, IconX
   var ICONS = {
     file: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
-    fileImage: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
-    filePdf: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 12h6"/><path d="M9 16h6"/><path d="M9 8h1"/></svg>',
-    fileVideo: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>',
-    fileAudio: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>',
-    fileSpreadsheet: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M8 12h8"/><path d="M8 16h8"/><path d="M8 8h8"/></svg>',
-    fileText: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',
+    fileImage:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+    filePdf:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 12h6"/><path d="M9 16h6"/><path d="M9 8h1"/></svg>',
+    fileVideo:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>',
+    fileAudio:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>',
+    fileSpreadsheet:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M8 12h8"/><path d="M8 16h8"/><path d="M8 8h8"/></svg>',
+    fileText:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',
     copy: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
     eye: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>',
     x: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
-    loader: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
+    loader:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
   };
 
   var IMAGE_EXT = /\.(jpe?g|png|gif|webp|bmp|svg|ico|avif)(\?|$)/i;
@@ -80,10 +87,15 @@
     }
 
     if (!baseUrl) {
-      throw new Error("SuperLeap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.");
+      throw new Error(
+        "Superleap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.",
+      );
     }
 
-    const fullUrl = uploadUrl.startsWith("http") ? uploadUrl : baseUrl.replace(/\/$/, "") + (uploadUrl.startsWith("/") ? uploadUrl : "/" + uploadUrl);
+    const fullUrl = uploadUrl.startsWith("http")
+      ? uploadUrl
+      : baseUrl.replace(/\/$/, "") +
+        (uploadUrl.startsWith("/") ? uploadUrl : "/" + uploadUrl);
 
     const headers = {};
     if (apiKey) {
@@ -103,14 +115,14 @@
 
     const result = await response.json();
     console.log("[S3FileUpload] Upload response:");
-    
+
     const url = result?.data?.url;
-    
+
     if (!url) {
       console.error("[S3FileUpload] No URL found in response:", result);
       throw new Error("Upload response did not contain a file URL");
     }
-    
+
     return {
       url: url,
     };
@@ -135,8 +147,7 @@
    * @returns {HTMLElement} Field element
    */
   var UPLOAD_WRAPPER_CLASS = {
-    base:
-      "group relative flex w-full items-center justify-between border-1/2 rounded-4 text-typography-primary-text w-full transition-all ease-in-out focus-within:outline-none group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:border-border-primary group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:hover:border-border-primary",
+    base: "group relative flex w-full items-center justify-between border-1/2 rounded-4 text-typography-primary-text w-full transition-all ease-in-out focus-within:outline-none group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:border-border-primary group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:hover:border-border-primary",
     default:
       "border-border-primary bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
     error:
@@ -205,23 +216,29 @@
         UPLOAD_WRAPPER_CLASS.base,
         UPLOAD_WRAPPER_CLASS[currentVariant] || UPLOAD_WRAPPER_CLASS.default,
         sizeClass,
-        className
+        className,
       );
     }
     applyWrapperClasses();
     uploadWrapper.setAttribute("data-file-input-variant", currentVariant);
     uploadWrapper.setAttribute("data-file-input-size", currentInputSize);
-    uploadWrapper.setAttribute("data-disabled", disabledState ? "true" : "false");
+    uploadWrapper.setAttribute(
+      "data-disabled",
+      disabledState ? "true" : "false",
+    );
 
     // Left content (button + status) – pointer-events-none so overlay input receives clicks
     const leftContent = document.createElement("div");
-    leftContent.className = "pointer-events-none flex min-w-0 flex-1 items-center gap-8 truncate";
+    leftContent.className =
+      "pointer-events-none flex min-w-0 flex-1 items-center gap-8 truncate";
 
     var disabledChildClasses =
       "group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:hover:bg-fill-tertiary-fill-light-gray";
     var statusTextBaseClass = "text-reg-13 min-w-0 flex-1 truncate";
-    var statusTextDisabledClass = " group-has-[:disabled]:text-typography-quaternary-text";
-    const useButtonComponent = global.Button && typeof global.Button.create === "function";
+    var statusTextDisabledClass =
+      " group-has-[:disabled]:text-typography-quaternary-text";
+    const useButtonComponent =
+      global.Button && typeof global.Button.create === "function";
     const initialButtonText = multiple ? "Choose files" : "Choose a file";
     const btn = useButtonComponent
       ? global.Button.create({
@@ -241,7 +258,10 @@
 
     // Status text: "No files chosen" (quaternary) or "X file(s) selected"
     const statusText = document.createElement("p");
-    statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
+    statusText.className =
+      statusTextBaseClass +
+      " text-typography-quaternary-text" +
+      statusTextDisabledClass;
 
     // Hidden file input – overlays row, high z-index so it receives clicks
     const input = document.createElement("input");
@@ -250,7 +270,9 @@
     function applyInputClasses() {
       input.className =
         inputBaseClass +
-        (disabledState ? " !pointer-events-none !cursor-not-allowed" : " cursor-pointer");
+        (disabledState
+          ? " !pointer-events-none !cursor-not-allowed"
+          : " cursor-pointer");
     }
     applyInputClasses();
     input.multiple = multiple;
@@ -294,7 +316,8 @@
     function makeCopyBtn(fileUrl) {
       const btn = document.createElement("button");
       btn.type = "button";
-      btn.className = "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
+      btn.className =
+        "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
       btn.innerHTML = ICONS.copy;
       btn.setAttribute("aria-label", "Copy URL");
       btn.addEventListener("click", function (e) {
@@ -309,7 +332,7 @@
             if (global.FlowUI && global.FlowUI.showToast) {
               global.FlowUI.showToast("Copy failed", "error");
             }
-          }
+          },
         );
       });
       return btn;
@@ -318,7 +341,8 @@
     function makeViewBtn(fileUrl) {
       const btn = document.createElement("button");
       btn.type = "button";
-      btn.className = "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
+      btn.className =
+        "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
       btn.innerHTML = ICONS.eye;
       btn.setAttribute("aria-label", "View file");
       btn.addEventListener("click", function (e) {
@@ -331,7 +355,8 @@
     function makeRemoveBtn(onRemove) {
       const btn = document.createElement("button");
       btn.type = "button";
-      btn.className = "shrink-0 rounded-2 p-4 text-error-text-base transition-colors hover:bg-error-surface focus:outline-none";
+      btn.className =
+        "shrink-0 rounded-2 p-4 text-error-text-base transition-colors hover:bg-error-surface focus:outline-none";
       btn.innerHTML = ICONS.x;
       btn.setAttribute("aria-label", "Remove file");
       btn.addEventListener("click", function (e) {
@@ -348,7 +373,8 @@
 
       uploadedFiles.forEach(function (file, index) {
         var nameEl = document.createElement("p");
-        nameEl.className = "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
+        nameEl.className =
+          "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
         nameEl.textContent = file.name;
         nameEl.title = file.url;
 
@@ -356,12 +382,14 @@
         actionsWrap.className = "flex items-center gap-2 shrink-0";
         actionsWrap.appendChild(makeCopyBtn(file.url));
         actionsWrap.appendChild(makeViewBtn(file.url));
-        actionsWrap.appendChild(makeRemoveBtn(function () {
-          uploadedFiles.splice(index, 1);
-          saveToState();
-          renderFilesList();
-          updateStatus();
-        }));
+        actionsWrap.appendChild(
+          makeRemoveBtn(function () {
+            uploadedFiles.splice(index, 1);
+            saveToState();
+            renderFilesList();
+            updateStatus();
+          }),
+        );
 
         var badge;
         if (useBadge) {
@@ -373,12 +401,15 @@
             className: "text-typography-primary-text",
           });
           var iconWraps = badge.querySelectorAll(".flex.size-16");
-          if (iconWraps.length >= 1) iconWraps[0].classList.add("text-typography-secondary-text");
+          if (iconWraps.length >= 1)
+            iconWraps[0].classList.add("text-typography-secondary-text");
         } else {
           badge = document.createElement("div");
-          badge.className = "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12 text-typography-primary-text";
+          badge.className =
+            "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12 text-typography-primary-text";
           var iconWrap = document.createElement("span");
-          iconWrap.className = "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
+          iconWrap.className =
+            "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
           iconWrap.innerHTML = getFileTypeIcon(file.name || file.url);
           badge.appendChild(iconWrap);
           badge.appendChild(nameEl);
@@ -396,7 +427,8 @@
 
       uploadingFiles.forEach(function (item) {
         var nameEl = document.createElement("p");
-        nameEl.className = "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
+        nameEl.className =
+          "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
         nameEl.textContent = item.name;
 
         var badge;
@@ -408,12 +440,15 @@
             className: "text-typography-primary-text",
           });
           var iconWraps = badge.querySelectorAll(".flex.size-16");
-          if (iconWraps.length >= 1) iconWraps[0].classList.add("text-typography-secondary-text");
+          if (iconWraps.length >= 1)
+            iconWraps[0].classList.add("text-typography-secondary-text");
         } else {
           badge = document.createElement("div");
-          badge.className = "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12";
+          badge.className =
+            "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12";
           var iconWrap = document.createElement("span");
-          iconWrap.className = "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
+          iconWrap.className =
+            "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
           iconWrap.innerHTML = ICONS.loader;
           badge.appendChild(iconWrap);
           badge.appendChild(nameEl);
@@ -443,13 +478,22 @@
 
       if (!filesChosen) {
         statusText.textContent = "No files chosen";
-        statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
+        statusText.className =
+          statusTextBaseClass +
+          " text-typography-quaternary-text" +
+          statusTextDisabledClass;
       } else if (uploadingCount > 0) {
         statusText.textContent = "Uploading…";
-        statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
+        statusText.className =
+          statusTextBaseClass +
+          " text-typography-quaternary-text" +
+          statusTextDisabledClass;
       } else {
         statusText.textContent = `${uploadedCount} file${uploadedCount !== 1 ? "s" : ""} selected`;
-        statusText.className = statusTextBaseClass + " text-typography-primary-text" + statusTextDisabledClass;
+        statusText.className =
+          statusTextBaseClass +
+          " text-typography-primary-text" +
+          statusTextDisabledClass;
       }
 
       endIconSlot.style.display = uploadingCount > 0 ? "flex" : "none";
@@ -486,7 +530,9 @@
             return fileExtension === type.toLowerCase();
           }
           if (type.includes("/")) {
-            return fileType === type || fileType.startsWith(type.split("/")[0] + "/");
+            return (
+              fileType === type || fileType.startsWith(type.split("/")[0] + "/")
+            );
           }
           return false;
         });
@@ -517,9 +563,13 @@
         const result = await uploadFileToS3(file, isPrivate);
         const fileUrl = result?.url;
         if (!fileUrl) {
-          throw new Error(`No URL returned from upload for file "${file.name}"`);
+          throw new Error(
+            `No URL returned from upload for file "${file.name}"`,
+          );
         }
-        console.log(`[S3FileUpload] File uploaded successfully: ${file.name} -> ${fileUrl}`);
+        console.log(
+          `[S3FileUpload] File uploaded successfully: ${file.name} -> ${fileUrl}`,
+        );
 
         uploadingFiles = uploadingFiles.filter((f) => f.file !== file);
         uploadedFiles.push({ url: fileUrl, name: file.name });
@@ -533,7 +583,10 @@
         renderUploadingList();
         updateStatus();
         if (global.FlowUI && global.FlowUI.showToast) {
-          global.FlowUI.showToast(`Failed to upload "${file.name}": ${error.message}`, "error");
+          global.FlowUI.showToast(
+            `Failed to upload "${file.name}": ${error.message}`,
+            "error",
+          );
         }
       }
     }
@@ -541,10 +594,16 @@
     // Handle file selection
     input.addEventListener("change", async function (e) {
       const files = Array.from(e.target.files || []);
-      if (files.length === 0) {return;}
+      if (files.length === 0) {
+        return;
+      }
 
       // Check max files limit
-      if (multiple && maxFiles && uploadedFiles.length + files.length > maxFiles) {
+      if (
+        multiple &&
+        maxFiles &&
+        uploadedFiles.length + files.length > maxFiles
+      ) {
         const message = `You can only upload ${maxFiles} file${maxFiles !== 1 ? "s" : ""}`;
         if (global.FlowUI && global.FlowUI.showToast) {
           global.FlowUI.showToast(message, "error");
@@ -591,7 +650,10 @@
       input.disabled = disabledState;
       applyInputClasses();
       applyWrapperClasses();
-      uploadWrapper.setAttribute("data-disabled", disabledState ? "true" : "false");
+      uploadWrapper.setAttribute(
+        "data-disabled",
+        disabledState ? "true" : "false",
+      );
     };
 
     field.setVariant = function (v) {

package/components/multiselect.js

@@ -12,6 +12,9 @@
   var CHECK_SVG =
     '<svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.41574 12.2442 3.41574 12.5331 3.72684C12.822 4.03795 12.822 4.53753 12.5331 4.84863L6.81767 10.6736C6.52329 10.9901 6.05308 10.9901 5.7587 10.6736L2.46685 7.3463C2.17795 7.03519 2.17795 6.53561 2.46685 6.2245C2.75575 5.9134 3.24395 5.9134 3.53285 6.2245L6.28822 9.05351L11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
 
+  var SEARCH_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
+
   function triggerClasses(variant, size, disabled, isEmpty) {
     var v = variant || "default";
     var base =
@@ -80,6 +83,7 @@
    * @param {boolean} [config.disabled] - Whether multiselect is disabled
    * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
    * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.showSearch] - Show search input (default: false)
    * @returns {HTMLElement} MultiSelect container element
    */
   function createMultiSelect(config) {
@@ -90,7 +94,9 @@
     var onValuesChange = config.onValuesChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
+    var showSearch = !!config.showSearch;
     var disabled = config.disabled === true;
+    var searchQuery = "";
 
     var values = Array.isArray(config.value)
       ? config.value.slice()
@@ -156,6 +162,35 @@
     content.setAttribute("aria-multiselectable", "true");
     content.className = "custom-multiselect-content w-full  max-h-[30vh] overflow-hidden flex flex-col";
 
+    var searchContainer = document.createElement("div");
+    searchContainer.className = showSearch ? "p-8 border-b-1/2 border-border-primary" : "p-8 hidden";
+    var searchInputWrapper = document.createElement("div");
+    searchInputWrapper.className = "flex items-center gap-8";
+    var searchIconSpan = document.createElement("span");
+    searchIconSpan.className = "shrink-0 text-typography-tertiary-text";
+    searchIconSpan.innerHTML = SEARCH_ICON;
+    searchInputWrapper.appendChild(searchIconSpan);
+    var searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.placeholder = "Search...";
+    searchInput.className =
+      "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
+    searchInput.setAttribute("aria-label", "Search options");
+    searchInput.addEventListener("input", function (e) {
+      searchQuery = e.target.value.trim();
+      buildOptionsList();
+      syncOptionStates();
+    });
+    searchInput.addEventListener("click", function (e) {
+      e.stopPropagation();
+    });
+    searchInput.addEventListener("keydown", function (e) {
+      e.stopPropagation();
+    });
+    searchInputWrapper.appendChild(searchInput);
+    searchContainer.appendChild(searchInputWrapper);
+    content.appendChild(searchContainer);
+
     var optionsList = document.createElement("div");
     optionsList.className =
       "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
@@ -196,17 +231,36 @@
       });
     }
 
+    function getFilteredOptions() {
+      if (!showSearch || !searchQuery) return options.slice();
+      var normalizedQuery = searchQuery.toLowerCase();
+      return options.filter(function (opt) {
+        var optionValue = getOptionValue(opt);
+        var optionLabel = getOptionLabel(opt);
+        return (
+          String(optionLabel || "").toLowerCase().includes(normalizedQuery) ||
+          String(optionValue || "").toLowerCase().includes(normalizedQuery)
+        );
+      });
+    }
+
     function buildOptionsList() {
       optionsList.innerHTML = "";
-      if (options.length === 0) {
+      var filteredOptions = getFilteredOptions();
+      if (filteredOptions.length === 0) {
         var noOpt = document.createElement("div");
         noOpt.className =
           "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
-        noOpt.textContent = "No options available";
+        noOpt.textContent =
+          options.length === 0
+            ? "No options available"
+            : searchQuery
+              ? "No options found"
+              : "No options available";
         optionsList.appendChild(noOpt);
         return;
       }
-      options.forEach(function (opt) {
+      filteredOptions.forEach(function (opt) {
         var optionValue = getOptionValue(opt);
         var optionLabel = getOptionLabel(opt);
         var selected = isSelected(optionValue);
@@ -278,16 +332,29 @@
           });
         trigger.setAttribute("aria-expanded", "true");
         chevron.style.transform = "rotate(180deg)";
+        buildOptionsList();
+        syncOptionStates();
         if (popover.panel) {
           var triggerWidthPx = trigger.offsetWidth + "px";
           popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
           popover.panel.style.minWidth = triggerWidthPx;
           popover.panel.style.width = triggerWidthPx;
         }
+        if (showSearch) {
+          setTimeout(function () {
+            searchInput.focus();
+          }, 50);
+        }
       },
       onClose: function () {
         trigger.setAttribute("aria-expanded", "false");
         chevron.style.transform = "";
+        if (showSearch) {
+          searchQuery = "";
+          searchInput.value = "";
+          buildOptionsList();
+          syncOptionStates();
+        }
       },
     });
     container.popoverInstance = popover;