@superleapai/flow-ui 2.5.1 → 2.5.2

package/dist/superleap-flow.js

@@ -1,12 +1,12 @@
 /**
- * @superleapai/flow-ui v2.2.9
+ * @superleapai/flow-ui v2.5.1
  * 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-25T15:52:26.090Z
  *
  * For documentation and examples, visit:
  * https://github.com/superleap/superleap-flow
@@ -15,7 +15,7 @@
   'use strict';
 
   // ============================================
-  // File 1/37: node_modules/superleap-sdk/superleap.js
+  // File 1/41: node_modules/superleap-sdk/superleap.js
   // ============================================
 
   /**
@@ -2642,7 +2642,7 @@
 
 
   // ============================================
-  // File 2/37: core/superleapClient.js
+  // File 2/41: core/superleapClient.js
   // ============================================
 
   /**
@@ -2783,11 +2783,23 @@
       return mergeConfig({}, DEFAULT_CONFIG);
     }
 
+    /**
+     * Return the current base URL (from merged config after init).
+     * Used by file-input and other components that build API URLs.
+     *
+     * @returns {string|null} baseUrl or null if not initialized
+     */
+    function getBaseUrl() {
+      if (_config && _config.baseUrl) return _config.baseUrl;
+      return null;
+    }
+
     var superleapClient = {
       init: init,
       getSdk: getSdk,
       isAvailable: isAvailable,
       getDefaultConfig: getDefaultConfig,
+      getBaseUrl: getBaseUrl,
     };
 
     if (global) {
@@ -2798,7 +2810,7 @@
 
 
   // ============================================
-  // File 3/37: core/bridge.js
+  // File 3/41: core/bridge.js
   // ============================================
 
   /**
@@ -3326,7 +3338,7 @@
 
 
   // ============================================
-  // File 4/37: core/crm.js
+  // File 4/41: core/crm.js
   // ============================================
 
   /**
@@ -3567,12 +3579,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 });
       }
     }
 
@@ -3668,7 +3681,7 @@
 
 
   // ============================================
-  // File 5/37: components/label.js
+  // File 5/41: components/label.js
   // ============================================
 
   /**
@@ -3785,7 +3798,7 @@
 
 
   // ============================================
-  // File 6/37: core/flow.js
+  // File 6/41: core/flow.js
   // ============================================
 
   /**
@@ -4037,6 +4050,48 @@
       return field;
     }
 
+    /**
+     * Create a rich text editor field
+     * @param {Object} config - Configuration object
+     * @param {string} config.label - Field label
+     * @param {string} config.fieldId - State key for this field
+     * @param {string} [config.placeholder] - Placeholder when empty
+     * @param {boolean} [config.required] - Whether field is required
+     * @param {string} [config.helpText] - Optional help text for tooltip
+     * @param {number} [config.minHeightPx] - Min height of editor area in pixels (default 400)
+     * @param {boolean} [config.disabled] - Whether editor is disabled
+     * @returns {HTMLElement} Field element
+     */
+    function createRichTextEditor(config) {
+      const { label, fieldId, placeholder, required = false, helpText = null, minHeightPx = 400, disabled = false } = config;
+
+      const field = createFieldWrapper(label, required, helpText);
+      field.setAttribute("data-field-id", fieldId);
+
+      if (getComponent("RichTextEditorComponent") && getComponent("RichTextEditorComponent").create) {
+        const currentValue = get(fieldId) || "";
+        const editorEl = getComponent("RichTextEditorComponent").create({
+          value: currentValue,
+          placeholder: placeholder || "",
+          minHeightPx,
+          disabled,
+          onChange: (html) => set(fieldId, html),
+        });
+        editorEl._fieldId = fieldId;
+        field.appendChild(editorEl);
+        return field;
+      }
+
+      const fallback = document.createElement("textarea");
+      fallback.className = "textarea min-h-[400px]";
+      fallback.placeholder = placeholder || `Enter ${label.toLowerCase()}`;
+      fallback.value = get(fieldId) || "";
+      fallback.disabled = disabled;
+      fallback.addEventListener("change", (e) => set(fieldId, e.target.value));
+      field.appendChild(fallback);
+      return field;
+    }
+
     /**
      * Create a select dropdown field (using custom select component)
      * @param {Object} config - Configuration object
@@ -4447,6 +4502,7 @@
         size,
         canClear,
         initialLimit,
+        initialFilter,
         helpText = null,
       } = config;
 
@@ -4466,6 +4522,7 @@
           size: size || "default",
           canClear: !!canClear,
           initialLimit,
+          initialFilter,
           onChange: (value, record) => {
             set(fieldId, value);
             if (onChange) onChange(value, record);
@@ -4515,6 +4572,7 @@
         variant,
         size,
         initialLimit,
+        initialFilter,
         displayFields,
         helpText = null,
       } = config;
@@ -4533,6 +4591,7 @@
           variant: variant || "default",
           size: size || "default",
           initialLimit,
+          initialFilter,
           displayFields: displayFields || [],
           onValuesChange: (values, records) => {
             set(fieldId, values);
@@ -5090,6 +5149,40 @@
       return field;
     }
 
+    /**
+     * Create a checkbox group field (multiselect-like: options array, value array, onValuesChange)
+     * @param {Object} config - { label, fieldId, options, required, helpText, variant, size, layout, disabled, onChange }
+     * @returns {HTMLElement} Field wrapper containing checkbox group
+     */
+    function createCheckboxGroup(config) {
+      const { label, fieldId, options = [], required = false, helpText = null, variant, size, layout = "vertical", disabled = false, onChange } = config;
+
+      const field = createFieldWrapper(label, required, helpText);
+      field.setAttribute("data-field-id", fieldId);
+
+      if (getComponent("CheckboxGroup") && getComponent("CheckboxGroup").create) {
+        const currentValues = get(fieldId) || [];
+        const groupEl = getComponent("CheckboxGroup").create({
+          fieldId,
+          options,
+          value: currentValues,
+          variant: variant || "default",
+          size: size || "default",
+          layout,
+          disabled,
+          onValuesChange: (values) => {
+            set(fieldId, values);
+            if (onChange) onChange(values);
+          },
+        });
+        groupEl._fieldId = fieldId;
+        field.appendChild(groupEl);
+        return field;
+      }
+
+      return field;
+    }
+
     // ============================================================================
     // STEPPER COMPONENT
     // ============================================================================
@@ -5121,40 +5214,36 @@
       });
     }
 
-    // ============================================================================
-    // 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"
+     * Create a Tabs component (list + triggers + content panels)
+     * @param {Object} config - { defaultValue?, value?, onChange?, tabs: [{ value, label, content }], size?, variant?, listClassName?, contentClassName? }
+     * @returns {HTMLElement} Tabs root element
      */
-    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 : "";
+    function createTabs(config) {
+      const Tabs = getComponent("Tabs");
+      if (Tabs && typeof Tabs.create === "function") {
+        return Tabs.create(config);
+      }
+      const fallback = document.createElement("div");
+      fallback.className = "tabs-root";
+      fallback.textContent = "Tabs component not loaded.";
+      return fallback;
+    }
 
-        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);
-        }
-      });
+    /**
+     * Create a Steps component (numbered step triggers + optional content panels)
+     * @param {Object} config - { steps: [{ id, label, content? }], defaultValue?, value?, onChange?, size?, variant?, listClassName?, contentClassName?, showContent? }
+     * @returns {HTMLElement} Steps root element
+     */
+    function createSteps(config) {
+      const Steps = getComponent("Steps");
+      if (Steps && typeof Steps.create === "function") {
+        return Steps.create(config);
+      }
+      const fallback = document.createElement("div");
+      fallback.className = "steps-root";
+      fallback.textContent = "Steps component not loaded.";
+      return fallback;
     }
 
     // ============================================================================
@@ -5319,6 +5408,34 @@
       return field;
     }
 
+    // ============================================================================
+    // ALERTS
+    // ============================================================================
+
+    /**
+     * Render multiple alert messages into a container
+     * @param {HTMLElement} container - Container to append alerts to
+     * @param {string[]} messages - Array of message strings
+     * @param {string} [variant='default'] - 'default' | 'error' | 'warning' | 'success' | 'info' | 'destructive'
+     */
+    function renderAlerts(container, messages, variant = "default") {
+      if (!container || !Array.isArray(messages)) return;
+      const Alert = getComponent("Alert");
+      if (Alert && typeof Alert.simple === "function") {
+        messages.forEach((msg) => {
+          const el = Alert.simple(msg, variant);
+          if (el) container.appendChild(el);
+        });
+      } else {
+        messages.forEach((msg) => {
+          const div = document.createElement("div");
+          div.className = "rounded border p-2 text-sm " + (variant === "error" ? "bg-red-50 border-red-200 text-red-800" : "bg-gray-50 border-gray-200");
+          div.textContent = msg;
+          container.appendChild(div);
+        });
+      }
+    }
+
     // ============================================================================
     // TOAST NOTIFICATIONS
     // ============================================================================
@@ -5455,6 +5572,7 @@
       // Form components
       createInput,
       createTextarea,
+      createRichTextEditor,
       createSelect,
       createTimePicker,
       createDateTimePicker,
@@ -5470,6 +5588,7 @@
       createCurrency,
       createPhoneInput,
       createCheckbox,
+      createCheckboxGroup,
 
       // Button (delegates to Button component when available; resolved at call time via getComponent)
       createButton: function (config) {
@@ -5490,10 +5609,12 @@
 
       // Stepper
       renderStepper,
+      createTabs,
+      createSteps,
 
-      // Alerts (now shows toast notifications)
+      // Alerts
+      renderAlerts,
       showToast,
-      renderAlerts, // Legacy support for static alerts
 
       // Table
       createDataTable,
@@ -5520,7 +5641,7 @@
 
 
   // ============================================
-  // File 7/37: components/toast.js
+  // File 7/41: components/toast.js
   // ============================================
 
   /**
@@ -5869,7 +5990,7 @@
 
 
   // ============================================
-  // File 8/37: components/alert.js
+  // File 8/41: components/alert.js
   // ============================================
 
   /**
@@ -6157,7 +6278,7 @@
 
 
   // ============================================
-  // File 9/37: components/button.js
+  // File 9/41: components/button.js
   // ============================================
 
   /**
@@ -6364,7 +6485,7 @@
 
 
   // ============================================
-  // File 10/37: components/spinner.js
+  // File 10/41: components/spinner.js
   // ============================================
 
   /**
@@ -6506,7 +6627,7 @@
 
 
   // ============================================
-  // File 11/37: components/badge.js
+  // File 11/41: components/badge.js
   // ============================================
 
   /**
@@ -6647,7 +6768,7 @@
 
 
   // ============================================
-  // File 12/37: components/avatar.js
+  // File 12/41: components/avatar.js
   // ============================================
 
   /**
@@ -6848,7 +6969,7 @@
 
 
   // ============================================
-  // File 13/37: components/icon.js
+  // File 13/41: components/icon.js
   // ============================================
 
   /**
@@ -6896,12 +7017,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 +
@@ -6929,6 +7050,40 @@
       /** Filled circle for "just color" mode (IconOrColor when only icon_color is set) */
       IconCircleFilled:
         '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>',
+
+      // Rich text editor / toolbar (Tabler Icons outline, stroke 2)
+      IconBold:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bold"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" /></svg>',
+      IconItalic:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-italic"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 5l6 0" /><path d="M7 19l6 0" /><path d="M14 5l-4 14" /></svg>',
+      IconUnderline:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-underline"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5v5a5 5 0 0 0 10 0v-5" /><path d="M5 19h14" /></svg>',
+      IconH1:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 18v-8l-2 2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+      IconH2:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+      IconH3:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 14a2 2 0 1 0 -2 -2" /><path d="M17 16a2 2 0 1 0 2 -2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+      IconList:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" /></svg>',
+      IconListNumbers:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 6h9" /><path d="M11 12h9" /><path d="M12 18h8" /><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /><path d="M6 10v-6l-2 2" /></svg>',
+      IconAlignLeft:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l10 0" /><path d="M4 18l14 0" /></svg>',
+      IconAlignCenter:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-center"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M8 12l8 0" /><path d="M6 18l12 0" /></svg>',
+      IconAlignRight:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M10 12l10 0" /><path d="M6 18l14 0" /></svg>',
+      IconCode:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 8l-4 4l4 4" /><path d="M17 8l4 4l-4 4" /><path d="M14 4l-4 16" /></svg>',
+      IconLink:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>',
+      IconPhoto:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>',
+      IconArrowBackUp:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-back-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14l-4 -4l4 -4" /><path d="M5 10h11a4 4 0 1 1 0 8h-1" /></svg>',
+      IconArrowForwardUp:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-forward-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 14l4 -4l-4 -4" /><path d="M19 10h-11a4 4 0 1 0 0 8h1" /></svg>',
     };
 
     function join() {
@@ -7054,7 +7209,7 @@
 
 
   // ============================================
-  // File 14/37: components/popover.js
+  // File 14/41: components/popover.js
   // ============================================
 
   /**
@@ -7077,6 +7232,7 @@
      * @param {Function} [config.onOpen] - Called when popover opens (before positioning)
      * @param {string} [config.bodyClassName] - Optional class for body wrapper (overrides default padding)
      * @param {string} [config.panelClassName] - Optional class to add to panel (e.g. for width)
+     * @param {boolean} [config.modal=false] - If true, lock body scroll and show backdrop; only popover and trigger are interactive
      * @returns {Object} Popover API {show, hide, destroy, element}
      */
     function create(config = {}) {
@@ -7091,6 +7247,7 @@
         onOpen = null,
         bodyClassName = "",
         panelClassName = "",
+        modal = true,
       } = config;
 
       const triggerEl =
@@ -7100,9 +7257,18 @@
         return { show: noop, hide: noop, destroy: noop, element: null };
       }
 
+      // Wrap trigger in a relative container for layout (full width); popover is portaled to body
+      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";
+        "fixed z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
       wrapper.setAttribute("aria-hidden", "true");
 
       const panel = document.createElement("div");
@@ -7126,7 +7292,11 @@
       const body = document.createElement("div");
       body.className =
         bodyClassName ||
-        "text-reg-14 text-typography-secondary-text leading-5 [&_p]:mb-2 [&_p:last-child]:mb-0";
+        "text-reg-14 text-typography-secondary-text leading-5 [&_p]:mb-2 [&_p:last-child]:mb-0 max-h-[90vh] overflow-y-auto overflow-x-hidden min-h-0";
+      body.style.maxHeight = "90vh";
+      body.style.overflowY = "auto";
+      body.style.overflowX = "hidden";
+      body.style.minHeight = "0";
       if (panelClassName) {
         panel.className = panel.className + " " + panelClassName;
       }
@@ -7138,57 +7308,126 @@
       panel.appendChild(body);
 
       wrapper.appendChild(panel);
+      document.body.appendChild(wrapper);
+
+      var backdropEl = null;
+      var resizeObserver = null;
+
+      function onBackdropWheel(e) {
+        e.preventDefault();
+      }
+
+      function applyModalOpen() {
+        if (!modal) return;
+        if (!backdropEl) {
+          backdropEl = document.createElement("div");
+          backdropEl.className =
+            "fixed inset-0 z-40 bg-transparent pointer-events-auto";
+          backdropEl.setAttribute("aria-hidden", "true");
+          backdropEl.addEventListener("click", function () {
+            hide();
+          });
+          backdropEl.addEventListener("wheel", onBackdropWheel, {
+            passive: false,
+          });
+        }
+        document.body.appendChild(backdropEl);
+        wrapper.style.zIndex = "999";
+      }
+
+      function applyModalClose() {
+        if (!modal) return;
+        if (backdropEl && backdropEl.parentNode) {
+          backdropEl.parentNode.removeChild(backdropEl);
+        }
+        wrapper.style.zIndex = "";
+      }
 
       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;
+        const viewportHeight =
+          window.innerHeight || document.documentElement.clientHeight;
+        const viewportWidth =
+          window.innerWidth || document.documentElement.clientWidth;
+        const spaceBelow = viewportHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const spaceRight = viewportWidth - triggerRect.right;
+        const spaceLeft = triggerRect.left;
+
+        // Flip placement when there is not enough space (prefer requested side, flip only when needed)
+        let effectivePlacement = placement;
+        if (
+          placement === "bottom" &&
+          spaceBelow < panelRect.height + gap &&
+          spaceAbove >= panelRect.height + gap
+        ) {
+          effectivePlacement = "top";
+        } else if (
+          placement === "top" &&
+          spaceAbove < panelRect.height + gap &&
+          spaceBelow >= panelRect.height + gap
+        ) {
+          effectivePlacement = "bottom";
+        } else if (
+          placement === "right" &&
+          spaceRight < panelRect.width + gap &&
+          spaceLeft >= panelRect.width + gap
+        ) {
+          effectivePlacement = "left";
+        } else if (
+          placement === "left" &&
+          spaceLeft < panelRect.width + gap &&
+          spaceRight >= panelRect.width + gap
+        ) {
+          effectivePlacement = "right";
+        }
 
-        // 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);
+        panel.setAttribute("data-side", effectivePlacement);
 
-        switch (placement) {
+        let top = 0;
+        let left = 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 (effectivePlacement) {
           case "bottom":
-            top = rect.bottom + gap;
-            left = rect.left + alignLeft;
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left + alignLeft;
             break;
           case "top":
-            top = rect.top - panelRect.height - gap;
-            left = rect.left + alignLeft;
+            top = triggerRect.top - panelRect.height - gap;
+            left = triggerRect.left + alignLeft;
             break;
           case "right":
-            top = rect.top + alignTop;
-            left = rect.right + gap;
+            top = triggerRect.top + alignTop;
+            left = triggerRect.right + gap;
             break;
           case "left":
-            top = rect.top + alignTop;
-            left = rect.left - panelRect.width - gap;
+            top = triggerRect.top + alignTop;
+            left = triggerRect.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.bottom + gap;
+            left = triggerRect.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;
       }
 
@@ -7197,46 +7436,68 @@
         wrapper.classList.add("invisible", "opacity-0", "pointer-events-none");
         wrapper.classList.remove("visible", "opacity-100", "pointer-events-auto");
         wrapper.setAttribute("aria-hidden", "true");
+        window.removeEventListener("scroll", onScrollOrResize, true);
+        window.removeEventListener("resize", onScrollOrResize);
+        if (resizeObserver && panel) {
+          resizeObserver.disconnect();
+          resizeObserver = null;
+        }
+        applyModalClose();
         if (onClose) onClose();
       }
 
+      function onScrollOrResize() {
+        if (wrapper.classList.contains("visible")) position();
+      }
+
       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 {
+        applyModalOpen();
+        requestAnimationFrame(function () {
           position();
-          wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
+          wrapper.classList.remove(
+            "invisible",
+            "opacity-0",
+            "pointer-events-none",
+          );
           wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
           wrapper.setAttribute("aria-hidden", "false");
+          window.addEventListener("scroll", onScrollOrResize, true);
+          window.addEventListener("resize", onScrollOrResize);
+          // Re-position when panel content size changes (e.g. async record list load in record-select)
+          if (typeof ResizeObserver !== "undefined" && !resizeObserver) {
+            resizeObserver = new ResizeObserver(function () {
+              if (wrapper.classList.contains("visible")) position();
+            });
+            resizeObserver.observe(panel);
+          }
           requestAnimationFrame(function () {
             requestAnimationFrame(function () {
               panel.setAttribute("data-state", "open");
             });
           });
-        }
+        });
       }
 
       function destroy() {
         hide();
+        applyModalClose();
+        if (resizeObserver && panel) {
+          resizeObserver.disconnect();
+          resizeObserver = null;
+        }
+        if (backdropEl && backdropEl.parentNode) {
+          backdropEl.parentNode.removeChild(backdropEl);
+        }
+        window.removeEventListener("scroll", onScrollOrResize, true);
+        window.removeEventListener("resize", onScrollOrResize);
         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);
         }
@@ -7279,6 +7540,8 @@
         show,
         hide,
         destroy,
+        /** Re-run positioning (e.g. after async content load). Call when panel size changes. */
+        updatePosition: position,
         setContent(newContent) {
           body.innerHTML = "";
           if (typeof newContent === "string") {
@@ -7300,7 +7563,7 @@
 
 
   // ============================================
-  // File 15/37: components/select.js
+  // File 15/41: components/select.js
   // ============================================
 
   /**
@@ -7356,6 +7619,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 +7656,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,15 +7760,11 @@
 
       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-[45vh] overflow-hidden flex flex-col";
 
       var optionsList = document.createElement("div");
       optionsList.className =
-        "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+        "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
 
       if (options.length === 0) {
         var noOpt = document.createElement("div");
@@ -7542,47 +7814,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-[45vh] 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 +7952,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 +7980,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 +8010,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 +8106,8 @@
           canClear && !!value && !disabled
         );
         updateClearButton();
-        if (disabled && isOpen) closeDropdown();
+        var isVisible = popover.element && popover.element.classList.contains("visible");
+        if (disabled && isVisible) closeDropdown();
       };
 
       return container;
@@ -7850,7 +8121,7 @@
 
 
   // ============================================
-  // File 16/37: components/enum-select.js
+  // File 16/41: components/enum-select.js
   // ============================================
 
   /**
@@ -7926,6 +8197,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 +8268,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 +8355,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-[45vh] overflow-hidden flex flex-col";
 
       // Search input (using InputComponent like phone-input)
       var searchContainer = document.createElement("div");
@@ -8141,15 +8416,11 @@
       // Options list
       var optionsList = document.createElement("div");
       optionsList.className =
-        "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+        "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
-
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -8272,37 +8543,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 +8561,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 +8569,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 +8680,7 @@
 
       // Initialize Popover
       function initializePopover() {
-        if (!usePopover) {
-          return;
-        }
-        popover = global.Popover.create({
+        popover = Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -8458,6 +8696,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 +8709,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 +8828,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 +8872,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && (isVisible || isOpen)) closeDropdown();
+        if (disabled && isVisible) closeDropdown();
       };
 
       container.reload = function () {
@@ -8682,13 +8904,13 @@
 
 
   // ============================================
-  // File 17/37: components/record-select.js
+  // File 17/41: components/record-select.js
   // ============================================
 
   /**
    * 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.
@@ -8696,20 +8918,31 @@
 
   (function (global) {
 
-    var Popover = global.Popover;
-    var InputComponent = global.InputComponent;
-    var Spinner = global.Spinner;
-
-    /** When objectSlug === USERS, show Vivid Avatar (name-based color) instead of static icon */
-    var STANDARD_OBJECT_SLUGS_USERS = "user";
-
-    /** Object slug -> Icon component iconStr + color (Tabler icon names). Used when objectSchema.properties.icon_data not provided. */
-    var OBJECT_SLUG_TO_ICON = {
-      team: { iconStr: "IconUsers", color: "primary" },
+    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];
+    }
+
+    var Popover = getDep("Popover");
+    var InputComponent = getDep("InputComponent");
+    var Spinner = getDep("Spinner");
+
+    /** When objectSlug === USERS, show Vivid Avatar (name-based color) instead of static icon */
+    var STANDARD_OBJECT_SLUGS_USERS = "user";
+
+    /** Object slug -> Icon component iconStr + color (Tabler icon names). Used when objectSchema.properties.icon_data not provided. */
+    var OBJECT_SLUG_TO_ICON = {
+      team: { iconStr: "IconUsers", color: "primary" },
       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" },
@@ -8720,7 +8953,7 @@
       '<svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
     var X_SVG =
       '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></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>';
 
@@ -8735,7 +8968,8 @@
           "border-error-border hover:border-error-border-hover focus:border-1/2 focus:border-error-border-hover",
         warning:
           "border-warning-border hover:border-warning-border-hover focus:border-1/2 focus:border-warning-border-hover",
-        borderless: "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+        borderless:
+          "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
         inline:
           "focus:border-transparent border border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray hover:border-transparent",
       };
@@ -8744,7 +8978,9 @@
         large: "px-12 py-8",
         small: "px-8 py-4",
       };
-      var placeholderClass = placeholder ? " text-typography-quaternary-text" : "";
+      var placeholderClass = placeholder
+        ? " text-typography-quaternary-text"
+        : "";
       var disabledClass = disabled
         ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
         : "";
@@ -8800,15 +9036,27 @@
     function getObjectIconInfo(slug, objectSchema) {
       var color = "neutral";
       var iconStr = "IconDatabase";
-      if (objectSchema && objectSchema.properties && objectSchema.properties.icon_data) {
+      if (
+        objectSchema &&
+        objectSchema.properties &&
+        objectSchema.properties.icon_data
+      ) {
         var iconData = objectSchema.properties.icon_data;
-        if (typeof iconData.color === "string" && iconData.color) color = iconData.color;
-        if (typeof iconData.icon === "string" && iconData.icon) iconStr = iconData.icon;
+        if (typeof iconData.color === "string" && iconData.color)
+          color = iconData.color;
+        if (typeof iconData.icon === "string" && iconData.icon)
+          iconStr = iconData.icon;
       }
-      if (!objectSchema || !objectSchema.properties || !objectSchema.properties.icon_data || !objectSchema.properties.icon_data.icon) {
+      if (
+        !objectSchema ||
+        !objectSchema.properties ||
+        !objectSchema.properties.icon_data ||
+        !objectSchema.properties.icon_data.icon
+      ) {
         if (OBJECT_SLUG_TO_ICON[slug]) {
           iconStr = OBJECT_SLUG_TO_ICON[slug].iconStr;
-          if (OBJECT_SLUG_TO_ICON[slug].color) color = OBJECT_SLUG_TO_ICON[slug].color;
+          if (OBJECT_SLUG_TO_ICON[slug].color)
+            color = OBJECT_SLUG_TO_ICON[slug].color;
         } else {
           iconStr = "IconDatabase";
           color = "neutral";
@@ -8831,6 +9079,7 @@
      * @param {string} [config.size] - 'default' | 'large' | 'small'
      * @param {boolean} [config.canClear] - Show clear button when value is set
      * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
+     * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
      * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { svg?, color? } used for static icon (not used for user; user shows Vivid Avatar)
      * @returns {HTMLElement} Record select container element
      */
@@ -8839,12 +9088,14 @@
       var objectSlug = config.objectSlug;
       var objectSchema = config.objectSchema || null;
       var placeholder = config.placeholder || "Select a record";
-      var searchPlaceholder = config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
+      var searchPlaceholder =
+        config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
       var onChange = config.onChange;
       var variant = config.variant || "default";
       var size = config.size || "default";
       var canClear = !!config.canClear;
       var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
+      var initialFilter = config.initialFilter || null; // Can be array, object, or function returning either
 
       var disabled = config.disabled === true;
       var value =
@@ -8856,6 +9107,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 +9125,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");
@@ -8891,7 +9143,7 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
       trigger.disabled = disabled;
       trigger.setAttribute("aria-haspopup", "listbox");
@@ -8900,7 +9152,8 @@
       trigger.classList.add("record-select-trigger");
 
       var triggerContent = document.createElement("div");
-      triggerContent.className = "record-select-trigger-content flex items-center gap-8 flex-1 min-w-0";
+      triggerContent.className =
+        "record-select-trigger-content flex items-center gap-8 flex-1 min-w-0";
 
       var triggerIcon = document.createElement("span");
       triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
@@ -8943,7 +9196,9 @@
       // 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.setAttribute("data-field-id", fieldId);
+      content.className =
+        "record-select-content  max-h-[45vh] overflow-hidden flex flex-col";
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -8974,12 +9229,12 @@
       } else {
         var fallbackWrapper = document.createElement("div");
         fallbackWrapper.className = "flex items-center gap-8 px-12";
-        
+
         var searchIconSpan = document.createElement("span");
         searchIconSpan.className = "shrink-0 text-typography-tertiary-text";
         searchIconSpan.innerHTML = SEARCH_ICON;
         fallbackWrapper.appendChild(searchIconSpan);
-        
+
         var searchInput = document.createElement("input");
         searchInput.type = "text";
         searchInput.className =
@@ -8993,76 +9248,83 @@
       content.appendChild(searchWrap);
 
       var optionsList = document.createElement("div");
-      optionsList.className = "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
-      
+      optionsList.className =
+        "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
+
       // Add scroll listener for infinite scroll
       optionsList.addEventListener("scroll", function () {
         if (isFetchingMore || !hasMoreRecords) return;
         var scrollHeight = optionsList.scrollHeight;
         var scrollTop = optionsList.scrollTop;
         var clientHeight = optionsList.clientHeight;
-        
+
         // Trigger load more when scrolled to bottom (with 50px threshold)
         if (scrollTop + clientHeight >= scrollHeight - 50) {
           loadMoreRecords();
         }
       });
-      
-      content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
+      content.appendChild(optionsList);
 
-      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: "min-w-[var(--trigger-width)] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          isOpen = true;
+          container.classList.add("open");
+          trigger.setAttribute("aria-expanded", "true");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.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;
+          }
+          loadInitialAndRender();
+          setTimeout(function () {
+            if (searchInputEl) searchInputEl.focus();
+          }, 0);
+          // Let consumers (e.g. BANT Questions "Add Contact") inject content into the dropdown
+          try {
+            var doc =
+              global.document ||
+              (typeof document !== "undefined" ? document : null);
+            if (doc && typeof global.CustomEvent !== "undefined") {
+              doc.dispatchEvent(
+                new global.CustomEvent("record-select:opened", {
+                  detail: { fieldId: fieldId, content: content },
+                }),
+              );
             }
-          },
-        });
-      }
+          } catch (e) {}
+        },
+        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";
+      if (clearBtn)
+        clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
       function setValue(newVal) {
         value = newVal !== undefined && newVal !== null ? newVal : "";
@@ -9076,16 +9338,18 @@
 
       function updateTriggerDisplay() {
         if (selectedRecord) {
-          triggerText.textContent = selectedRecord.name || selectedRecord.label || value;
+          triggerText.textContent =
+            selectedRecord.name || selectedRecord.label || value;
           trigger.classList.remove("placeholder");
           trigger.className = triggerClasses(
             variant,
             size,
             disabled,
             false,
-            canClear && !!value && !disabled
+            canClear && !!value && !disabled,
           );
-          triggerIcon.className = "record-select-trigger-icon shrink-0 flex items-center justify-center size-20 rounded-4 overflow-hidden";
+          triggerIcon.className =
+            "record-select-trigger-icon shrink-0 flex items-center justify-center size-20 rounded-4 overflow-hidden";
           triggerIcon.innerHTML = "";
           if (objectSlug === STANDARD_OBJECT_SLUGS_USERS) {
             var Avatar = getAvatar();
@@ -9097,7 +9361,9 @@
               });
               triggerIcon.appendChild(vividEl);
             } else {
-              renderStaticIconPlaceholder(selectedRecord.name || selectedRecord.label);
+              renderStaticIconPlaceholder(
+                selectedRecord.name || selectedRecord.label,
+              );
             }
           } else {
             renderStaticObjectIcon();
@@ -9110,12 +9376,13 @@
             size,
             disabled,
             true,
-            canClear && !!value && !disabled
+            canClear && !!value && !disabled,
           );
           triggerIcon.className = "record-select-trigger-icon shrink-0 hidden";
           triggerIcon.innerHTML = "";
         }
-        if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+        if (clearBtn)
+          clearBtn.style.display = canClear && value && !disabled ? "" : "none";
       }
 
       function renderStaticObjectIcon() {
@@ -9152,18 +9419,39 @@
         var fields = ["id", "name"];
         var actualLimit = limit || initialLimit;
         var offset = page ? (page - 1) * actualLimit : 0;
-        
+
         try {
           if (model && typeof model.select === "function") {
             var q = model.select.apply(model, fields);
+            var filters = [];
+            var resolvedFilter =
+              typeof initialFilter === "function"
+                ? initialFilter()
+                : initialFilter;
+            console.log(
+              "[RecordSelect] initialFilter:",
+              resolvedFilter,
+              "| search:",
+              search,
+            );
+            if (resolvedFilter) {
+              filters = filters.concat(
+                Array.isArray(resolvedFilter) ? resolvedFilter : [resolvedFilter],
+              );
+            }
             if (search && search.trim()) {
-              q = q.filterBy({
+              filters.push({
                 or: [
                   { field: "name", operator: "contains", value: search.trim() },
                   { field: "id", operator: "eq", value: search.trim() },
                 ],
               });
             }
+            if (filters.length > 0) {
+              q = q.filterBy(
+                filters.length === 1 ? filters[0] : { and: filters },
+              );
+            }
             var orderBy = ["name"];
             if (objectSlug === "account") orderBy.push("-ParentId");
             return q
@@ -9226,7 +9514,12 @@
             updateTriggerDisplay();
           })
           .catch(function () {
-            selectedRecord = { id: value, value: value, name: value, label: value };
+            selectedRecord = {
+              id: value,
+              value: value,
+              name: value,
+              label: value,
+            };
             updateTriggerDisplay();
           });
       }
@@ -9237,7 +9530,9 @@
         loadWrap.className =
           "flex flex-row items-center justify-center gap-8 py-12 px-12 w-full text-reg-12 text-typography-quaternary-text record-select-loading";
         if (Spinner && typeof Spinner.create === "function") {
-          loadWrap.appendChild(Spinner.create({ size: "small", text: "Loading..." }));
+          loadWrap.appendChild(
+            Spinner.create({ size: "small", text: "Loading..." }),
+          );
         } else {
           var loadText = document.createElement("span");
           loadText.textContent = "Loading...";
@@ -9245,12 +9540,12 @@
         }
         optionsList.appendChild(loadWrap);
       }
-      
+
       function showLoadingMore() {
         // Remove existing loading more indicator
         var existing = optionsList.querySelector(".record-select-loading-more");
         if (existing) existing.remove();
-        
+
         var loadWrap = document.createElement("div");
         loadWrap.className =
           "flex flex-row items-center justify-center gap-8 py-8 px-12 w-full text-reg-12 text-typography-quaternary-text record-select-loading-more";
@@ -9263,9 +9558,11 @@
         }
         optionsList.appendChild(loadWrap);
       }
-      
+
       function removeLoadingMore() {
-        var loadingMore = optionsList.querySelector(".record-select-loading-more");
+        var loadingMore = optionsList.querySelector(
+          ".record-select-loading-more",
+        );
         if (loadingMore) loadingMore.remove();
       }
 
@@ -9284,13 +9581,15 @@
         existingOptions.forEach(function (opt) {
           opt.remove();
         });
-        
+
         // Remove old loading/empty states
-        var oldStates = optionsList.querySelectorAll(".record-select-loading, .record-select-empty");
+        var oldStates = optionsList.querySelectorAll(
+          ".record-select-loading, .record-select-empty",
+        );
         oldStates.forEach(function (el) {
           el.remove();
         });
-        
+
         filteredRecords.forEach(function (rec) {
           var optionValue = rec.id || rec.value;
           var optionLabel = rec.name || rec.label || rec.value;
@@ -9305,7 +9604,7 @@
             "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
             isSelected
               ? "bg-primary-surface hover:!bg-primary-surface-hover"
-              : ""
+              : "",
           );
 
           var optContent = document.createElement("span");
@@ -9363,70 +9662,93 @@
 
           optionsList.appendChild(option);
         });
-        
+
         // Add loading more indicator at the bottom if fetching
         if (isFetchingMore) {
           showLoadingMore();
         }
       }
 
+      function scheduleUpdatePosition() {
+        if (popover && typeof popover.updatePosition === "function") {
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              popover.updatePosition();
+            });
+          });
+        }
+      }
+
       function loadInitialAndRender() {
         showLoading();
         currentPage = 1;
         hasMoreRecords = true;
         totalFetched = 0;
-        
-        fetchRecords(searchTerm, initialLimit, 1).then(function (result) {
-          allRecords = result.records;
-          filteredRecords = result.records;
-          hasMoreRecords = result.hasMore;
-          totalFetched = result.records.length;
-          currentPage = 1;
-          
-          if (value && !result.records.some(function (r) { return (r.id || r.value) === value; })) {
-            loadSelectedRecord();
-          } else if (value && result.records.length) {
-            var sel = result.records.find(function (r) { return (r.id || r.value) === value; });
-            if (sel) selectedRecord = sel;
-            updateTriggerDisplay();
-          }
-          if (filteredRecords.length === 0) {
-            showEmpty(searchTerm ? "No results found" : "No records available");
-          } else {
-            renderOptions();
-          }
-        }).catch(function () {
-          showEmpty("Failed to load records");
-          hasMoreRecords = false;
-        });
+
+        fetchRecords(searchTerm, initialLimit, 1)
+          .then(function (result) {
+            allRecords = result.records;
+            filteredRecords = result.records;
+            hasMoreRecords = result.hasMore;
+            totalFetched = result.records.length;
+            currentPage = 1;
+
+            if (
+              value &&
+              !result.records.some(function (r) {
+                return (r.id || r.value) === value;
+              })
+            ) {
+              loadSelectedRecord();
+            } else if (value && result.records.length) {
+              var sel = result.records.find(function (r) {
+                return (r.id || r.value) === value;
+              });
+              if (sel) selectedRecord = sel;
+              updateTriggerDisplay();
+            }
+            if (filteredRecords.length === 0) {
+              showEmpty(searchTerm ? "No results found" : "No records available");
+            } else {
+              renderOptions();
+            }
+            scheduleUpdatePosition();
+          })
+          .catch(function () {
+            showEmpty("Failed to load records");
+            hasMoreRecords = false;
+            scheduleUpdatePosition();
+          });
       }
-      
+
       function loadMoreRecords() {
         if (isFetchingMore || !hasMoreRecords) return;
-        
+
         isFetchingMore = true;
         currentPage += 1;
         showLoadingMore();
-        
-        fetchRecords(searchTerm, initialLimit, currentPage).then(function (result) {
-          isFetchingMore = false;
-          removeLoadingMore();
-          
-          if (result.records.length > 0) {
-            allRecords = allRecords.concat(result.records);
-            filteredRecords = filteredRecords.concat(result.records);
-            totalFetched += result.records.length;
-            hasMoreRecords = result.hasMore;
-            renderOptions();
-          } else {
+
+        fetchRecords(searchTerm, initialLimit, currentPage)
+          .then(function (result) {
+            isFetchingMore = false;
+            removeLoadingMore();
+
+            if (result.records.length > 0) {
+              allRecords = allRecords.concat(result.records);
+              filteredRecords = filteredRecords.concat(result.records);
+              totalFetched += result.records.length;
+              hasMoreRecords = result.hasMore;
+              renderOptions();
+            } else {
+              hasMoreRecords = false;
+            }
+          })
+          .catch(function (err) {
+            console.error("[RecordSelect] loadMoreRecords error:", err);
+            isFetchingMore = false;
+            removeLoadingMore();
             hasMoreRecords = false;
-          }
-        }).catch(function (err) {
-          console.error("[RecordSelect] loadMoreRecords error:", err);
-          isFetchingMore = false;
-          removeLoadingMore();
-          hasMoreRecords = false;
-        });
+          });
       }
 
       function debouncedSearch() {
@@ -9437,83 +9759,31 @@
           currentPage = 1;
           hasMoreRecords = true;
           totalFetched = 0;
-          
-          fetchRecords(searchTerm, initialLimit, 1).then(function (result) {
-            allRecords = result.records;
-            filteredRecords = result.records;
-            hasMoreRecords = result.hasMore;
-            totalFetched = result.records.length;
-            
-            if (result.records.length === 0) {
-              showEmpty("No results found");
-            } else {
-              renderOptions();
-            }
-          }).catch(function () {
-            showEmpty("Search failed");
-            hasMoreRecords = false;
-          });
-        }, 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();
-      }
+          fetchRecords(searchTerm, initialLimit, 1)
+            .then(function (result) {
+              allRecords = result.records;
+              filteredRecords = result.records;
+              hasMoreRecords = result.hasMore;
+              totalFetched = result.records.length;
 
-      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;
-        }
+              if (result.records.length === 0) {
+                showEmpty("No results found");
+              } else {
+                renderOptions();
+              }
+              scheduleUpdatePosition();
+            })
+            .catch(function () {
+              showEmpty("Search failed");
+              hasMoreRecords = false;
+              scheduleUpdatePosition();
+            });
+        }, 500);
       }
 
-      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";
-        }
+      function closeDropdown() {
+        popover.hide();
       }
 
       if (!searchInputWrapper && searchInputEl) {
@@ -9532,41 +9802,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);
@@ -9580,7 +9823,7 @@
           size,
           disabled,
           !value,
-          canClear && !!value && !disabled
+          canClear && !!value && !disabled,
         );
         if (disabled && isOpen) closeDropdown();
       };
@@ -9599,7 +9842,7 @@
 
 
   // ============================================
-  // File 18/37: components/multiselect.js
+  // File 18/41: components/multiselect.js
   // ============================================
 
   /**
@@ -9663,6 +9906,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 +9944,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,18 +9997,14 @@
       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-[45vh] overflow-hidden flex flex-col";
 
       var optionsList = document.createElement("div");
       optionsList.className =
-        "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+        "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
 
       function isSelected(optionValue) {
         return values.some(function (v) {
@@ -9849,47 +10101,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-[45vh] 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 +10171,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 +10186,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 +10204,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 () {
@@ -9956,7 +10223,7 @@
 
 
   // ============================================
-  // File 19/37: components/enum-multiselect.js
+  // File 19/41: components/enum-multiselect.js
   // ============================================
 
   /**
@@ -10036,6 +10303,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 +10379,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 +10484,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-[45vh] overflow-hidden flex flex-col";
 
       // Search input (using InputComponent like enum-select)
       var searchContainer = document.createElement("div");
@@ -10274,15 +10545,11 @@
       // Options list
       var optionsList = document.createElement("div");
       optionsList.className =
-        "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+        "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
-      if (!usePopover) {
-        container.appendChild(content);
-      }
-
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -10455,34 +10722,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 +10739,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 +10747,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 +10827,7 @@
 
       // Initialize Popover
       function initializePopover() {
-        if (!usePopover) {
-          return;
-        }
-        popover = global.Popover.create({
+        popover = Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -10606,6 +10843,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 +10856,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 +10970,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 +11011,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && (isVisible || isOpen)) closeDropdown();
+        if (disabled && isVisible) closeDropdown();
       };
 
       container.reload = function () {
@@ -10826,7 +11047,7 @@
 
 
   // ============================================
-  // File 20/37: components/record-multiselect.js
+  // File 20/41: components/record-multiselect.js
   // ============================================
 
   /**
@@ -10840,7 +11061,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 +11081,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" },
@@ -10975,6 +11203,7 @@
      * @param {string} [config.size] - 'default' | 'large' | 'small'
      * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
      * @param {Array<string>} [config.displayFields] - Fields to display as secondary info (e.g. ["email", "phone"])
+     * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
      * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { icon?, color? } used for static icon (not used for user; user shows Vivid Avatar)
      * @returns {HTMLElement} Record multiselect container element
      */
@@ -10989,6 +11218,7 @@
       var variant = config.variant || "default";
       var size = config.size || "default";
       var initialLimit = config.initialLimit != null ? config.initialLimit : 50;
+      var initialFilter = config.initialFilter || null; // Can be array, object, or function returning either
       var displayFields = config.displayFields || [];
 
       var disabled = config.disabled === true;
@@ -11013,19 +11243,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 +11344,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-[45vh] overflow-hidden flex flex-col";
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -11170,7 +11394,7 @@
       content.appendChild(searchWrap);
 
       var optionsList = document.createElement("div");
-      optionsList.className = "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
+      optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
       
       // Add scroll listener for infinite scroll
       optionsList.addEventListener("scroll", function () {
@@ -11187,57 +11411,52 @@
       
       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, .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;
-            }
-          },
-        });
+      var Popover = getDep("Popover");
+      if (!Popover || typeof Popover.create !== "function") {
+        throw new Error("RecordMultiSelect requires Popover");
       }
+      popover = Popover.create({
+        trigger: trigger,
+        content: content,
+        placement: "bottom",
+        align: "start",
+        closeOnClickOutside: true,
+        bodyClassName: "p-0 overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
+        onOpen: function () {
+          if (disabled) {
+            popover.hide();
+            return;
+          }
+          container.classList.add("open");
+          trigger.setAttribute("aria-expanded", "true");
+          searchTerm = "";
+          if (searchInputWrapper) searchInputWrapper.setValue("");
+          else if (searchInputEl) searchInputEl.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;
+          }
+          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) {
@@ -11297,14 +11516,23 @@
         try {
           if (model && typeof model.select === "function") {
             var q = model.select.apply(model, fields);
+            var filters = [];
+            var resolvedFilter = typeof initialFilter === 'function' ? initialFilter() : initialFilter;
+            console.log('[RecordMultiselect] initialFilter:', resolvedFilter, '| search:', search);
+            if (resolvedFilter) {
+              filters = filters.concat(Array.isArray(resolvedFilter) ? resolvedFilter : [resolvedFilter]);
+            }
             if (search && search.trim()) {
-              q = q.filterBy({
+              filters.push({
                 or: [
                   { field: "name", operator: "contains", value: search.trim() },
                   { field: "id", operator: "eq", value: search.trim() },
                 ],
               });
             }
+            if (filters.length > 0) {
+              q = q.filterBy(filters.length === 1 ? filters[0] : { and: filters });
+            }
             var orderBy = ["name"];
             if (objectSlug === "account") orderBy.push("-ParentId");
             return q
@@ -11563,6 +11791,16 @@
         }
       }
 
+      function scheduleUpdatePosition() {
+        if (popover && typeof popover.updatePosition === "function") {
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              popover.updatePosition();
+            });
+          });
+        }
+      }
+
       function loadInitialAndRender() {
         showLoading();
         currentPage = 1;
@@ -11581,9 +11819,11 @@
           } else {
             renderOptions();
           }
+          scheduleUpdatePosition();
         }).catch(function () {
           showEmpty("Failed to load records");
           hasMoreRecords = false;
+          scheduleUpdatePosition();
         });
       }
       
@@ -11635,73 +11875,15 @@
             } else {
               renderOptions();
             }
+            scheduleUpdatePosition();
           }).catch(function () {
             showEmpty("Search failed");
             hasMoreRecords = false;
+            scheduleUpdatePosition();
           });
         }, 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 +11900,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 +11923,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 () {
@@ -11788,7 +11949,7 @@
 
 
   // ============================================
-  // File 21/37: components/input.js
+  // File 21/41: components/input.js
   // ============================================
 
   /**
@@ -11815,7 +11976,7 @@
 
     var WRAPPER_CLASS = {
       base:
-        "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
+        "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out 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 group-has-[:disabled]:[&_input]:cursor-not-allowed group-has-[:disabled]:[&_input]:text-typography-quaternary-text",
       default:
         "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
       error:
@@ -11890,13 +12051,16 @@
       var isPassword = type === "password";
 
       var wrapper = document.createElement("div");
-      wrapper.className = join(
-        WRAPPER_CLASS.base,
-        WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
-        inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
-        disabled ? WRAPPER_CLASS.disabled : "",
-        config.className || ""
-      );
+      var sizeClass = inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault;
+      function applyWrapperClasses() {
+        wrapper.className = join(
+          WRAPPER_CLASS.base,
+          disabled ? WRAPPER_CLASS.disabled : (WRAPPER_CLASS[variant] || WRAPPER_CLASS.default),
+          sizeClass,
+          config.className || ""
+        );
+      }
+      applyWrapperClasses();
       wrapper.setAttribute("data-input-variant", variant);
 
       if (config.prefixNode) {
@@ -12026,19 +12190,12 @@
       wrapper.setVariant = function (v) {
         variant = v;
         wrapper.setAttribute("data-input-variant", v);
-        wrapper.className = join(
-          WRAPPER_CLASS.base,
-          WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
-          inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
-          disabled ? WRAPPER_CLASS.disabled : "",
-          config.className || ""
-        );
+        applyWrapperClasses();
       };
       wrapper.setDisabled = function (d) {
         disabled = !!d;
         input.disabled = disabled;
-        wrapper.classList.toggle("cursor-not-allowed", disabled);
-        wrapper.classList.toggle("opacity-60", disabled);
+        applyWrapperClasses();
       };
 
       return wrapper;
@@ -12053,7 +12210,7 @@
 
 
   // ============================================
-  // File 22/37: components/currency.js
+  // File 22/41: components/currency.js
   // ============================================
 
   /**
@@ -12083,7 +12240,7 @@
       sizeLarge: "",
       sizeSmall: "",
       disabled:
-        "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+        "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
     };
 
     // Currency type label: fit-content, separator (border-r) on type only, full height
@@ -12270,7 +12427,12 @@
       wrapper.setDisabled = function (d) {
         disabled = !!d;
         input.disabled = disabled;
-        wrapper.classList.toggle("cursor-not-allowed", disabled);
+        wrapper.className = join(
+          WRAPPER_CLASS.base,
+          WRAPPER_CLASS[variant] != null ? WRAPPER_CLASS[variant] : WRAPPER_CLASS.default,
+          disabled ? WRAPPER_CLASS.disabled : "",
+          config.className || ""
+        );
       };
 
       return wrapper;
@@ -12286,7 +12448,7 @@
 
 
   // ============================================
-  // File 23/37: components/textarea.js
+  // File 23/41: components/textarea.js
   // ============================================
 
   /**
@@ -12311,7 +12473,7 @@
       warning:
         "min-h-[80px] border-warning-base hover:border-warning-base focus:border-warning-base",
       disabled:
-        "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+        "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
     };
 
     function join() {
@@ -12338,67 +12500,407 @@
      * @returns {HTMLTextAreaElement} textarea element (with getValue/setValue/setVariant/setDisabled attached)
      */
     function create(config) {
-      var variant = config.variant || "default";
+      var variant = config.variant || "default";
+      var disabled = !!config.disabled;
+
+      var textarea = document.createElement("textarea");
+      textarea.autocomplete = "off";
+      if (config.placeholder != null) textarea.placeholder = config.placeholder;
+      if (config.value != null) textarea.value = config.value;
+      if (config.name) textarea.name = config.name;
+      if (config.id) textarea.id = config.id;
+      if (config.rows != null) textarea.rows = config.rows;
+      if (config.maxLength != null) textarea.maxLength = config.maxLength;
+      textarea.disabled = disabled;
+      textarea.readOnly = !!config.readOnly;
+
+      textarea.className = join(
+        TEXTAREA_CLASS.base,
+        TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+        disabled ? TEXTAREA_CLASS.disabled : "",
+        config.className || ""
+      );
+      textarea.setAttribute("data-textarea-variant", variant);
+
+      if (config.onChange) textarea.addEventListener("change", config.onChange);
+      if (config.onInput) textarea.addEventListener("input", config.onInput);
+      if (config.onFocus) textarea.addEventListener("focus", config.onFocus);
+      if (config.onBlur) textarea.addEventListener("blur", config.onBlur);
+
+      textarea.getInput = function () {
+        return textarea;
+      };
+      textarea.setValue = function (v) {
+        textarea.value = v;
+      };
+      textarea.getValue = function () {
+        return textarea.value;
+      };
+      textarea.setVariant = function (v) {
+        variant = v;
+        textarea.setAttribute("data-textarea-variant", v);
+        textarea.className = join(
+          TEXTAREA_CLASS.base,
+          TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+          disabled ? TEXTAREA_CLASS.disabled : "",
+          config.className || ""
+        );
+      };
+      textarea.setDisabled = function (d) {
+        disabled = !!d;
+        textarea.disabled = disabled;
+        textarea.className = join(
+          TEXTAREA_CLASS.base,
+          TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
+          disabled ? TEXTAREA_CLASS.disabled : "",
+          config.className || ""
+        );
+      };
+
+      return textarea;
+    }
+
+    global.TextareaComponent = {
+      create: create,
+    };
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 24/41: components/richtext-editor.js
+  // ============================================
+
+  /**
+   * Rich Text Editor Component (vanilla JS)
+   * Toolbar + contenteditable area with formatting (bold, italic, underline, headings, lists, alignment, link, image, code block, undo/redo).
+   * Styling matches design: rounded-12, toolbar bg-fill-tertiary-fill-light-gray, content area with min-height.
+   */
+
+  (function (global) {
+
+    var RICH_TEXT_CONTENT_STYLES =
+      ".rich-text-editor-content ul{list-style-type:disc;padding-left:1.5em;margin:0.5em 0}" +
+      ".rich-text-editor-content ol{list-style-type:decimal;padding-left:1.5em;margin:0.5em 0}" +
+      ".rich-text-editor-content li{margin:0.25em 0}" +
+      ".rich-text-editor-content li p{margin:0}" +
+      ".rich-text-editor-content h1{font-size:1.5rem;font-weight:700;line-height:1.3;margin:0.75em 0 0.5em}" +
+      ".rich-text-editor-content h2{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+      ".rich-text-editor-content h3{font-size:1.125rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+      ".rich-text-editor-content p{margin:0.5em 0}" +
+      ".rich-text-editor-content a{color:var(--color-primary-500);text-decoration:underline;cursor:pointer}" +
+      ".rich-text-editor-content pre{background:var(--color-neutral-100);border-radius:var(--sizes-size-8);padding:0.75em 1em;margin:0.5em 0;overflow-x:auto}" +
+      ".rich-text-editor-content code{font-family:ui-monospace,monospace;font-size:0.875em}" +
+      ".rich-text-editor-content img{max-width:100%;height:auto;margin:0.5em 0}" +
+      ".rich-text-editor-content blockquote{border-left:3px solid var(--color-neutral-200);padding-left:1em;margin:0.5em 0;color:var(--color-neutral-600)}" +
+      ".rich-text-editor-content hr{border:none;border-top:1px solid var(--color-neutral-150);margin:1em 0}" +
+      ".rich-text-editor-content .ProseMirror,.rich-text-editor-content [contenteditable]{outline:none}";
+
+    function join() {
+      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];
+    }
+
+    /** Get Tabler icon element (16px) from Icon component for toolbar. */
+    function getTablerIcon(iconName) {
+      var Icon = getDep("Icon");
+      if (!Icon || !Icon.iconMap || !Icon.iconMap[iconName]) return null;
+      var svgStr = Icon.iconMap[iconName];
+      var s16 = svgStr.replace(/width="24"/, 'width="16"').replace(/height="24"/, 'height="16"').replace(/width="20"/, 'width="16"').replace(/height="20"/, 'height="16"');
+      var span = document.createElement("span");
+      span.className = "flex items-center justify-center size-16";
+      span.innerHTML = s16;
+      return span;
+    }
+
+    function createToolbarButton(opts) {
+      var Button = getDep("Button");
+      if (!Button || typeof Button.create !== "function") {
+        throw new Error("RichTextEditor requires Button");
+      }
+      var icon = opts.iconStr ? getTablerIcon(opts.iconStr) : null;
+      return Button.create({
+        variant: "outline",
+        size: "default",
+        title: opts.title,
+        icon: icon,
+        onClick: opts.onClick,
+        disabled: opts.disabled,
+      });
+    }
+
+    function createSeparator() {
+      var sep = document.createElement("div");
+      sep.className = "w-px h-16 bg-border-primary mx-4";
+      sep.setAttribute("aria-hidden", "true");
+      return sep;
+    }
+
+    /**
+     * Create a rich text editor
+     * @param {Object} config
+     * @param {string} [config.value] - Initial HTML content
+     * @param {string} [config.placeholder] - Placeholder when empty
+     * @param {number} [config.minHeightPx] - Min height of editor area (default 400)
+     * @param {boolean} [config.disabled]
+     * @param {Function} [config.onChange] - (html: string) => void
+     * @returns {HTMLElement} Wrapper element with getValue/setValue/setDisabled/getInput
+     */
+    function create(config) {
+      var value = config.value != null ? String(config.value) : "";
+      var placeholder = config.placeholder != null ? config.placeholder : "";
+      var minHeightPx = config.minHeightPx != null ? config.minHeightPx : 400;
       var disabled = !!config.disabled;
+      var onChange = config.onChange;
 
-      var textarea = document.createElement("textarea");
-      textarea.autocomplete = "off";
-      if (config.placeholder != null) textarea.placeholder = config.placeholder;
-      if (config.value != null) textarea.value = config.value;
-      if (config.name) textarea.name = config.name;
-      if (config.id) textarea.id = config.id;
-      if (config.rows != null) textarea.rows = config.rows;
-      if (config.maxLength != null) textarea.maxLength = config.maxLength;
-      textarea.disabled = disabled;
-      textarea.readOnly = !!config.readOnly;
+      var wrapper = document.createElement("div");
+      wrapper.className = "w-full rounded-12 border border-borderColor-border-primary shadow-soft-2x-small";
 
-      textarea.className = join(
-        TEXTAREA_CLASS.base,
-        TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
-        disabled ? TEXTAREA_CLASS.disabled : "",
-        config.className || ""
+      var styleEl = document.createElement("style");
+      styleEl.textContent = RICH_TEXT_CONTENT_STYLES;
+      wrapper.appendChild(styleEl);
+
+      var toolbar = document.createElement("div");
+      toolbar.className =
+        "flex flex-wrap gap-4 rounded-t-12 border-borderColor-border-primary bg-fill-tertiary-fill-light-gray p-6";
+      toolbar.setAttribute("role", "toolbar");
+
+      var editorEl = document.createElement("div");
+      editorEl.contentEditable = !disabled;
+      editorEl.className = join(
+        "rich-text-editor-content max-w-none rounded-b-12 border-t border-borderColor-border-primary p-8 text-reg-14 text-typography-primary-text"
       );
-      textarea.setAttribute("data-textarea-variant", variant);
+      editorEl.style.minHeight = minHeightPx + "px";
+      if (value) editorEl.innerHTML = value;
+      editorEl.setAttribute("data-placeholder", placeholder);
 
-      if (config.onChange) textarea.addEventListener("change", config.onChange);
-      if (config.onInput) textarea.addEventListener("input", config.onInput);
-      if (config.onFocus) textarea.addEventListener("focus", config.onFocus);
-      if (config.onBlur) textarea.addEventListener("blur", config.onBlur);
+      function isEmpty() {
+        var text = (editorEl.textContent || "").trim();
+        if (text) return false;
+        var html = (editorEl.innerHTML || "").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "");
+        return !html.trim();
+      }
+      function updatePlaceholder() {
+        if (placeholder && isEmpty()) {
+          editorEl.classList.add("empty");
+          editorEl.setAttribute("data-placeholder", placeholder);
+        } else {
+          editorEl.classList.remove("empty");
+          editorEl.removeAttribute("data-placeholder");
+        }
+      }
+      updatePlaceholder();
 
-      textarea.getInput = function () {
-        return textarea;
-      };
-      textarea.setValue = function (v) {
-        textarea.value = v;
+      function getHtml() {
+        return editorEl.innerHTML;
+      }
+      function setHtml(html) {
+        editorEl.innerHTML = html || "";
+        updatePlaceholder();
+      }
+      function notifyChange() {
+        if (typeof onChange === "function") onChange(getHtml());
+      }
+
+      function isActive(cmd, val) {
+        try {
+          return document.queryCommandState(cmd);
+        } catch (e) {
+          return false;
+        }
+      }
+      function blockTag() {
+        var sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) return null;
+        var node = sel.anchorNode;
+        while (node && node !== editorEl) {
+          if (node.nodeType === 1) {
+            var n = node.nodeName.toLowerCase();
+            if (["h1", "h2", "h3", "p", "div", "pre", "blockquote"].indexOf(n) !== -1) return n;
+          }
+          node = node.parentNode;
+        }
+        return null;
+      }
+      function isAlignment(align) {
+        try {
+          if (align === "left") return document.queryCommandState("justifyLeft");
+          if (align === "center") return document.queryCommandState("justifyCenter");
+          if (align === "right") return document.queryCommandState("justifyRight");
+        } catch (e) {}
+        return false;
+      }
+
+      function refreshToolbar() {
+        toolbar.querySelectorAll("button").forEach(function (btn) {
+          var cmd = btn.getAttribute("data-command");
+          var val = btn.getAttribute("data-value");
+          if (!cmd) return;
+          var active = false;
+          if (cmd === "formatBlock") active = blockTag() === val;
+          else if (cmd === "justifyLeft" && val === "left") active = isAlignment("left");
+          else if (cmd === "justifyCenter" && val === "center") active = isAlignment("center");
+          else if (cmd === "justifyRight" && val === "right") active = isAlignment("right");
+          else active = isActive(cmd);
+          btn.classList.toggle("bg-primary-base", active);
+          btn.classList.toggle("border-primary-base", active);
+          btn.classList.toggle("text-typography-invert-text", active);
+          btn.classList.toggle("bg-fill-quarternary-fill-white", !active);
+          btn.classList.toggle("border-border-primary", !active);
+          btn.classList.toggle("text-typography-primary-text", !active);
+        });
+      }
+
+      function exec(cmd, value) {
+        editorEl.focus();
+        document.execCommand(cmd, false, value != null ? value : null);
+        refreshToolbar();
+        notifyChange();
+      }
+
+      function insertCodeBlock() {
+        editorEl.focus();
+        var sel = window.getSelection();
+        if (sel && sel.rangeCount) {
+          var range = sel.getRangeAt(0);
+          var pre = document.createElement("pre");
+          var code = document.createElement("code");
+          code.textContent = "code here";
+          pre.appendChild(code);
+          range.insertNode(pre);
+          range.setStart(code, 0);
+          range.setEnd(code, 0);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+        refreshToolbar();
+        notifyChange();
+      }
+
+      function addLink() {
+        var url = window.prompt("Enter the URL:", "https://");
+        if (url) {
+          exec("createLink", url);
+        }
+      }
+
+      function addImage() {
+        var input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = function (e) {
+          var file = e.target && e.target.files && e.target.files[0];
+          if (file) {
+            var reader = new FileReader();
+            reader.onload = function (ev) {
+              var src = ev.target && ev.target.result;
+              if (src) {
+                editorEl.focus();
+                document.execCommand("insertImage", false, src);
+                notifyChange();
+              }
+            };
+            reader.readAsDataURL(file);
+          }
+        };
+        input.click();
+      }
+
+      function undo() {
+        editorEl.focus();
+        document.execCommand("undo", false, null);
+        refreshToolbar();
+        notifyChange();
+      }
+      function redo() {
+        editorEl.focus();
+        document.execCommand("redo", false, null);
+        refreshToolbar();
+        notifyChange();
+      }
+
+      function addBtn(iconStr, title, onClick, dataCommand, dataValue) {
+        var btn = createToolbarButton({
+          iconStr: iconStr,
+          title: title,
+          onClick: function () {
+            if (disabled) return;
+            onClick();
+          }});
+        if (dataCommand) btn.setAttribute("data-command", dataCommand);
+        if (dataValue != null) btn.setAttribute("data-value", dataValue);
+        toolbar.appendChild(btn);
+      }
+
+      addBtn("IconBold", "Bold (Ctrl+B)", function () { exec("bold"); }, "bold");
+      addBtn("IconItalic", "Italic (Ctrl+I)", function () { exec("italic"); }, "italic");
+      addBtn("IconUnderline", "Underline (Ctrl+U)", function () { exec("underline"); }, "underline");
+      toolbar.appendChild(createSeparator());
+      addBtn("IconH1", "Heading 1", function () { exec("formatBlock", "h1"); }, "formatBlock", "h1");
+      addBtn("IconH2", "Heading 2", function () { exec("formatBlock", "h2"); }, "formatBlock", "h2");
+      addBtn("IconH3", "Heading 3", function () { exec("formatBlock", "h3"); }, "formatBlock", "h3");
+      toolbar.appendChild(createSeparator());
+      addBtn("IconList", "Bullet List", function () { exec("insertUnorderedList"); }, "insertUnorderedList");
+      addBtn("IconListNumbers", "Ordered List", function () { exec("insertOrderedList"); }, "insertOrderedList");
+      toolbar.appendChild(createSeparator());
+      addBtn("IconAlignLeft", "Align Left", function () { exec("justifyLeft"); }, "justifyLeft", "left");
+      addBtn("IconAlignCenter", "Align Center", function () { exec("justifyCenter"); }, "justifyCenter", "center");
+      addBtn("IconAlignRight", "Align Right", function () { exec("justifyRight"); }, "justifyRight", "right");
+      toolbar.appendChild(createSeparator());
+      addBtn("IconCode", "Code Block", insertCodeBlock, "formatBlock", "pre");
+      addBtn("IconLink", "Add Link", addLink, "link");
+      addBtn("IconPhoto", "Insert Image", addImage);
+      toolbar.appendChild(createSeparator());
+      addBtn("IconArrowBackUp", "Undo", undo);
+      addBtn("IconArrowForwardUp", "Redo", redo);
+
+      editorEl.addEventListener("input", function () {
+        updatePlaceholder();
+        refreshToolbar();
+        notifyChange();
+      });
+      editorEl.addEventListener("keyup", refreshToolbar);
+      editorEl.addEventListener("mouseup", refreshToolbar);
+      editorEl.addEventListener("focus", refreshToolbar);
+
+      if (placeholder) {
+        var placeholderStyles = document.createElement("style");
+        placeholderStyles.textContent =
+          ".rich-text-editor-content.empty:before{content:attr(data-placeholder);color:var(--color-neutral-400);pointer-events:none}";
+        wrapper.appendChild(placeholderStyles);
+      }
+
+      wrapper.appendChild(toolbar);
+      wrapper.appendChild(editorEl);
+
+      wrapper.getInput = function () {
+        return editorEl;
       };
-      textarea.getValue = function () {
-        return textarea.value;
+      wrapper.getValue = function () {
+        return getHtml();
       };
-      textarea.setVariant = function (v) {
-        variant = v;
-        textarea.setAttribute("data-textarea-variant", v);
-        textarea.className = join(
-          TEXTAREA_CLASS.base,
-          TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
-          disabled ? TEXTAREA_CLASS.disabled : "",
-          config.className || ""
-        );
+      wrapper.setValue = function (v) {
+        setHtml(v);
       };
-      textarea.setDisabled = function (d) {
+      wrapper.setDisabled = function (d) {
         disabled = !!d;
-        textarea.disabled = disabled;
-        textarea.className = join(
-          TEXTAREA_CLASS.base,
-          TEXTAREA_CLASS[variant] || TEXTAREA_CLASS.default,
-          disabled ? TEXTAREA_CLASS.disabled : "",
-          config.className || ""
-        );
+        editorEl.contentEditable = !disabled;
+        toolbar.querySelectorAll("button").forEach(function (b) {
+          b.disabled = disabled;
+        });
       };
 
-      return textarea;
+      return wrapper;
     }
 
-    global.TextareaComponent = {
+    global.RichTextEditorComponent = {
       create: create,
     };
   })(typeof window !== "undefined" ? window : undefined);
@@ -12406,7 +12908,7 @@
 
 
   // ============================================
-  // File 24/37: components/checkbox.js
+  // File 25/41: components/checkbox.js
   // ============================================
 
   /**
@@ -12445,10 +12947,18 @@
     };
 
     var CHECKBOX_BASE_CLASS =
-      "flex items-center justify-center rounded-2 border-1/2 border-borderColor-border-primary bg-fill-quarternary-fill-white p-4 transition-all hover:border-primary-base hover:shadow-primary-focused disabled:cursor-not-allowed disabled:border-borderColor-border-primary disabled:opacity-50 disabled:hover:shadow-none";
+      "flex items-center justify-center rounded-2 border-1/2 border-borderColor-border-primary bg-fill-quarternary-fill-white p-4 transition-all";
+
+    var CHECKBOX_ACTIVE_CLASS =
+      "hover:border-primary-base hover:shadow-primary-focused cursor-pointer";
+
+    var CHECKBOX_DISABLED_CLASS =
+      "cursor-not-allowed opacity-50";
 
     var CHECKBOX_CHECKED_CLASS =
-      "data-checked:border-transparent data-checked:bg-primary-base data-checked:hover:border-primary-base data-checked:hover:shadow-primary-focused data-checked:disabled:border-borderColor-border-primary";
+      "data-checked:border-transparent data-checked:bg-primary-base";
+    var CHECKBOX_CHECKED_ACTIVE_CLASS =
+      "data-checked:hover:border-primary-base data-checked:hover:shadow-primary-focused";
 
     var LABEL_BASE_CLASS =
       "cursor-pointer pb-0 text-reg-12 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
@@ -12512,12 +13022,16 @@
 
       // Custom checkbox visual
       var checkboxBox = document.createElement("div");
-      checkboxBox.className = join(
-        CHECKBOX_BASE_CLASS,
-        CHECKBOX_CHECKED_CLASS,
-        CHECKBOX_SIZES[size] || CHECKBOX_SIZES.default,
-        "cursor-pointer"
-      );
+      function applyCheckboxBoxClasses() {
+        var sizeClass = CHECKBOX_SIZES[size] || CHECKBOX_SIZES.default;
+        checkboxBox.className = join(
+          CHECKBOX_BASE_CLASS,
+          disabled ? CHECKBOX_DISABLED_CLASS : join(CHECKBOX_ACTIVE_CLASS, CHECKBOX_CHECKED_ACTIVE_CLASS),
+          CHECKBOX_CHECKED_CLASS,
+          sizeClass
+        );
+      }
+      applyCheckboxBoxClasses();
       checkboxBox.setAttribute("role", "checkbox");
       checkboxBox.setAttribute("tabindex", disabled ? "-1" : "0");
       checkboxBox.setAttribute("aria-checked", indeterminate ? "mixed" : checked ? "true" : "false");
@@ -12634,6 +13148,7 @@
         } else {
           checkboxBox.removeAttribute("aria-disabled");
         }
+        applyCheckboxBoxClasses();
         updateCheckedState();
       };
 
@@ -12666,7 +13181,210 @@
 
 
   // ============================================
-  // File 25/37: components/radio-group.js
+  // File 26/41: components/checkbox-group.js
+  // ============================================
+
+  /**
+   * CheckboxGroup Component (vanilla JS)
+   * Multi-select via checkboxes; same API as MultiSelect (options, value array, onValuesChange).
+   * Uses input.js-style variants and sizes for the group wrapper.
+   */
+
+  (function (global) {
+
+    // Wrapper classes aligned with input.js variants
+    var WRAPPER_CLASS = {
+      base:
+        "group flex flex-col border-1/2 border-border-primary rounded-4 text-typography-primary-text w-full transition-all ease-in-out 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",
+      default:
+        "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+      error:
+        "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+      warning:
+        "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+      success:
+        "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+      borderless:
+        "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      inline:
+        "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus-within:border-transparent focus:bg-fill-tertiary-fill-light-gray focus-within:bg-fill-tertiary-fill-light-gray",
+      sizeDefault: "px-12 py-6 gap-6",
+      sizeLarge: "px-12 py-8 gap-8",
+      sizeSmall: "px-12 py-4 gap-4",
+      disabled:
+        "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+    };
+
+    function join() {
+      return Array.prototype.filter.call(arguments, Boolean).join(" ");
+    }
+
+    function getOptionValue(opt) {
+      return opt.value !== undefined && opt.value !== null
+        ? opt.value
+        : opt.slug || opt.id;
+    }
+
+    function getOptionLabel(opt) {
+      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 checkbox group component (multiselect-like: multiple values, options array)
+     * @param {Object} config
+     * @param {string} [config.fieldId] - Field ID for state management
+     * @param {Array} config.options - Array of { value, label } or { slug, display_name }
+     * @param {Array} [config.value] - Current selected values (array)
+     * @param {Function} config.onValuesChange - Change handler (values: string[])
+     * @param {boolean} [config.disabled] - Whether all checkboxes are disabled
+     * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+     * @param {string} [config.size] - 'default' | 'large' | 'small'
+     * @param {string} [config.layout] - 'vertical' | 'horizontal'
+     * @param {string} [config.className] - Extra class on wrapper
+     * @returns {HTMLElement} CheckboxGroup container element
+     */
+    function createCheckboxGroup(config) {
+      var fieldId = config.fieldId;
+      var options = config.options || [];
+      var onValuesChange = config.onValuesChange;
+      var variant = config.variant || "default";
+      var size = config.size || "default";
+      var disabled = config.disabled === true;
+      var layout = config.layout || "vertical";
+      var className = config.className || "";
+
+      var values = Array.isArray(config.value)
+        ? config.value.slice()
+        : Array.isArray(config.values)
+          ? config.values.slice()
+          : [];
+
+      var Checkbox = getDep("Checkbox");
+      if (!Checkbox || typeof Checkbox.create !== "function") {
+        throw new Error("CheckboxGroup requires the Checkbox component. Load checkbox.js before checkbox-group.js.");
+      }
+
+      var container = document.createElement("div");
+      container.setAttribute("role", "group");
+      container.setAttribute("aria-label", config.ariaLabel || "Checkbox group");
+      if (fieldId) container.setAttribute("data-field-id", fieldId);
+
+      var sizeClass = size === "large" ? WRAPPER_CLASS.sizeLarge : size === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault;
+      function applyWrapperClasses() {
+        container.className = join(
+          WRAPPER_CLASS.base,
+          disabled ? WRAPPER_CLASS.disabled : (WRAPPER_CLASS[variant] || WRAPPER_CLASS.default),
+          sizeClass,
+          layout === "horizontal" ? "flex-row flex-wrap" : "flex-col",
+          "custom-checkbox-group",
+          className
+        );
+      }
+      applyWrapperClasses();
+      container.setAttribute("data-checkbox-group-variant", variant);
+
+      function isSelected(optionValue) {
+        return values.some(function (v) {
+          return v === optionValue || String(v) === String(optionValue);
+        });
+      }
+
+      var optionsContainer = document.createElement("div");
+      optionsContainer.className = join(
+        "flex gap-8",
+        layout === "horizontal" ? "flex-row flex-wrap" : "flex-col"
+      );
+
+      function buildOptions() {
+        optionsContainer.innerHTML = "";
+        if (options.length === 0) {
+          var empty = document.createElement("div");
+          empty.className = "!text-reg-13 text-typography-quaternary-text py-4";
+          empty.textContent = "No options available";
+          optionsContainer.appendChild(empty);
+          return;
+        }
+
+        options.forEach(function (opt, index) {
+          var optionValue = getOptionValue(opt);
+          var optionLabel = getOptionLabel(opt);
+          var optionDisabled = disabled || !!opt.disabled;
+          var checked = isSelected(optionValue);
+
+          var cb = Checkbox.create({
+            id: (fieldId || "cbg") + "-" + index,
+            name: fieldId ? fieldId + "[]" : "checkbox-group-" + index,
+            checked: checked,
+            disabled: optionDisabled,
+            label: optionLabel,
+            align: "left",
+            size: size === "large" ? "large" : size === "small" ? "small" : "default",
+            onChange: function (isChecked) {
+              if (optionDisabled) return;
+              if (isChecked) {
+                if (!values.some(function (v) { return v === optionValue || String(v) === String(optionValue); })) {
+                  values.push(optionValue);
+                }
+              } else {
+                var idx = values.findIndex(function (v) {
+                  return v === optionValue || String(v) === String(optionValue);
+                });
+                if (idx >= 0) values.splice(idx, 1);
+              }
+              if (onValuesChange) onValuesChange(values.slice());
+            },
+          });
+          optionsContainer.appendChild(cb);
+        });
+      }
+
+      buildOptions();
+      container.appendChild(optionsContainer);
+
+      container.updateValues = function (newValues) {
+        values = Array.isArray(newValues) ? newValues.slice() : [];
+        buildOptions();
+      };
+
+      container.setDisabled = function (isDisabled) {
+        disabled = !!isDisabled;
+        applyWrapperClasses();
+        var wrappers = optionsContainer.querySelectorAll(":scope > div");
+        for (var i = 0; i < wrappers.length; i++) {
+          if (typeof wrappers[i].setDisabled === "function") wrappers[i].setDisabled(disabled);
+        }
+      };
+
+      container.setVariant = function (v) {
+        variant = v;
+        container.setAttribute("data-checkbox-group-variant", v);
+        applyWrapperClasses();
+      };
+
+      container.getValues = function () {
+        return values.slice();
+      };
+
+      return container;
+    }
+
+    global.CheckboxGroup = {
+      create: createCheckboxGroup,
+    };
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 27/41: components/radio-group.js
   // ============================================
 
   /**
@@ -13077,7 +13795,7 @@
 
 
   // ============================================
-  // File 26/37: components/enumeration.js
+  // File 28/41: components/enumeration.js
   // ============================================
 
   /**
@@ -13089,7 +13807,7 @@
   (function (global) {
 
     var BASE_CLASS =
-      "flex items-center border rounded-4 text-typography-primary-text gap-4 !text-reg-13";
+      "flex items-center border-1/2 rounded-4 text-typography-primary-text gap-4 !text-reg-13";
 
     var VARIANTS = {
       default:
@@ -13113,7 +13831,7 @@
     };
 
     var DISABLED_CLASS =
-      "pointer-events-none !cursor-not-allowed opacity-50";
+      "pointer-events-none !cursor-not-allowed opacity-50 bg-fill-tertiary-fill-light-gray";
     var READONLY_CLASS = "pointer-events-none";
 
     var ITEM_BASE_CLASS =
@@ -13178,14 +13896,17 @@
       var children = opts.children;
 
       var wrapper = document.createElement("div");
-      wrapper.className = join(
-        BASE_CLASS,
-        VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
-        SIZES[size] != null ? SIZES[size] : SIZES.default,
-        disabled ? DISABLED_CLASS : "",
-        readOnly ? READONLY_CLASS : "",
-        className
-      );
+      function applyWrapperClasses() {
+        wrapper.className = join(
+          BASE_CLASS,
+          VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
+          SIZES[size] != null ? SIZES[size] : SIZES.default,
+          disabled ? DISABLED_CLASS : "",
+          readOnly ? READONLY_CLASS : "",
+          className
+        );
+      }
+      applyWrapperClasses();
       wrapper.setAttribute("data-enumeration-variant", variant);
 
       var count =
@@ -13255,6 +13976,22 @@
         }
       }
 
+      wrapper.setDisabled = function (d) {
+        disabled = d === true;
+        for (var j = 0; j < itemElements.length; j++) {
+          itemElements[j].setAttribute("tabindex", disabled || readOnly ? "-1" : "0");
+        }
+        applyWrapperClasses();
+      };
+
+      wrapper.setReadOnly = function (r) {
+        readOnly = r === true;
+        for (var j = 0; j < itemElements.length; j++) {
+          itemElements[j].setAttribute("tabindex", disabled || readOnly ? "-1" : "0");
+        }
+        applyWrapperClasses();
+      };
+
       return wrapper;
     }
 
@@ -13296,7 +14033,7 @@
 
 
   // ============================================
-  // File 27/37: components/time-picker.js
+  // File 29/41: components/time-picker.js
   // ============================================
 
   /**
@@ -13596,12 +14333,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 +14359,6 @@
       });
       hidePopover = popover.hide;
 
-      container.appendChild(trigger);
-
       container.updateValue = function (newVal) {
         value = typeof newVal === "string" ? newVal : "";
         var p = parseValue(value);
@@ -13659,7 +14394,7 @@
 
 
   // ============================================
-  // File 28/37: components/duration/duration-utils.js
+  // File 30/41: components/duration/duration-utils.js
   // ============================================
 
   /**
@@ -13829,7 +14564,7 @@
 
 
   // ============================================
-  // File 29/37: components/duration/duration-constants.js
+  // File 31/41: components/duration/duration-constants.js
   // ============================================
 
   /**
@@ -13881,7 +14616,7 @@
 
 
   // ============================================
-  // File 30/37: components/duration/duration.js
+  // File 32/41: components/duration/duration.js
   // ============================================
 
   /**
@@ -13925,7 +14660,7 @@
       sizeLarge: "px-12 py-8",
       sizeSmall: "px-12 py-4",
       disabled:
-        "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary opacity-60",
+        "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
     };
 
     function join() {
@@ -14318,8 +15053,13 @@
       };
       container.setDisabled = function (d) {
         disabled = !!d;
-        triggerWrapper.classList.toggle("cursor-not-allowed", disabled);
-        triggerWrapper.classList.toggle("opacity-60", disabled);
+        triggerWrapper.className = join(
+          TRIGGER_CLASS.base,
+          TRIGGER_CLASS[variant] != null ? TRIGGER_CLASS[variant] : TRIGGER_CLASS.default,
+          size === "large" ? TRIGGER_CLASS.sizeLarge : size === "small" ? TRIGGER_CLASS.sizeSmall : TRIGGER_CLASS.sizeDefault,
+          disabled ? TRIGGER_CLASS.disabled : "",
+          className
+        );
         triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
         if (disabled) popoverApi.hide();
       };
@@ -14335,7 +15075,7 @@
 
 
   // ============================================
-  // File 31/37: components/date-time-picker/date-time-picker-utils.js
+  // File 33/41: components/date-time-picker/date-time-picker-utils.js
   // ============================================
 
   /**
@@ -14594,7 +15334,7 @@
 
 
   // ============================================
-  // File 32/37: components/date-time-picker/date-time-picker.js
+  // File 34/41: components/date-time-picker/date-time-picker.js
   // ============================================
 
   /**
@@ -14771,7 +15511,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({
@@ -14839,13 +15579,15 @@
       var displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
 
       var triggerWrapper = document.createElement("div");
-      var triggerClasses = join(
-        "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
-        "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
-        size === "large" ? "px-12 py-8" : size === "small" ? "px-12 py-4" : "px-12 py-6",
-        disabled ? "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary" : "cursor-pointer"
-      );
-      triggerWrapper.className = triggerClasses;
+      function getTriggerClassName(disabledState) {
+        return join(
+          "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
+          "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+          size === "large" ? "px-12 py-8" : size === "small" ? "px-12 py-4" : "px-12 py-6",
+          disabledState ? "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary" : "cursor-pointer"
+        );
+      }
+      triggerWrapper.className = getTriggerClassName(disabled);
       triggerWrapper.setAttribute("role", "button");
       triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
       triggerWrapper.setAttribute("aria-haspopup", "dialog");
@@ -15113,8 +15855,7 @@
       };
       container.setDisabled = function (d) {
         disabled = !!d;
-        triggerWrapper.classList.toggle("cursor-not-allowed", disabled);
-        triggerWrapper.classList.toggle("opacity-60", disabled);
+        triggerWrapper.className = getTriggerClassName(disabled);
         triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
         if (disabled) popoverApi.hide();
       };
@@ -15130,7 +15871,7 @@
 
 
   // ============================================
-  // File 33/37: components/phone-input/phone-utils.js
+  // File 35/41: components/phone-input/phone-utils.js
   // ============================================
 
   /**
@@ -15293,7 +16034,7 @@
 
 
   // ============================================
-  // File 34/37: components/phone-input/phone-input.js
+  // File 36/41: components/phone-input/phone-input.js
   // ============================================
 
   /**
@@ -15691,7 +16432,7 @@
 
 
   // ============================================
-  // File 35/37: components/file-input.js
+  // File 37/41: components/file-input.js
   // ============================================
 
   /**
@@ -15735,6 +16476,15 @@
       return ICONS.file;
     }
 
+    /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient (same as enum-select) */
+    function getClient() {
+      if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent("superleapClient");
+        if (c) return c;
+      }
+      return global.superleapClient;
+    }
+
     /**
      * Upload file to S3
      * @param {File} file - File to upload
@@ -15746,26 +16496,31 @@
       formData.append("file", file, file.name);
       formData.append("is_private", String(!!isPrivate));
 
-      // Get upload URL - can be configured via global.S3_UPLOAD_URL
+      // Get upload path - can be configured via global.S3_UPLOAD_URL
       const uploadUrl = global.S3_UPLOAD_URL || "/org/file/upload";
-      const baseUrl = global.SUPERLEAP_BASE_URL || "https://app.superleap.com/api/v1";
-      const fullUrl = uploadUrl.startsWith("http") ? uploadUrl : `${baseUrl}${uploadUrl}`;
 
-      // Get API key: use FlowUI._getComponent when globals were captured (index.js), else global.superleapClient
-      let apiKey = null;
+      // Base URL and API key from superleapClient only (same pattern as enum-select)
+      var client = getClient();
+      var baseUrl = null;
+      var apiKey = null;
       try {
-        const client =
-          global.FlowUI && typeof global.FlowUI._getComponent === "function"
-            ? global.FlowUI._getComponent("superleapClient")
-            : global.superleapClient;
+        if (client && typeof client.getBaseUrl === "function") {
+          baseUrl = client.getBaseUrl();
+        }
         if (client && typeof client.getSdk === "function") {
-          const sdk = client.getSdk();
-          apiKey = sdk?.apiKey;
+          var sdk = client.getSdk();
+          apiKey = sdk ? sdk.apiKey : null;
         }
       } catch (e) {
-        console.warn("[S3FileUpload] Could not get API key:", e);
+        console.warn("[S3FileUpload] Could not get client:", e);
       }
 
+      if (!baseUrl) {
+        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 headers = {};
       if (apiKey) {
         headers.Authorization = `Bearer ${apiKey}`;
@@ -15809,8 +16564,36 @@
      * @param {boolean} config.isPrivate - Whether files should be private
      * @param {number} config.maxFiles - Maximum number of files (for multiple mode)
      * @param {number} config.maxFileSize - Maximum file size in bytes
+     * @param {boolean} [config.disabled] - Whether the file upload is disabled
+     * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+     * @param {string} [config.inputSize] - 'default' | 'large' | 'small'
+     * @param {string} [config.className] - Extra class on upload wrapper
      * @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",
+      default:
+        "border-border-primary bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+      error:
+        "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+      warning:
+        "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+      success:
+        "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+      borderless:
+        "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      inline:
+        "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus-within:border-transparent focus-within:bg-fill-tertiary-fill-light-gray",
+      sizeDefault: "px-12 py-4",
+      sizeLarge: "px-12 py-6",
+      sizeSmall: "px-12 py-2",
+    };
+
+    function joinClasses() {
+      return Array.prototype.filter.call(arguments, Boolean).join(" ");
+    }
+
     function create(config) {
       const {
         label,
@@ -15822,7 +16605,14 @@
         isPrivate = false,
         maxFiles = null,
         maxFileSize = 10 * 1024 * 1024, // 10MB default
+        disabled = false,
+        variant = "default",
+        inputSize = "default",
+        className = "",
       } = config;
+      let disabledState = !!disabled;
+      let currentVariant = variant;
+      let currentInputSize = inputSize;
 
       if (!global.FlowUI) {
         throw new Error("FlowUI not available");
@@ -15840,12 +16630,33 @@
 
       // Upload row: button + status + optional end spinner (match Select/MultiSelect trigger)
       const uploadWrapper = document.createElement("div");
-      uploadWrapper.className = "relative flex w-full items-center justify-between rounded-4 border-1/2 border-border-primary bg-fill-quarternary-fill-white px-8 py-4 hover:border-primary-border focus-within:outline-none focus-within:border-1/2 focus-within:border-primary-border";
+      var sizeClass =
+        currentInputSize === "large"
+          ? UPLOAD_WRAPPER_CLASS.sizeLarge
+          : currentInputSize === "small"
+            ? UPLOAD_WRAPPER_CLASS.sizeSmall
+            : UPLOAD_WRAPPER_CLASS.sizeDefault;
+      function applyWrapperClasses() {
+        uploadWrapper.className = joinClasses(
+          UPLOAD_WRAPPER_CLASS.base,
+          UPLOAD_WRAPPER_CLASS[currentVariant] || UPLOAD_WRAPPER_CLASS.default,
+          sizeClass,
+          className
+        );
+      }
+      applyWrapperClasses();
+      uploadWrapper.setAttribute("data-file-input-variant", currentVariant);
+      uploadWrapper.setAttribute("data-file-input-size", currentInputSize);
+      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";
 
+      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";
       const initialButtonText = multiple ? "Choose files" : "Choose a file";
       const btn = useButtonComponent
@@ -15853,31 +16664,41 @@
             variant: "outline",
             size: "small",
             text: initialButtonText,
-            className: "shrink-0 truncate",
+            className: "shrink-0 truncate " + disabledChildClasses,
           })
         : (function () {
             const el = document.createElement("div");
-            el.className = "shrink-0 truncate rounded-2 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-1 text-reg-13 text-typography-primary-text transition-colors duration-150 hover:bg-fill-secondary-fill-gray";
+            el.className =
+              "shrink-0 truncate rounded-2 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-1 text-reg-13 text-typography-primary-text transition-colors duration-150 hover:bg-fill-secondary-fill-gray " +
+              disabledChildClasses;
             el.textContent = initialButtonText;
             return el;
           })();
 
       // Status text: "No files chosen" (quaternary) or "X file(s) selected"
       const statusText = document.createElement("p");
-      statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+      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");
       input.type = "file";
-      input.className = "absolute inset-0 z-10 w-full cursor-pointer opacity-0";
+      const inputBaseClass = "absolute inset-0 z-10 w-full opacity-0";
+      function applyInputClasses() {
+        input.className =
+          inputBaseClass +
+          (disabledState ? " !pointer-events-none !cursor-not-allowed" : " cursor-pointer");
+      }
+      applyInputClasses();
       input.multiple = multiple;
+      input.disabled = disabledState;
       if (accept !== "*") {
         input.accept = accept;
       }
 
       // End icon slot: spinner when uploading (match Select chevron position)
       const endIconSlot = document.createElement("div");
-      endIconSlot.className = "ml-4 flex size-16 items-center justify-center shrink-0 text-typography-quaternary-text";
+      endIconSlot.className =
+        "ml-4 flex size-16 items-center justify-center shrink-0 text-typography-quaternary-text group-has-[:disabled]:text-typography-quaternary-text";
       endIconSlot.style.display = "none";
 
       // Uploaded files: badge list (match UploadedFilePreviewer – flex-wrap gap-2)
@@ -15916,15 +16737,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");
               }
             }
           );
@@ -16060,13 +16879,13 @@
 
         if (!filesChosen) {
           statusText.textContent = "No files chosen";
-          statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+          statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
         } else if (uploadingCount > 0) {
           statusText.textContent = "Uploading…";
-          statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+          statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
         } else {
           statusText.textContent = `${uploadedCount} file${uploadedCount !== 1 ? "s" : ""} selected`;
-          statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-primary-text";
+          statusText.className = statusTextBaseClass + " text-typography-primary-text" + statusTextDisabledClass;
         }
 
         endIconSlot.style.display = uploadingCount > 0 ? "flex" : "none";
@@ -16120,11 +16939,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 +16968,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 +16982,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;
@@ -16216,6 +17022,32 @@
       loadExistingFiles();
       updateStatus();
 
+      field.setDisabled = function (d) {
+        disabledState = !!d;
+        input.disabled = disabledState;
+        applyInputClasses();
+        applyWrapperClasses();
+        uploadWrapper.setAttribute("data-disabled", disabledState ? "true" : "false");
+      };
+
+      field.setVariant = function (v) {
+        currentVariant = v || "default";
+        uploadWrapper.setAttribute("data-file-input-variant", currentVariant);
+        applyWrapperClasses();
+      };
+
+      field.setInputSize = function (s) {
+        currentInputSize = s || "default";
+        sizeClass =
+          currentInputSize === "large"
+            ? UPLOAD_WRAPPER_CLASS.sizeLarge
+            : currentInputSize === "small"
+              ? UPLOAD_WRAPPER_CLASS.sizeSmall
+              : UPLOAD_WRAPPER_CLASS.sizeDefault;
+        uploadWrapper.setAttribute("data-file-input-size", currentInputSize);
+        applyWrapperClasses();
+      };
+
       return field;
     }
 
@@ -16230,7 +17062,7 @@
 
 
   // ============================================
-  // File 36/37: components/table.js
+  // File 38/41: components/table.js
   // ============================================
 
   /**
@@ -16571,7 +17403,455 @@
 
 
   // ============================================
-  // File 37/37: index.js
+  // File 39/41: components/tabs.js
+  // ============================================
+
+  /**
+   * Tabs Component (vanilla JS)
+   * Tabbed interface with list, triggers, and content panels.
+   * Ref: Radix-style Tabs; design tokens match design system.
+   */
+
+  (function (global) {
+
+    function getComponent(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
+    var LIST_BASE_CLASS =
+      "inline-flex items-center justify-center gap-2 rounded-4 bg-fill-tertiary-fill-light-gray p-4";
+
+    /** Button variant classes for active (outline) vs inactive (ghost) */
+    var BUTTON_OUTLINE =
+      "shadow-soft-extra-small group bg-fill-quarternary-fill-white border-1/2 border-border-primary text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:opacity-50 disabled:border-fill-secondary-fill-gray";
+    var BUTTON_GHOST =
+      "group text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:text-typography-quaternary-text";
+    var BUTTON_BASE =
+      "inline-flex items-center justify-center whitespace-nowrap !text-med-12 transition-colors disabled:pointer-events-none hover:cursor-pointer h-fit";
+    var BUTTON_SIZES = {
+      default: "px-8 py-4 gap-4 rounded-4",
+      small: "px-8 py-4 gap-4 rounded-4",
+      large: "px-16 py-8 gap-4 rounded-4",
+    };
+
+    var CONTENT_BASE_CLASS =
+      "ring-offset-background focus-visible:ring-ring h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+
+    function join() {
+      return Array.prototype.filter.call(arguments, Boolean).join(" ");
+    }
+
+    /**
+     * Create a full Tabs component (list + triggers + content panels)
+     * @param {Object} config
+     * @param {string} [config.defaultValue] - initial active tab value
+     * @param {string} [config.value] - controlled active value
+     * @param {Function} [config.onChange] - (value) => void when tab changes
+     * @param {Array<{value: string, label: string, content: HTMLElement|string}>} config.tabs - tab definitions
+     * @param {string} [config.size] - 'default' | 'small' | 'large'
+     * @param {string} [config.listClassName] - extra class on list
+     * @param {string} [config.contentClassName] - extra class on content wrapper
+     * @returns {HTMLElement} root element (wrapper containing list + content area)
+     */
+    function create(config) {
+      var opts = config || {};
+      var defaultValue = opts.defaultValue;
+      var controlledValue = opts.value;
+      var onChange = opts.onChange;
+      var tabs = opts.tabs || [];
+      var size = opts.size || "default";
+      var listClassName = opts.listClassName || "";
+      var contentClassName = opts.contentClassName || "";
+
+      var sizeClass = BUTTON_SIZES[size] || BUTTON_SIZES.default;
+
+      var root = document.createElement("div");
+      root.className = "tabs-root w-full";
+
+      var activeValue = controlledValue !== undefined ? controlledValue : defaultValue !== undefined ? defaultValue : (tabs[0] && tabs[0].value) || "";
+
+      // List container
+      var list = document.createElement("div");
+      list.setAttribute("role", "tablist");
+      list.className = join(LIST_BASE_CLASS, listClassName);
+
+      // Content container (holds all panels; we show/hide by value)
+      var contentWrapper = document.createElement("div");
+      contentWrapper.className = join("tabs-content-wrapper mt-4", contentClassName);
+
+      var triggerEls = [];
+      var contentPanels = [];
+
+      var Button = getComponent("Button");
+
+      tabs.forEach(function (tab, index) {
+        var value = tab.value;
+        var label = tab.label != null ? tab.label : value;
+        var content = tab.content;
+
+        var isActive = value === activeValue;
+        var trigger = Button.create({
+          variant: isActive ? "outline" : "ghost",
+          size: size === "small" ? "small" : size === "large" ? "large" : "default",
+          text: label,
+          type: "button",
+          className: "mx-2",
+          onClick: function () {
+            if (activeValue === value) return;
+            if (controlledValue === undefined) {
+              activeValue = value;
+              updateActiveState();
+            }
+            if (typeof onChange === "function") {
+              onChange(value);
+            }
+          },
+        });
+
+        trigger.setAttribute("role", "tab");
+        trigger.setAttribute("aria-selected", value === activeValue ? "true" : "false");
+        trigger.setAttribute("data-state", value === activeValue ? "active" : "inactive");
+        trigger.setAttribute("data-value", value);
+        trigger.tabIndex = value === activeValue ? 0 : -1;
+
+        trigger.addEventListener("keydown", function (e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            trigger.click();
+          }
+          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+            if (nextIndex >= 0 && nextIndex < tabs.length) {
+              var nextTrigger = triggerEls[nextIndex];
+              if (nextTrigger) {
+                nextTrigger.focus();
+                nextTrigger.click();
+              }
+            }
+          }
+        });
+
+        list.appendChild(trigger);
+        triggerEls.push(trigger);
+
+        var panel = document.createElement("div");
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-hidden", value !== activeValue ? "true" : "false");
+        panel.setAttribute("data-value", value);
+        panel.className = join(CONTENT_BASE_CLASS, value !== activeValue ? "hidden" : "");
+        if (typeof content === "string") {
+          panel.innerHTML = content;
+        } else if (content && content.nodeType === 1) {
+          panel.appendChild(content);
+        }
+        contentWrapper.appendChild(panel);
+        contentPanels.push(panel);
+      });
+
+      function updateActiveState() {
+        triggerEls.forEach(function (t, i) {
+          var val = tabs[i] && tabs[i].value;
+          var isActive = val === activeValue;
+          t.setAttribute("aria-selected", isActive ? "true" : "false");
+          t.setAttribute("data-state", isActive ? "active" : "inactive");
+          t.tabIndex = isActive ? 0 : -1;
+          t.className = join(BUTTON_BASE, isActive ? BUTTON_OUTLINE : BUTTON_GHOST, sizeClass, "mx-2");
+        });
+        contentPanels.forEach(function (p, i) {
+          var val = tabs[i] && tabs[i].value;
+          var isActive = val === activeValue;
+          p.setAttribute("aria-hidden", isActive ? "false" : "true");
+          p.classList.toggle("hidden", !isActive);
+        });
+      }
+
+      root.appendChild(list);
+      root.appendChild(contentWrapper);
+
+      root.getValue = function () {
+        return activeValue;
+      };
+
+      root.setValue = function (newValue) {
+        if (newValue === activeValue) return;
+        activeValue = newValue;
+        updateActiveState();
+      };
+
+      return root;
+    }
+
+    var Tabs = {
+      create: create,
+    };
+
+    if (typeof module !== "undefined" && module.exports) {
+      module.exports = Tabs;
+    } else {
+      global.Tabs = Tabs;
+    }
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 40/41: components/steps.js
+  // ============================================
+
+  /**
+   * Steps Component (vanilla JS)
+   * Multi-step flow with numbered step triggers and optional content panels.
+   * Use for wizards / step-by-step forms (e.g. "1 Step One", "2 Step Two").
+   */
+
+  (function (global) {
+
+    function getComponent(name) {
+      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+        var c = global.FlowUI._getComponent(name);
+        if (c) return c;
+      }
+      return global[name];
+    }
+
+    var LIST_BASE_CLASS =
+      "flex items-center flex-wrap gap-0 rounded-4 border border-border-primary bg-fill-quarternary-fill-white p-4";
+
+    /** Inactive step: muted label color only (button stays ghost large) */
+    var INACTIVE_LABEL_CLASS = "!text-typography-quaternary-text";
+
+    /** Box around step number: active = dark fill + invert text, inactive = dark gray fill + tertiary text */
+    var NUMBER_BOX_ACTIVE =
+      "flex h-16 w-16 items-center justify-center rounded-4 bg-typography-primary-text text-typography-invert-text shrink-0";
+    var NUMBER_BOX_INACTIVE =
+      "flex h-16 w-16 items-center justify-center rounded-4 bg-fill-primary-fill-dark-gray text-typography-tertiary-text shrink-0";
+
+    /** Horizontal line between steps (step1 ——— step2) */
+    var CONNECTOR_CLASS = "flex-1 min-w-12 max-w-32 h-0 border-t border-border-primary shrink-0 mx-2 self-center";
+
+    var CONTENT_BASE_CLASS =
+      "ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 h-full";
+
+    function join() {
+      return Array.prototype.filter.call(arguments, Boolean).join(" ");
+    }
+
+    /**
+     * Create a Steps component (numbered step triggers + optional content)
+     * Design: ghost large Button for all steps; inactive steps use muted label color. Connectors between steps. Optional title/description above.
+     * @param {Object} config
+     * @param {Array<{id: string, label: string, content?: HTMLElement|string}>} config.steps - step definitions
+     * @param {string} [config.defaultValue] - initial active step id
+     * @param {string} [config.value] - controlled active step id
+     * @param {Function} [config.onChange] - (stepId) => void when step changes
+     * @param {string} [config.title] - optional title above steps
+     * @param {string} [config.description] - optional description above steps
+     * @param {string} [config.listClassName] - extra class on step list
+     * @param {string} [config.contentClassName] - extra class on content wrapper
+     * @param {boolean} [config.showContent=true] - whether to render content panels (if steps have content)
+     * @returns {HTMLElement} root element
+     */
+    function create(config) {
+      var opts = config || {};
+      var steps = opts.steps || [];
+      var defaultValue = opts.defaultValue;
+      var controlledValue = opts.value;
+      var onChange = opts.onChange;
+      var title = opts.title;
+      var description = opts.description;
+      var listClassName = opts.listClassName || "";
+      var contentClassName = opts.contentClassName || "";
+      var showContent = opts.showContent !== false;
+
+      var root = document.createElement("div");
+      root.className = "steps-root w-full";
+
+      var activeId =
+        controlledValue !== undefined
+          ? controlledValue
+          : defaultValue !== undefined
+            ? defaultValue
+            : (steps[0] && steps[0].id) || "";
+
+      if (title != null && title !== "") {
+        var titleEl = document.createElement("h3");
+        titleEl.className = "text-typography-primary-text";
+        titleEl.textContent = title;
+        root.appendChild(titleEl);
+      }
+      if (description != null && description !== "") {
+        var descEl = document.createElement("p");
+        descEl.className = "text-typography-secondary-text";
+        descEl.textContent = description;
+        root.appendChild(descEl);
+      }
+
+      // Step list (horizontal: step, connector, step, connector, ...)
+      var list = document.createElement("div");
+      list.setAttribute("role", "tablist");
+      list.setAttribute("aria-label", "Steps");
+      list.className = join(LIST_BASE_CLASS, listClassName);
+
+      var triggerEls = [];
+      var numberBoxEls = [];
+      var contentPanels = [];
+      var contentWrapper = null;
+
+      if (showContent && steps.some(function (s) { return s.content != null; })) {
+        contentWrapper = document.createElement("div");
+        contentWrapper.className = join("steps-content-wrapper mt-4", contentClassName);
+      }
+
+      var Button = getComponent("Button");
+
+      steps.forEach(function (step, index) {
+        var stepId = step.id;
+        var label = step.label != null ? step.label : stepId;
+        var content = step.content;
+        var stepNumber = index + 1;
+        var isActive = stepId === activeId;
+
+        var trigger = Button.create({
+          variant: "ghost",
+          size: "large",
+          text: "\u00A0",
+          type: "button",
+          className: isActive ? "" : INACTIVE_LABEL_CLASS,
+          onClick: function () {
+            if (activeId === stepId) return;
+            if (controlledValue === undefined) {
+              activeId = stepId;
+              updateActiveState();
+            }
+            if (typeof onChange === "function") {
+              onChange(stepId);
+            }
+          },
+        });
+
+        var numberBox = document.createElement("span");
+        numberBox.setAttribute("aria-hidden", "true");
+        numberBox.className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+        numberBox.textContent = String(stepNumber);
+
+        trigger.innerHTML = "";
+        trigger.appendChild(numberBox);
+        trigger.appendChild(document.createTextNode(" " + label));
+
+        trigger.setAttribute("role", "tab");
+        trigger.setAttribute("aria-selected", isActive ? "true" : "false");
+        trigger.setAttribute("data-state", isActive ? "active" : "inactive");
+        trigger.setAttribute("data-step-id", stepId);
+        trigger.tabIndex = isActive ? 0 : -1;
+
+        numberBoxEls.push(numberBox);
+
+        trigger.addEventListener("keydown", function (e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            trigger.click();
+          }
+          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+            if (nextIndex >= 0 && nextIndex < steps.length) {
+              var nextTrigger = triggerEls[nextIndex];
+              if (nextTrigger) {
+                nextTrigger.focus();
+                nextTrigger.click();
+              }
+            }
+          }
+        });
+
+        list.appendChild(trigger);
+        triggerEls.push(trigger);
+
+        if (index < steps.length - 1) {
+          var connector = document.createElement("span");
+          connector.className = CONNECTOR_CLASS;
+          connector.setAttribute("aria-hidden", "true");
+          list.appendChild(connector);
+        }
+
+        if (contentWrapper && content != null) {
+          var panel = document.createElement("div");
+          panel.setAttribute("role", "tabpanel");
+          panel.setAttribute("aria-hidden", stepId !== activeId ? "true" : "false");
+          panel.setAttribute("data-step-id", stepId);
+          panel.className = join(CONTENT_BASE_CLASS, stepId !== activeId ? "hidden" : "");
+          if (typeof content === "string") {
+            panel.innerHTML = content;
+          } else if (content && content.nodeType === 1) {
+            panel.appendChild(content);
+          }
+          contentWrapper.appendChild(panel);
+          contentPanels.push(panel);
+        }
+      });
+
+      function updateActiveState() {
+        triggerEls.forEach(function (t, i) {
+          var step = steps[i];
+          var id = step && step.id;
+          var isActive = id === activeId;
+          t.setAttribute("aria-selected", isActive ? "true" : "false");
+          t.setAttribute("data-state", isActive ? "active" : "inactive");
+          t.tabIndex = isActive ? 0 : -1;
+          if (isActive) {
+            t.classList.remove(INACTIVE_LABEL_CLASS);
+          } else {
+            t.classList.add(INACTIVE_LABEL_CLASS);
+          }
+          numberBoxEls[i].className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+        });
+        contentPanels.forEach(function (p, i) {
+          var step = steps[i];
+          var id = step && step.id;
+          var isActive = id === activeId;
+          p.setAttribute("aria-hidden", isActive ? "false" : "true");
+          p.classList.toggle("hidden", !isActive);
+        });
+      }
+
+      root.appendChild(list);
+      if (contentWrapper) {
+        root.appendChild(contentWrapper);
+      }
+
+      root.getValue = function () {
+        return activeId;
+      };
+
+      root.setValue = function (newId) {
+        if (newId === activeId) return;
+        activeId = newId;
+        updateActiveState();
+      };
+
+      return root;
+    }
+
+    var Steps = {
+      create: create,
+    };
+
+    if (typeof module !== "undefined" && module.exports) {
+      module.exports = Steps;
+    } else {
+      global.Steps = Steps;
+    }
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 41/41: index.js
   // ============================================
 
   /**
@@ -16647,6 +17927,7 @@
       require("./components/input.js");
       require("./components/currency.js");
       require("./components/textarea.js");
+      require("./components/richtext-editor.js");
       require("./components/duration/duration-utils.js");
       require("./components/duration/duration-constants.js");
       require("./components/duration/duration.js");
@@ -16662,8 +17943,11 @@
       require("./components/phone-input/phone-utils.js");
       require("./components/phone-input/phone-input.js");
       require("./components/checkbox.js");
+      require("./components/checkbox-group.js");
       require("./components/radio-group.js");
       require("./components/table.js");
+      require("./components/tabs.js");
+      require("./components/steps.js");
 
       // Export FlowUI and SuperLeap from global scope
       if (typeof global !== "undefined" && global.FlowUI) {
@@ -16674,6 +17958,7 @@
               getSdk: global.superleapClient.getSdk,
               isAvailable: global.superleapClient.isAvailable,
               getDefaultConfig: global.superleapClient.getDefaultConfig,
+              getBaseUrl: global.superleapClient.getBaseUrl,
             }
           : null;
 
@@ -16689,6 +17974,7 @@
               getSdk: window.superleapClient.getSdk,
               isAvailable: window.superleapClient.isAvailable,
               getDefaultConfig: window.superleapClient.getDefaultConfig,
+              getBaseUrl: window.superleapClient.getBaseUrl,
             }
           : null;
 
@@ -16724,6 +18010,7 @@
           "InputComponent",
           "CurrencyComponent",
           "TextareaComponent",
+          "RichTextEditorComponent",
           "Duration",
           "DateTimePicker",
           "Enumeration",
@@ -16735,8 +18022,11 @@
           "FileInput",
           "PhoneInput",
           "Checkbox",
+          "CheckboxGroup",
           "RadioGroup",
           "SuperleapTable",
+          "Tabs",
+          "Steps",
         ];
 
         componentNames.forEach((name) => {
@@ -16766,6 +18056,7 @@
             getSdk: client.getSdk.bind(client),
             isAvailable: client.isAvailable.bind(client),
             getDefaultConfig: client.getDefaultConfig.bind(client),
+            getBaseUrl: client.getBaseUrl.bind(client),
             // Bridge methods (from crm.js)
             connect: client.connect ? client.connect.bind(client) : undefined,
             isConnected: client.isConnected
@@ -16824,7 +18115,7 @@
             },
           });
           document.dispatchEvent(event);
-          console.log("[Superleap-Flow] Library ready - v2.2.9");
+          console.log("[Superleap-Flow] Library ready - v2.5.1");
         }
 
         // Wait for DOM to be ready before dispatching event