@superleapai/flow-ui 2.4.6 → 2.5.0

package/dist/superleap-flow.js

@@ -1,12 +1,12 @@
 /**
- * @superleapai/flow-ui v2.2.9
+ * @superleapai/flow-ui v2.3.4
  * A reusable design system for building multi-step forms
  *
  * Copyright (c) 2024-present SuperLeap
  * Licensed under MIT
  *
  * Build: development
- * Date: 2026-02-16T06:02:03.445Z
+ * Date: 2026-02-19T14:43:01.927Z
  *
  * For documentation and examples, visit:
  * https://github.com/superleap/superleap-flow
@@ -3567,12 +3567,13 @@
 
     /**
      * Tell the CRM to navigate to a path.
-     * @param {string} path
+     * @param {string} url
+     * @param {boolean} [newTab=false]
      */
-    function navigate(path) {
+    function navigate(url, newTab) {
       var bridge = getBridge();
       if (bridge && bridge.isConnected()) {
-        bridge.send("crm:navigate", { path: path });
+        bridge.send("crm:navigate", { url: url, new_tab: !!newTab });
       }
     }
 
@@ -5121,42 +5122,6 @@
       });
     }
 
-    // ============================================================================
-    // ALERT COMPONENT
-    // ============================================================================
-
-    /**
-     * Render alerts/errors
-     * Uses Alert component when available for design-system styling.
-     * @param {HTMLElement} container - Container element for alerts
-     * @param {Array} messages - Array of error/info messages (strings) or { title?, description } objects
-     * @param {string} type - Alert type: "error" | "info" | "success" | "warning" | "destructive" | "default"
-     */
-    function renderAlerts(container, messages = [], type = "error") {
-      if (!container) {return;}
-      container.innerHTML = "";
-
-      const Alert = getComponent("Alert");
-      const useAlertComponent = Alert && typeof Alert.create === "function";
-
-      messages.forEach((msg) => {
-        const description = typeof msg === "string" ? msg : (msg.description || msg.title || "");
-        const title = typeof msg === "object" && msg.title ? msg.title : "";
-
-        if (useAlertComponent && (description || title)) {
-          const variantMap = { error: "error", info: "info", success: "success" };
-          const variant = variantMap[type] || type;
-          const alertEl = Alert.create({ title, description, variant });
-          if (alertEl) container.appendChild(alertEl);
-        } else {
-          const div = document.createElement("div");
-          div.className = `alert alert--${type}`;
-          div.textContent = description || title;
-          container.appendChild(div);
-        }
-      });
-    }
-
     // ============================================================================
     // TABLE COMPONENT
     // ============================================================================
@@ -5491,9 +5456,8 @@
       // Stepper
       renderStepper,
 
-      // Alerts (now shows toast notifications)
+      // Alerts
       showToast,
-      renderAlerts, // Legacy support for static alerts
 
       // Table
       createDataTable,
@@ -6896,12 +6860,12 @@
         ' stroke-width="1.5">' +
         TI_PATH_NONE +
         '<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>',
-      IconCurrencyDollar:
+      IconStar:
         "<svg" +
         TI +
         ' stroke-width="1.5">' +
         TI_PATH_NONE +
-        '<path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>',
+        '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>',
       IconPhone:
         "<svg" +
         TI +
@@ -7100,9 +7064,18 @@
         return { show: noop, hide: noop, destroy: noop, element: null };
       }
 
+      // Wrap trigger in a relative container so popover can be absolute relative to it (full width so parent controls it)
+      const container = document.createElement("div");
+      container.className = "relative w-full";
+      const triggerParent = triggerEl.parentNode;
+      if (triggerParent) {
+        triggerParent.insertBefore(container, triggerEl);
+        container.appendChild(triggerEl);
+      }
+
       const wrapper = document.createElement("div");
       wrapper.className =
-        "fixed z-50  pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
+        "absolute z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
       wrapper.setAttribute("aria-hidden", "true");
 
       const panel = document.createElement("div");
@@ -7138,57 +7111,46 @@
       panel.appendChild(body);
 
       wrapper.appendChild(panel);
+      container.appendChild(wrapper);
 
       function noop() {}
 
       function position() {
-        const rect = triggerEl.getBoundingClientRect();
+        const triggerRect = triggerEl.getBoundingClientRect();
         const panelRect = panel.getBoundingClientRect();
         const gap = 8;
         let top = 0;
         let left = 0;
 
         // Alignment offset: start = 0, center = half diff, end = full diff
-        const alignLeft = (align === "center" ? (rect.width - panelRect.width) / 2 : align === "end" ? rect.width - panelRect.width : 0);
-        const alignTop = (align === "center" ? (rect.height - panelRect.height) / 2 : align === "end" ? rect.height - panelRect.height : 0);
+        const alignLeft = (align === "center" ? (triggerRect.width - panelRect.width) / 2 : align === "end" ? triggerRect.width - panelRect.width : 0);
+        const alignTop = (align === "center" ? (triggerRect.height - panelRect.height) / 2 : align === "end" ? triggerRect.height - panelRect.height : 0);
 
         switch (placement) {
           case "bottom":
-            top = rect.bottom + gap;
-            left = rect.left + alignLeft;
+            top = triggerRect.height + gap;
+            left = alignLeft;
             break;
           case "top":
-            top = rect.top - panelRect.height - gap;
-            left = rect.left + alignLeft;
+            top = -panelRect.height - gap;
+            left = alignLeft;
             break;
           case "right":
-            top = rect.top + alignTop;
-            left = rect.right + gap;
+            top = alignTop;
+            left = triggerRect.width + gap;
             break;
           case "left":
-            top = rect.top + alignTop;
-            left = rect.left - panelRect.width - gap;
+            top = alignTop;
+            left = -panelRect.width - gap;
             break;
           default:
-            top = rect.bottom + gap;
-            left = rect.left + alignLeft;
-        }
-
-        // Keep within viewport
-        const padding = 8;
-        if (left < padding) left = padding;
-        if (left + panelRect.width > window.innerWidth - padding) {
-          left = window.innerWidth - panelRect.width - padding;
-        }
-        if (top < padding) top = padding;
-        if (top + panelRect.height > window.innerHeight - padding) {
-          top = window.innerHeight - panelRect.height - padding;
+            top = triggerRect.height + gap;
+            left = alignLeft;
         }
 
-        wrapper.style.left = "0";
-        wrapper.style.top = "0";
-        wrapper.style.transform = "translate(" + left + "px, " + top + "px)";
-        // Force reflow so transform is applied before we show (avoids flash from left/top-left)
+        wrapper.style.transform = "";
+        wrapper.style.top = top + "px";
+        wrapper.style.left = left + "px";
         wrapper.offsetHeight;
       }
 
@@ -7202,24 +7164,7 @@
 
       function show() {
         if (onOpen) onOpen();
-        var justAppended = !wrapper.parentNode;
-        if (justAppended) {
-          document.body.appendChild(wrapper);
-        }
-        // On first open, wait for layout so getBoundingClientRect() is correct (avoids wrong position / "from left" look)
-        if (justAppended) {
-          requestAnimationFrame(function () {
-            position();
-            wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
-            wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
-            wrapper.setAttribute("aria-hidden", "false");
-            requestAnimationFrame(function () {
-              requestAnimationFrame(function () {
-                panel.setAttribute("data-state", "open");
-              });
-            });
-          });
-        } else {
+        requestAnimationFrame(function () {
           position();
           wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
           wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
@@ -7229,7 +7174,7 @@
               panel.setAttribute("data-state", "open");
             });
           });
-        }
+        });
       }
 
       function destroy() {
@@ -7237,6 +7182,10 @@
         if (wrapper.parentNode) {
           wrapper.parentNode.removeChild(wrapper);
         }
+        if (container.parentNode && triggerEl.parentNode === container) {
+          container.parentNode.insertBefore(triggerEl, container);
+          container.parentNode.removeChild(container);
+        }
         if (closeOnClickOutside) {
           document.removeEventListener("click", outsideClick);
         }
@@ -7356,6 +7305,14 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
+    function getDep(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
     /**
      * Create a custom select component
      * @param {Object} config
@@ -7385,6 +7342,11 @@
       var value =
         config.value !== undefined && config.value !== null ? config.value : "";
 
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("Select requires Popover");
+      }
+
       var selectedOption = options.find(function (opt) {
         var optValue =
           opt.value !== undefined && opt.value !== null
@@ -7484,11 +7446,7 @@
 
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      var contentBase =
-        "custom-select-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
-        "group-[.open]:opacity-100 group-[.open]:visible ";
-      content.className =
-        contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+      content.className = "custom-select-content w-full max-h-[200px] overflow-hidden flex flex-col";
 
       var optionsList = document.createElement("div");
       optionsList.className =
@@ -7542,47 +7500,66 @@
       }
 
       content.appendChild(optionsList);
-      container.appendChild(content);
 
-      var isOpen = false;
       var highlightedIndex = -1;
+      var popover = Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          document
+            .querySelectorAll(".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect")
+            .forEach(function (other) {
+              if (other !== container && other.popoverInstance) {
+                other.popoverInstance.hide();
+              }
+            });
+          trigger.setAttribute("aria-expanded", "true");
+          chevron.style.transform = "rotate(180deg)";
+          highlightOptionByValue(value);
+          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;
+          }
+        },
+        onClose: function () {
+          trigger.setAttribute("aria-expanded", "false");
+          chevron.style.transform = "";
+          highlightedIndex = -1;
+        },
+      });
+      container.popoverInstance = popover;
 
       function openDropdown() {
         if (disabled) return;
-        document
-          .querySelectorAll(".custom-select.open, .record-select.open")
-          .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector(
-                "button, .custom-select-trigger, .record-select-trigger"
-              );
-              if (t) t.setAttribute("aria-expanded", "false");
-            }
-          });
-        isOpen = true;
-        container.classList.add("open");
-        trigger.setAttribute("aria-expanded", "true");
-        highlightOptionByValue(value);
-        updatePosition();
+        popover.show();
       }
 
       function closeDropdown() {
-        isOpen = false;
-        container.classList.remove("open");
-        trigger.setAttribute("aria-expanded", "false");
+        popover.hide();
         highlightedIndex = -1;
       }
 
       function toggleDropdown() {
+        var isVisible = popover.element && popover.element.classList.contains("visible");
         var others = document.querySelectorAll(
-          ".custom-select.open, .record-select.open"
+          ".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect"
         );
         var hasOther = Array.from(others).some(function (s) {
-          return s !== container;
+          return s !== container && s.popoverInstance && s.popoverInstance.element && s.popoverInstance.element.classList.contains("visible");
         });
         if (hasOther) openDropdown();
-        else if (isOpen) closeDropdown();
+        else if (isVisible) closeDropdown();
         else openDropdown();
       }
 
@@ -7661,40 +7638,26 @@
 
       function scrollToOption(opt) {
         if (!opt) return;
-        var cr = content.getBoundingClientRect();
+        var cr = optionsList.getBoundingClientRect();
         var top = opt.offsetTop;
         var bottom = top + opt.offsetHeight;
-        var st = content.scrollTop;
+        var st = optionsList.scrollTop;
         var sb = st + cr.height;
-        if (top < st) content.scrollTop = top - 8;
+        if (top < st) optionsList.scrollTop = top - 8;
         else if (bottom > sb)
-          content.scrollTop = bottom - cr.height + 8;
-      }
-
-      function updatePosition() {
-        var rect = trigger.getBoundingClientRect();
-        var vh = window.innerHeight;
-        var below = vh - rect.bottom;
-        var above = rect.top;
-        if (below < 200 && above > below) {
-          content.className =
-            contentBase +
-            "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
-        } else {
-          content.className =
-            contentBase +
-            "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
-        }
+          optionsList.scrollTop = bottom - cr.height + 8;
       }
 
       trigger.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleDropdown();
-      });
+        if (disabled) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+      }, true);
 
       trigger.addEventListener("keydown", function (e) {
         if (disabled) return;
+        var isVisible = popover.element && popover.element.classList.contains("visible");
         switch (e.key) {
           case "Enter":
           case " ":
@@ -7703,16 +7666,16 @@
             break;
           case "ArrowDown":
             e.preventDefault();
-            if (!isOpen) openDropdown();
+            if (!isVisible) openDropdown();
             else navigateOptions(1);
             break;
           case "ArrowUp":
             e.preventDefault();
-            if (!isOpen) openDropdown();
+            if (!isVisible) openDropdown();
             else navigateOptions(-1);
             break;
           case "Escape":
-            if (isOpen) {
+            if (isVisible) {
               e.preventDefault();
               closeDropdown();
             }
@@ -7733,13 +7696,6 @@
         scrollToOption(opt);
       }
 
-      document.addEventListener("click", function (e) {
-        if (isOpen && !container.contains(e.target)) closeDropdown();
-      });
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && isOpen) closeDropdown();
-      });
-
       container.updateValue = function (newValue) {
         value =
           newValue !== undefined && newValue !== null ? newValue : "";
@@ -7836,7 +7792,8 @@
           canClear && !!value && !disabled
         );
         updateClearButton();
-        if (disabled && isOpen) closeDropdown();
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (disabled && isVisible) closeDropdown();
       };
 
       return container;
@@ -7926,6 +7883,14 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
+    function getDep(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
     /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
     function getClient() {
       if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -7989,8 +7954,10 @@
       var error = null;
       var searchQuery = "";
       var popover = null;
-      var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
-      var isOpen = false;
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("EnumSelect requires Popover");
+      }
 
       var container = document.createElement("div");
       container.className = "enum-select relative w-full group";
@@ -8074,13 +8041,7 @@
       // Create dropdown content
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      var contentBase = "w-full min-w-[200px]";
-      if (!usePopover) {
-        contentBase += " absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
-      } else {
-        contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
-      }
-      content.className = contentBase;
+      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
       // Search input (using InputComponent like phone-input)
       var searchContainer = document.createElement("div");
@@ -8146,10 +8107,6 @@
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
-
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -8272,37 +8229,14 @@
 
       function openDropdown() {
         if (disabled) return;
-        if (popover) {
-          // Close other open selects
-          document
-            .querySelectorAll(".enum-select, .custom-select, .record-select")
-            .forEach(function (other) {
-              if (other !== container && other.popoverInstance) {
-                other.popoverInstance.hide();
-              }
-            });
-          popover.show();
-          trigger.setAttribute("aria-expanded", "true");
-          highlightOptionByValue(value);
-          if (searchInput) {
-            setTimeout(function () {
-              searchInput.focus();
-            }, 50);
-          }
-          return;
-        }
-        // Fallback when Popover not available
         document
-          .querySelectorAll(".enum-select.open")
+          .querySelectorAll(".enum-select, .custom-select, .record-select")
           .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector("button");
-              if (t) t.setAttribute("aria-expanded", "false");
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
             }
           });
-        isOpen = true;
-        container.classList.add("open");
+        popover.show();
         trigger.setAttribute("aria-expanded", "true");
         highlightOptionByValue(value);
         if (searchInput) {
@@ -8313,12 +8247,7 @@
       }
 
       function closeDropdown() {
-        if (popover) {
-          popover.hide();
-        } else {
-          isOpen = false;
-          container.classList.remove("open");
-        }
+        popover.hide();
         trigger.setAttribute("aria-expanded", "false");
         highlightedIndex = -1;
         clearSearch();
@@ -8326,9 +8255,7 @@
       }
 
       function toggleDropdown() {
-        var isVisible = popover
-          ? popover.element && popover.element.classList.contains("visible")
-          : isOpen;
+        var isVisible = popover.element && popover.element.classList.contains("visible");
         if (isVisible) {
           closeDropdown();
         } else {
@@ -8439,10 +8366,7 @@
 
       // Initialize Popover
       function initializePopover() {
-        if (!usePopover) {
-          return;
-        }
-        popover = global.Popover.create({
+        popover = Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -8458,6 +8382,12 @@
           onOpen: function () {
             trigger.setAttribute("aria-expanded", "true");
             chevron.style.transform = "rotate(180deg)";
+            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;
+            }
           },
           bodyClassName: "p-0 overflow-hidden",
           panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -8465,13 +8395,6 @@
 
         // Store popover instance for cleanup
         container.popoverInstance = popover;
-        
-        // Set CSS variable for trigger width
-        var triggerWidth = trigger.offsetWidth;
-        if (popover.panel) {
-          popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
-          popover.panel.style.minWidth = triggerWidth + "px";
-        }
       }
 
       // Load options from SDK
@@ -8591,21 +8514,6 @@
       initializePopover();
       loadOptions();
 
-      if (!usePopover) {
-        trigger.addEventListener("click", function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          if (disabled) return;
-          toggleDropdown();
-        });
-        document.addEventListener("click", function (e) {
-          if (isOpen && !container.contains(e.target)) closeDropdown();
-        });
-        document.addEventListener("keydown", function (e) {
-          if (e.key === "Escape" && isOpen) closeDropdown();
-        });
-      }
-
       // Public API
       container.updateValue = function (newValue) {
         value = newValue !== undefined && newValue !== null ? newValue : "";
@@ -8650,7 +8558,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && (isVisible || isOpen)) closeDropdown();
+        if (disabled && isVisible) closeDropdown();
       };
 
       container.reload = function () {
@@ -8688,7 +8596,7 @@
   /**
    * Record Select Component (superleap-flow)
    * Single-record select with search; same trigger/content styling as Select.
-   * Uses: Popover (dropdown), InputComponent (search), Spinner (loading), Avatar (vivid for user).
+   * Uses Popover for dropdown (required), InputComponent (search), Spinner (loading), Avatar (vivid for user).
    * Fetches records via superleapClient.getSdk().model(objectSlug).
    * For objectSlug === 'user' shows Vivid Avatar; otherwise static icon from schema or object map (database fallback).
    * Does not use icon from backend payload.
@@ -8709,7 +8617,7 @@
       role: { iconStr: "IconShield", color: "info" },
       iframe: { iconStr: "IconLayout", color: "neutral" },
       lead: { iconStr: "IconUser", color: "primary" },
-      opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
+      opportunity: { iconStr: "IconStar", color: "success" },
       call_log: { iconStr: "IconPhone", color: "info" },
       communication: { iconStr: "IconMessage", color: "primary" },
       history_field: { iconStr: "IconClock", color: "neutral" },
@@ -8856,6 +8764,12 @@
         errEl.textContent = "Record select: objectSlug is required.";
         return errEl;
       }
+      if (!Popover || typeof Popover.create !== "function") {
+        var popoverErr = document.createElement("div");
+        popoverErr.className = "text-reg-13 text-typography-quaternary-text";
+        popoverErr.textContent = "Record select: Popover is required.";
+        return popoverErr;
+      }
 
       var container = document.createElement("div");
       container.className = "record-select relative w-full group";
@@ -8868,16 +8782,11 @@
       var isOpen = false;
       var searchTerm = "";
       var searchDebounceTimer = null;
-      var usePopover = Popover && typeof Popover.create === "function";
       var popover = null;
       var hasMoreRecords = true;
       var currentPage = 1;
       var isFetchingMore = false;
       var totalFetched = 0;
-      var contentBase = "record-select-content min-w-[8rem] ";
-      if (!usePopover) {
-        contentBase += "absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible ";
-      }
 
       // Trigger wrapper + button (same structure as Select)
       var triggerWrapper = document.createElement("span");
@@ -8943,7 +8852,7 @@
       // Dropdown content: search + list (same content pattern as Select)
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = contentBase + (usePopover ? "max-h-[30vh] overflow-hidden flex flex-col" : "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0");
+      content.className = "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -9010,57 +8919,51 @@
       
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
-
-      if (usePopover) {
-        popover = Popover.create({
-          trigger: trigger,
-          content: content,
-          placement: "bottom",
-          align: "start",
-          closeOnClickOutside: true,
-          bodyClassName: "p-0 overflow-hidden",
-          panelClassName: "max-h-[30vh] overflow-hidden",
-          onOpen: function () {
-            if (disabled) {
-              popover.hide();
-              return;
-            }
-            document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
-              if (other !== container) {
-                other.classList.remove("open");
-                var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
-                if (t) t.setAttribute("aria-expanded", "false");
-              }
-            });
-            isOpen = true;
-            container.classList.add("open");
-            trigger.setAttribute("aria-expanded", "true");
-            searchTerm = "";
-            if (searchInputWrapper) searchInputWrapper.setValue("");
-            else if (searchInputEl) searchInputEl.value = "";
-            content.style.minWidth = trigger.offsetWidth + "px";
-            loadInitialAndRender();
-            setTimeout(function () {
-              if (searchInputEl) searchInputEl.focus();
-            }, 0);
-          },
-          onClose: function () {
-            isOpen = false;
-            container.classList.remove("open");
-            trigger.setAttribute("aria-expanded", "false");
-            searchTerm = "";
-            if (searchInputWrapper) searchInputWrapper.setValue("");
-            else if (searchInputEl) searchInputEl.value = "";
-            if (searchDebounceTimer) {
-              clearTimeout(searchDebounceTimer);
-              searchDebounceTimer = null;
+      popover = Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "max-h-[30vh] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
+              if (t) t.setAttribute("aria-expanded", "false");
             }
-          },
-        });
-      }
+          });
+          isOpen = true;
+          container.classList.add("open");
+          trigger.setAttribute("aria-expanded", "true");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.value = "";
+          content.style.minWidth = trigger.offsetWidth + "px";
+          loadInitialAndRender();
+          setTimeout(function () {
+            if (searchInputEl) searchInputEl.focus();
+          }, 0);
+        },
+        onClose: function () {
+          isOpen = false;
+          container.classList.remove("open");
+          trigger.setAttribute("aria-expanded", "false");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.value = "";
+          if (searchDebounceTimer) {
+            clearTimeout(searchDebounceTimer);
+            searchDebounceTimer = null;
+          }
+        },
+      });
 
       if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
@@ -9456,64 +9359,8 @@
         }, 500);
       }
 
-      function openDropdown() {
-        if (disabled) return;
-        if (usePopover && popover) {
-          popover.show();
-          return;
-        }
-        document
-          .querySelectorAll(".custom-select.open, .record-select.open")
-          .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector(
-                "button, .custom-select-trigger, .record-select-trigger"
-              );
-              if (t) t.setAttribute("aria-expanded", "false");
-            }
-          });
-        isOpen = true;
-        container.classList.add("open");
-        trigger.setAttribute("aria-expanded", "true");
-        searchTerm = "";
-        if (searchInputWrapper) searchInputWrapper.setValue("");
-        else if (searchInputEl) searchInputEl.value = "";
-        loadInitialAndRender();
-        setTimeout(function () {
-          if (searchInputEl) searchInputEl.focus();
-        }, 0);
-        updatePosition();
-      }
-
       function closeDropdown() {
-        if (usePopover && popover) {
-          popover.hide();
-          return;
-        }
-        isOpen = false;
-        container.classList.remove("open");
-        trigger.setAttribute("aria-expanded", "false");
-        searchTerm = "";
-        if (searchInputWrapper) searchInputWrapper.setValue("");
-        else if (searchInputEl) searchInputEl.value = "";
-        if (searchDebounceTimer) {
-          clearTimeout(searchDebounceTimer);
-          searchDebounceTimer = null;
-        }
-      }
-
-      function updatePosition() {
-        if (usePopover) return;
-        var rect = trigger.getBoundingClientRect();
-        var vh = window.innerHeight;
-        var below = vh - rect.bottom;
-        var above = rect.top;
-        if (below < 200 && above > below) {
-          content.className = contentBase + "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
-        } else {
-          content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
-        }
+        popover.hide();
       }
 
       if (!searchInputWrapper && searchInputEl) {
@@ -9532,41 +9379,14 @@
         });
       }
 
-      if (usePopover && popover) {
-        trigger.addEventListener("keydown", function (e) {
-          if (disabled) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (isOpen) popover.hide();
-            else popover.show();
-          }
-        });
-      } else {
-        trigger.addEventListener("click", function (e) {
+      trigger.addEventListener("keydown", function (e) {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
-          e.stopPropagation();
-          if (isOpen) closeDropdown();
-          else openDropdown();
-        });
-        trigger.addEventListener("keydown", function (e) {
-          if (disabled) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (isOpen) closeDropdown();
-            else openDropdown();
-          }
-          if (e.key === "Escape" && isOpen) {
-            e.preventDefault();
-            closeDropdown();
-          }
-        });
-        document.addEventListener("click", function (e) {
-          if (isOpen && !container.contains(e.target)) closeDropdown();
-        });
-        document.addEventListener("keydown", function (e) {
-          if (e.key === "Escape" && isOpen) closeDropdown();
-        });
-      }
+          if (isOpen) popover.hide();
+          else popover.show();
+        }
+      });
 
       container.updateValue = function (newVal) {
         setValue(newVal);
@@ -9663,6 +9483,14 @@
       return opt.label || opt.name || opt.display_name || opt.value;
     }
 
+    function getDep(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
     /**
      * Create a multiselect dropdown component
      * @param {Object} config
@@ -9693,6 +9521,11 @@
           ? config.values.slice()
           : [];
 
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("MultiSelect requires Popover");
+      }
+
       var container = document.createElement("div");
       container.className = "custom-multiselect relative w-full group";
       if (fieldId) container.setAttribute("data-field-id", fieldId);
@@ -9741,14 +9574,10 @@
       triggerWrapper.appendChild(trigger);
       container.appendChild(triggerWrapper);
 
-      var contentBase =
-        "custom-multiselect-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
-        "group-[.open]:opacity-100 group-[.open]:visible ";
-
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+      content.className = "custom-multiselect-content w-full  max-h-[200px] overflow-hidden flex flex-col";
 
       var optionsList = document.createElement("div");
       optionsList.className =
@@ -9849,47 +9678,68 @@
       buildOptionsList();
 
       content.appendChild(optionsList);
-      container.appendChild(content);
 
-      var isOpen = false;
+      var popover = Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          document
+            .querySelectorAll(".custom-select, .record-select, .custom-multiselect, .enum-select, .enum-multiselect, .record-multiselect")
+            .forEach(function (other) {
+              if (other !== container && other.popoverInstance) {
+                other.popoverInstance.hide();
+              }
+            });
+          trigger.setAttribute("aria-expanded", "true");
+          chevron.style.transform = "rotate(180deg)";
+          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;
+          }
+        },
+        onClose: function () {
+          trigger.setAttribute("aria-expanded", "false");
+          chevron.style.transform = "";
+        },
+      });
+      container.popoverInstance = popover;
 
       function openDropdown() {
         if (disabled) return;
-        document
-          .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open")
-          .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector(
-                "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button"
-              );
-              if (t) t.setAttribute("aria-expanded", "false");
-            }
-          });
-        isOpen = true;
-        container.classList.add("open");
-        trigger.setAttribute("aria-expanded", "true");
+        popover.show();
       }
 
       function closeDropdown() {
-        isOpen = false;
-        container.classList.remove("open");
-        trigger.setAttribute("aria-expanded", "false");
+        popover.hide();
       }
 
       function toggleDropdown() {
-        if (isOpen) closeDropdown();
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (isVisible) closeDropdown();
         else openDropdown();
       }
 
       trigger.addEventListener("click", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleDropdown();
-      });
+        if (disabled) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+      }, true);
 
       trigger.addEventListener("keydown", function (e) {
         if (disabled) return;
+        var isVisible = popover.element && popover.element.classList.contains("visible");
         switch (e.key) {
           case "Enter":
           case " ":
@@ -9898,14 +9748,14 @@
             break;
           case "ArrowDown":
             e.preventDefault();
-            if (!isOpen) openDropdown();
+            if (!isVisible) openDropdown();
             break;
           case "ArrowUp":
             e.preventDefault();
-            if (!isOpen) openDropdown();
+            if (!isVisible) openDropdown();
             break;
           case "Escape":
-            if (isOpen) {
+            if (isVisible) {
               e.preventDefault();
               closeDropdown();
             }
@@ -9913,13 +9763,6 @@
         }
       });
 
-      document.addEventListener("click", function (e) {
-        if (isOpen && !container.contains(e.target)) closeDropdown();
-      });
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && isOpen) closeDropdown();
-      });
-
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
         renderTriggerContent();
@@ -9938,7 +9781,8 @@
         disabled = !!isDisabled;
         trigger.disabled = disabled;
         trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
-        if (disabled && isOpen) closeDropdown();
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (disabled && isVisible) closeDropdown();
       };
 
       container.getValues = function () {
@@ -10036,6 +9880,14 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
+    function getDep(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
     /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
     function getClient() {
       if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -10104,8 +9956,10 @@
       var error = null;
       var searchQuery = "";
       var popover = null;
-      var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
-      var isOpen = false;
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("EnumMultiSelect requires Popover");
+      }
 
       var container = document.createElement("div");
       container.className = "enum-multiselect relative w-full group";
@@ -10207,13 +10061,7 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      var contentBase = "w-full min-w-[200px]";
-      if (!usePopover) {
-        contentBase += " absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
-      } else {
-        contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
-      }
-      content.className = contentBase;
+      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
       // Search input (using InputComponent like enum-select)
       var searchContainer = document.createElement("div");
@@ -10279,10 +10127,6 @@
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
-
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -10455,34 +10299,14 @@
 
       function openDropdown() {
         if (disabled) return;
-        if (popover) {
-          document
-            .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
-            .forEach(function (other) {
-              if (other !== container && other.popoverInstance) {
-                other.popoverInstance.hide();
-              }
-            });
-          popover.show();
-          trigger.setAttribute("aria-expanded", "true");
-          if (searchInput) {
-            setTimeout(function () {
-              searchInput.focus();
-            }, 50);
-          }
-          return;
-        }
         document
-          .querySelectorAll(".enum-multiselect.open, .enum-select.open")
+          .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
           .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector("button");
-              if (t) t.setAttribute("aria-expanded", "false");
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
             }
           });
-        isOpen = true;
-        container.classList.add("open");
+        popover.show();
         trigger.setAttribute("aria-expanded", "true");
         if (searchInput) {
           setTimeout(function () {
@@ -10492,12 +10316,7 @@
       }
 
       function closeDropdown() {
-        if (popover) {
-          popover.hide();
-        } else {
-          isOpen = false;
-          container.classList.remove("open");
-        }
+        popover.hide();
         trigger.setAttribute("aria-expanded", "false");
         highlightedIndex = -1;
         clearSearch();
@@ -10505,9 +10324,7 @@
       }
 
       function toggleDropdown() {
-        var isVisible = popover
-          ? popover.element && popover.element.classList.contains("visible")
-          : isOpen;
+        var isVisible = popover.element && popover.element.classList.contains("visible");
         if (isVisible) {
           closeDropdown();
         } else {
@@ -10587,10 +10404,7 @@
 
       // Initialize Popover
       function initializePopover() {
-        if (!usePopover) {
-          return;
-        }
-        popover = global.Popover.create({
+        popover = Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -10606,6 +10420,12 @@
           onOpen: function () {
             trigger.setAttribute("aria-expanded", "true");
             chevron.style.transform = "rotate(180deg)";
+            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;
+            }
           },
           bodyClassName: "p-0 overflow-hidden",
           panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -10613,13 +10433,6 @@
 
         // Store popover instance for cleanup
         container.popoverInstance = popover;
-        
-        // Set CSS variable for trigger width
-        var triggerWidth = trigger.offsetWidth;
-        if (popover.panel) {
-          popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
-          popover.panel.style.minWidth = triggerWidth + "px";
-        }
       }
 
       // Load options from SDK
@@ -10734,21 +10547,6 @@
       initializePopover();
       loadOptions();
 
-      if (!usePopover) {
-        trigger.addEventListener("click", function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          if (disabled) return;
-          toggleDropdown();
-        });
-        document.addEventListener("click", function (e) {
-          if (isOpen && !container.contains(e.target)) closeDropdown();
-        });
-        document.addEventListener("keydown", function (e) {
-          if (e.key === "Escape" && isOpen) closeDropdown();
-        });
-      }
-
       // Public API
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -10790,7 +10588,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && (isVisible || isOpen)) closeDropdown();
+        if (disabled && isVisible) closeDropdown();
       };
 
       container.reload = function () {
@@ -10840,7 +10638,14 @@
 
   (function (global) {
 
-    var Popover = global.Popover;
+    function getDep(name) {
+      if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
     var InputComponent = global.InputComponent;
     var Spinner = global.Spinner;
 
@@ -10853,7 +10658,7 @@
       role: { iconStr: "IconShield", color: "info" },
       iframe: { iconStr: "IconLayout", color: "neutral" },
       lead: { iconStr: "IconUser", color: "primary" },
-      opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
+      opportunity: { iconStr: "IconStar", color: "success" },
       call_log: { iconStr: "IconPhone", color: "info" },
       communication: { iconStr: "IconMessage", color: "primary" },
       history_field: { iconStr: "IconClock", color: "neutral" },
@@ -11013,19 +10818,13 @@
       var selectedRecords = [];
       var allRecords = [];
       var filteredRecords = [];
-      var isOpen = false;
       var searchTerm = "";
       var searchDebounceTimer = null;
-      var usePopover = Popover && typeof Popover.create === "function";
       var popover = null;
       var hasMoreRecords = true;
       var currentPage = 1;
       var isFetchingMore = false;
       var totalFetched = 0;
-      var contentBase = "record-multiselect-content min-w-[8rem] ";
-      if (!usePopover) {
-        contentBase += "absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible ";
-      }
 
       // Trigger wrapper + button
       var triggerWrapper = document.createElement("span");
@@ -11120,7 +10919,7 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = contentBase + (usePopover ? "max-h-[30vh] overflow-hidden flex flex-col" : "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0");
+      content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -11187,57 +10986,58 @@
       
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("RecordMultiSelect requires Popover");
       }
-
-      if (usePopover) {
-        popover = Popover.create({
-          trigger: trigger,
-          content: content,
-          placement: "bottom",
-          align: "start",
-          closeOnClickOutside: true,
-          bodyClassName: "p-0 overflow-hidden",
-          panelClassName: "max-h-[30vh] overflow-hidden",
-          onOpen: function () {
-            if (disabled) {
-              popover.hide();
-              return;
-            }
-            document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open").forEach(function (other) {
-              if (other !== container) {
-                other.classList.remove("open");
-                var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button, .record-multiselect-trigger");
-                if (t) t.setAttribute("aria-expanded", "false");
-              }
-            });
-            isOpen = true;
-            container.classList.add("open");
-            trigger.setAttribute("aria-expanded", "true");
-            searchTerm = "";
-            if (searchInputWrapper) searchInputWrapper.setValue("");
-            else if (searchInputEl) searchInputEl.value = "";
-            content.style.minWidth = trigger.offsetWidth + "px";
-            loadInitialAndRender();
-            setTimeout(function () {
-              if (searchInputEl) searchInputEl.focus();
-            }, 0);
-          },
-          onClose: function () {
-            isOpen = false;
-            container.classList.remove("open");
-            trigger.setAttribute("aria-expanded", "false");
-            searchTerm = "";
-            if (searchInputWrapper) searchInputWrapper.setValue("");
-            else if (searchInputEl) searchInputEl.value = "";
-            if (searchDebounceTimer) {
-              clearTimeout(searchDebounceTimer);
-              searchDebounceTimer = null;
+      popover = Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "max-h-[30vh] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open, .enum-select, .enum-multiselect").forEach(function (other) {
+            if (other !== container && other.popoverInstance) {
+              other.popoverInstance.hide();
             }
-          },
-        });
-      }
+          });
+          container.classList.add("open");
+          trigger.setAttribute("aria-expanded", "true");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.value = "";
+          var triggerWidthPx = trigger.offsetWidth + "px";
+          content.style.minWidth = triggerWidthPx;
+          content.style.width = triggerWidthPx;
+          if (popover.panel) {
+            popover.panel.style.width = triggerWidthPx;
+            popover.panel.style.minWidth = triggerWidthPx;
+          }
+          loadInitialAndRender();
+          setTimeout(function () {
+            if (searchInputEl) searchInputEl.focus();
+          }, 0);
+        },
+        onClose: function () {
+          container.classList.remove("open");
+          trigger.setAttribute("aria-expanded", "false");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.value = "";
+          if (searchDebounceTimer) {
+            clearTimeout(searchDebounceTimer);
+            searchDebounceTimer = null;
+          }
+        },
+      });
+      container.popoverInstance = popover;
 
       function isSelected(recordId) {
         return values.some(function (v) {
@@ -11642,66 +11442,6 @@
         }, 500);
       }
 
-      function openDropdown() {
-        if (disabled) return;
-        if (usePopover && popover) {
-          popover.show();
-          return;
-        }
-        document
-          .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open")
-          .forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector(
-                "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button, .record-multiselect-trigger"
-              );
-              if (t) t.setAttribute("aria-expanded", "false");
-            }
-          });
-        isOpen = true;
-        container.classList.add("open");
-        trigger.setAttribute("aria-expanded", "true");
-        searchTerm = "";
-        if (searchInputWrapper) searchInputWrapper.setValue("");
-        else if (searchInputEl) searchInputEl.value = "";
-        loadInitialAndRender();
-        setTimeout(function () {
-          if (searchInputEl) searchInputEl.focus();
-        }, 0);
-        updatePosition();
-      }
-
-      function closeDropdown() {
-        if (usePopover && popover) {
-          popover.hide();
-          return;
-        }
-        isOpen = false;
-        container.classList.remove("open");
-        trigger.setAttribute("aria-expanded", "false");
-        searchTerm = "";
-        if (searchInputWrapper) searchInputWrapper.setValue("");
-        else if (searchInputEl) searchInputEl.value = "";
-        if (searchDebounceTimer) {
-          clearTimeout(searchDebounceTimer);
-          searchDebounceTimer = null;
-        }
-      }
-
-      function updatePosition() {
-        if (usePopover) return;
-        var rect = trigger.getBoundingClientRect();
-        var vh = window.innerHeight;
-        var below = vh - rect.bottom;
-        var above = rect.top;
-        if (below < 200 && above > below) {
-          content.className = contentBase + "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
-        } else {
-          content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
-        }
-      }
-
       if (!searchInputWrapper && searchInputEl) {
         searchInputEl.addEventListener("input", function () {
           searchTerm = this.value.trim();
@@ -11718,41 +11458,19 @@
         });
       }
 
-      if (usePopover && popover) {
-        trigger.addEventListener("keydown", function (e) {
-          if (disabled) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (isOpen) popover.hide();
-            else popover.show();
-          }
-        });
-      } else {
-        trigger.addEventListener("click", function (e) {
+      trigger.addEventListener("keydown", function (e) {
+        if (disabled) return;
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
-          e.stopPropagation();
-          if (isOpen) closeDropdown();
-          else openDropdown();
-        });
-        trigger.addEventListener("keydown", function (e) {
-          if (disabled) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (isOpen) closeDropdown();
-            else openDropdown();
-          }
-          if (e.key === "Escape" && isOpen) {
-            e.preventDefault();
-            closeDropdown();
-          }
-        });
-        document.addEventListener("click", function (e) {
-          if (isOpen && !container.contains(e.target)) closeDropdown();
-        });
-        document.addEventListener("keydown", function (e) {
-          if (e.key === "Escape" && isOpen) closeDropdown();
-        });
-      }
+          if (isVisible) popover.hide();
+          else popover.show();
+        }
+        if (e.key === "Escape" && isVisible) {
+          e.preventDefault();
+          popover.hide();
+        }
+      });
 
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -11763,7 +11481,8 @@
         disabled = !!isDisabled;
         trigger.disabled = disabled;
         trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
-        if (disabled && isOpen) closeDropdown();
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (disabled && isVisible) popover.hide();
       };
 
       container.getValues = function () {
@@ -13596,12 +13315,12 @@
         if (periodColumn) periodColumn.scrollToSelected();
       }
 
+      // Trigger must be in DOM before Popover.create() so Popover can wrap it and insert its panel into the document.
+      container.appendChild(trigger);
+
       var Popover = getDep("Popover");
       if (!Popover || typeof Popover.create !== "function") {
-        container.appendChild(trigger);
-        container.updateValue = function (newVal) { value = typeof newVal === "string" ? newVal : ""; };
-        container.setDisabled = function (isDisabled) { trigger.disabled = !!isDisabled; };
-        return container;
+        throw new Error("TimePicker requires Popover");
       }
       var popover = Popover.create({
         trigger: trigger,
@@ -13622,8 +13341,6 @@
       });
       hidePopover = popover.hide;
 
-      container.appendChild(trigger);
-
       container.updateValue = function (newVal) {
         value = typeof newVal === "string" ? newVal : "";
         var p = parseValue(value);
@@ -14771,7 +14488,7 @@
             variant = "outline";
           }
           var btnClassName = join(
-            "!text-reg-12 my-2  flex-1 !px-0 !py-0",
+            "!text-reg-12 my-2  flex-1",
             cell.currentMonth ? "" : "text-typography-quaternary-text"
           );
           var btn = Button.create({
@@ -15916,15 +15633,13 @@
           e.stopPropagation();
           navigator.clipboard.writeText(fileUrl).then(
             function () {
-              if (global.FlowUI && global.FlowUI.renderAlerts) {
-                const ac = document.getElementById("alerts");
-                if (ac) global.FlowUI.renderAlerts(ac, ["Link copied"], "success");
+              if (global.FlowUI && global.FlowUI.showToast) {
+                global.FlowUI.showToast("Link copied", "success");
               }
             },
             function () {
-              if (global.FlowUI && global.FlowUI.renderAlerts) {
-                const ac = document.getElementById("alerts");
-                if (ac) global.FlowUI.renderAlerts(ac, ["Copy failed"], "error");
+              if (global.FlowUI && global.FlowUI.showToast) {
+                global.FlowUI.showToast("Copy failed", "error");
               }
             }
           );
@@ -16120,11 +15835,8 @@
       async function uploadFile(file) {
         const error = validateFile(file);
         if (error) {
-          if (global.FlowUI && global.FlowUI.renderAlerts) {
-            const alertsContainer = document.getElementById("alerts");
-            if (alertsContainer) {
-              global.FlowUI.renderAlerts(alertsContainer, [error], "error");
-            }
+          if (global.FlowUI && global.FlowUI.showToast) {
+            global.FlowUI.showToast(error, "error");
           }
           return;
         }
@@ -16152,15 +15864,8 @@
           uploadingFiles = uploadingFiles.filter((f) => f.file !== file);
           renderUploadingList();
           updateStatus();
-          if (global.FlowUI && global.FlowUI.renderAlerts) {
-            const alertsContainer = document.getElementById("alerts");
-            if (alertsContainer) {
-              global.FlowUI.renderAlerts(
-                alertsContainer,
-                [`Failed to upload "${file.name}": ${error.message}`],
-                "error"
-              );
-            }
+          if (global.FlowUI && global.FlowUI.showToast) {
+            global.FlowUI.showToast(`Failed to upload "${file.name}": ${error.message}`, "error");
           }
         }
       }
@@ -16173,11 +15878,8 @@
         // Check max files limit
         if (multiple && maxFiles && uploadedFiles.length + files.length > maxFiles) {
           const message = `You can only upload ${maxFiles} file${maxFiles !== 1 ? "s" : ""}`;
-          if (global.FlowUI && global.FlowUI.renderAlerts) {
-            const alertsContainer = document.getElementById("alerts");
-            if (alertsContainer) {
-              global.FlowUI.renderAlerts(alertsContainer, [message], "error");
-            }
+          if (global.FlowUI && global.FlowUI.showToast) {
+            global.FlowUI.showToast(message, "error");
           }
           input.value = "";
           return;
@@ -16824,7 +16526,7 @@
             },
           });
           document.dispatchEvent(event);
-          console.log("[Superleap-Flow] Library ready - v2.2.9");
+          console.log("[Superleap-Flow] Library ready - v2.3.4");
         }
 
         // Wait for DOM to be ready before dispatching event