@superleapai/flow-ui 2.5.3 → 2.5.5

package/dist/superleap-flow.js

@@ -1,12 +1,12 @@
 /**
- * @superleapai/flow-ui v2.3.4
+ * @superleapai/flow-ui v2.5.3
  * A reusable design system for building multi-step forms
  *
  * Copyright (c) 2024-present SuperLeap
  * Licensed under MIT
  *
  * Build: development
- * Date: 2026-02-19T14:43:01.927Z
+ * Date: 2026-02-25T17:41:37.089Z
  *
  * 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/42: node_modules/superleap-sdk/superleap.js
   // ============================================
 
   /**
@@ -2642,7 +2642,7 @@
 
 
   // ============================================
-  // File 2/37: core/superleapClient.js
+  // File 2/42: 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/42: core/bridge.js
   // ============================================
 
   /**
@@ -3326,7 +3338,7 @@
 
 
   // ============================================
-  // File 4/37: core/crm.js
+  // File 4/42: core/crm.js
   // ============================================
 
   /**
@@ -3669,7 +3681,7 @@
 
 
   // ============================================
-  // File 5/37: components/label.js
+  // File 5/42: components/label.js
   // ============================================
 
   /**
@@ -3786,7 +3798,7 @@
 
 
   // ============================================
-  // File 6/37: core/flow.js
+  // File 6/42: core/flow.js
   // ============================================
 
   /**
@@ -4038,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
@@ -4339,6 +4393,81 @@
       return field;
     }
 
+    /**
+     * Create a card select field (uses CardSelect component when available, else radio fallback)
+     * @param {Object} config - Configuration object
+     * @param {string} config.label - Field label
+     * @param {string} config.fieldId - State key for this field
+     * @param {Array} config.options - Array of { value, label, description?, icon?, disabled? }
+     * @param {boolean} [config.required] - Whether field is required
+     * @param {Function} [config.onChange] - Optional change handler (receives selected value)
+     * @param {string} [config.helpText] - Optional help text for tooltip
+     * @param {boolean} [config.disabled] - Whether all cards are disabled
+     * @param {string} [config.className] - Extra CSS class on card container
+     * @returns {HTMLElement} Field wrapper element
+     */
+    function createCardSelect(config) {
+      const { label, fieldId, options = [], required = false, onChange, helpText = null, disabled = false, className } = config;
+
+      const field = createFieldWrapper(label, required, helpText);
+
+      if (getComponent("CardSelect") && getComponent("CardSelect").create) {
+        const currentValue = get(fieldId);
+        const cardSelectEl = getComponent("CardSelect").create({
+          name: fieldId,
+          options: options.map((opt) => ({
+            value: opt.value,
+            label: opt.label || opt.value,
+            description: opt.description,
+            icon: opt.icon,
+            disabled: opt.disabled,
+          })),
+          value: currentValue,
+          disabled,
+          className,
+          onChange: (value) => {
+            set(fieldId, value);
+            if (onChange) onChange(value);
+          },
+        });
+        cardSelectEl._fieldId = fieldId;
+        field.appendChild(cardSelectEl);
+        return field;
+      }
+
+      // Fallback: native radio buttons
+      const radioGroup = document.createElement("div");
+      radioGroup.className = "card-select-fallback";
+
+      options.forEach((opt) => {
+        const wrapper = document.createElement("div");
+        wrapper.className = "card-option";
+
+        const radio = document.createElement("input");
+        radio.type = "radio";
+        radio.name = fieldId;
+        radio.value = opt.value;
+        radio.id = `${fieldId}-${opt.value}`;
+        radio.checked = get(fieldId) === opt.value;
+        radio.disabled = disabled || !!opt.disabled;
+        radio.addEventListener("change", () => {
+          set(fieldId, opt.value);
+          if (onChange) { onChange(opt.value); }
+        });
+
+        const radioLabel = document.createElement("label");
+        radioLabel.htmlFor = `${fieldId}-${opt.value}`;
+        radioLabel.textContent = opt.label || opt.value;
+
+        wrapper.appendChild(radio);
+        wrapper.appendChild(radioLabel);
+        radioGroup.appendChild(wrapper);
+      });
+
+      field.appendChild(radioGroup);
+      return field;
+    }
+
     /**
      * Create a multi-select field (uses MultiSelect component when available, else checkbox group)
      * @param {Object} config - Configuration object
@@ -4448,6 +4577,7 @@
         size,
         canClear,
         initialLimit,
+        initialFilter,
         helpText = null,
       } = config;
 
@@ -4467,6 +4597,7 @@
           size: size || "default",
           canClear: !!canClear,
           initialLimit,
+          initialFilter,
           onChange: (value, record) => {
             set(fieldId, value);
             if (onChange) onChange(value, record);
@@ -4516,6 +4647,7 @@
         variant,
         size,
         initialLimit,
+        initialFilter,
         displayFields,
         helpText = null,
       } = config;
@@ -4534,6 +4666,7 @@
           variant: variant || "default",
           size: size || "default",
           initialLimit,
+          initialFilter,
           displayFields: displayFields || [],
           onValuesChange: (values, records) => {
             set(fieldId, values);
@@ -5091,6 +5224,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
     // ============================================================================
@@ -5122,6 +5289,38 @@
       });
     }
 
+    /**
+     * 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 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;
+    }
+
+    /**
+     * 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;
+    }
+
     // ============================================================================
     // TABLE COMPONENT
     // ============================================================================
@@ -5284,6 +5483,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
     // ============================================================================
@@ -5420,10 +5647,12 @@
       // Form components
       createInput,
       createTextarea,
+      createRichTextEditor,
       createSelect,
       createTimePicker,
       createDateTimePicker,
       createRadioGroup,
+      createCardSelect,
       createMultiSelect,
       createRecordSelect,
       createRecordMultiSelect,
@@ -5435,6 +5664,7 @@
       createCurrency,
       createPhoneInput,
       createCheckbox,
+      createCheckboxGroup,
 
       // Button (delegates to Button component when available; resolved at call time via getComponent)
       createButton: function (config) {
@@ -5455,8 +5685,11 @@
 
       // Stepper
       renderStepper,
+      createTabs,
+      createSteps,
 
       // Alerts
+      renderAlerts,
       showToast,
 
       // Table
@@ -5484,7 +5717,7 @@
 
 
   // ============================================
-  // File 7/37: components/toast.js
+  // File 7/42: components/toast.js
   // ============================================
 
   /**
@@ -5833,7 +6066,7 @@
 
 
   // ============================================
-  // File 8/37: components/alert.js
+  // File 8/42: components/alert.js
   // ============================================
 
   /**
@@ -6121,7 +6354,7 @@
 
 
   // ============================================
-  // File 9/37: components/button.js
+  // File 9/42: components/button.js
   // ============================================
 
   /**
@@ -6328,7 +6561,7 @@
 
 
   // ============================================
-  // File 10/37: components/spinner.js
+  // File 10/42: components/spinner.js
   // ============================================
 
   /**
@@ -6470,7 +6703,7 @@
 
 
   // ============================================
-  // File 11/37: components/badge.js
+  // File 11/42: components/badge.js
   // ============================================
 
   /**
@@ -6611,7 +6844,7 @@
 
 
   // ============================================
-  // File 12/37: components/avatar.js
+  // File 12/42: components/avatar.js
   // ============================================
 
   /**
@@ -6812,7 +7045,7 @@
 
 
   // ============================================
-  // File 13/37: components/icon.js
+  // File 13/42: components/icon.js
   // ============================================
 
   /**
@@ -6893,6 +7126,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() {
@@ -7018,7 +7285,7 @@
 
 
   // ============================================
-  // File 14/37: components/popover.js
+  // File 14/42: components/popover.js
   // ============================================
 
   /**
@@ -7041,6 +7308,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 = {}) {
@@ -7055,6 +7323,7 @@
         onOpen = null,
         bodyClassName = "",
         panelClassName = "",
+        modal = true,
       } = config;
 
       const triggerEl =
@@ -7064,7 +7333,7 @@
         return { show: noop, hide: noop, destroy: noop, element: null };
       }
 
-      // Wrap trigger in a relative container so popover can be absolute relative to it (full width so parent controls it)
+      // 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;
@@ -7075,7 +7344,7 @@
 
       const wrapper = document.createElement("div");
       wrapper.className =
-        "absolute 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");
@@ -7099,7 +7368,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;
       }
@@ -7111,7 +7384,40 @@
       panel.appendChild(body);
 
       wrapper.appendChild(panel);
-      container.appendChild(wrapper);
+      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() {}
 
@@ -7119,33 +7425,80 @@
         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" ? (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);
+        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 = triggerRect.height + gap;
-            left = alignLeft;
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left + alignLeft;
             break;
           case "top":
-            top = -panelRect.height - gap;
-            left = alignLeft;
+            top = triggerRect.top - panelRect.height - gap;
+            left = triggerRect.left + alignLeft;
             break;
           case "right":
-            top = alignTop;
-            left = triggerRect.width + gap;
+            top = triggerRect.top + alignTop;
+            left = triggerRect.right + gap;
             break;
           case "left":
-            top = alignTop;
-            left = -panelRect.width - gap;
+            top = triggerRect.top + alignTop;
+            left = triggerRect.left - panelRect.width - gap;
             break;
           default:
-            top = triggerRect.height + gap;
-            left = alignLeft;
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left + alignLeft;
         }
 
         wrapper.style.transform = "";
@@ -7159,16 +7512,41 @@
         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();
+        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");
@@ -7179,6 +7557,16 @@
 
       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);
         }
@@ -7228,6 +7616,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") {
@@ -7249,7 +7639,7 @@
 
 
   // ============================================
-  // File 15/37: components/select.js
+  // File 15/42: components/select.js
   // ============================================
 
   /**
@@ -7446,11 +7836,11 @@
 
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "custom-select-content w-full max-h-[200px] overflow-hidden flex flex-col";
+      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");
@@ -7509,7 +7899,7 @@
         align: "start",
         closeOnClickOutside: true,
         bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
         onOpen: function () {
           if (disabled) {
             popover.hide();
@@ -7807,7 +8197,7 @@
 
 
   // ============================================
-  // File 16/37: components/enum-select.js
+  // File 16/42: components/enum-select.js
   // ============================================
 
   /**
@@ -8041,7 +8431,7 @@
       // Create dropdown content
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
+      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");
@@ -8102,7 +8492,7 @@
       // 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);
@@ -8590,7 +8980,7 @@
 
 
   // ============================================
-  // File 17/37: components/record-select.js
+  // File 17/42: components/record-select.js
   // ============================================
 
   /**
@@ -8604,9 +8994,20 @@
 
   (function (global) {
 
-    var Popover = global.Popover;
-    var InputComponent = global.InputComponent;
-    var Spinner = global.Spinner;
+    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";
@@ -8628,7 +9029,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>';
 
@@ -8643,7 +9044,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",
       };
@@ -8652,7 +9054,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"
         : "";
@@ -8708,15 +9112,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";
@@ -8739,6 +9155,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
      */
@@ -8747,12 +9164,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 =
@@ -8800,7 +9219,7 @@
         size,
         disabled,
         !value,
-        canClear && !!value && !disabled
+        canClear && !!value && !disabled,
       );
       trigger.disabled = disabled;
       trigger.setAttribute("aria-haspopup", "listbox");
@@ -8809,7 +9228,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";
@@ -8852,7 +9272,9 @@
       // Dropdown content: search + list (same content pattern as Select)
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
+      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";
@@ -8883,12 +9305,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 =
@@ -8902,21 +9324,22 @@
       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);
 
       popover = Popover.create({
@@ -8926,30 +9349,41 @@
         align: "start",
         closeOnClickOutside: true,
         bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "max-h-[30vh] overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] 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";
+          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;
@@ -8965,7 +9399,8 @@
         },
       });
 
-      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 : "";
@@ -8979,16 +9414,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();
@@ -9000,7 +9437,9 @@
               });
               triggerIcon.appendChild(vividEl);
             } else {
-              renderStaticIconPlaceholder(selectedRecord.name || selectedRecord.label);
+              renderStaticIconPlaceholder(
+                selectedRecord.name || selectedRecord.label,
+              );
             }
           } else {
             renderStaticObjectIcon();
@@ -9013,12 +9452,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() {
@@ -9055,18 +9495,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
@@ -9129,7 +9590,12 @@
             updateTriggerDisplay();
           })
           .catch(function () {
-            selectedRecord = { id: value, value: value, name: value, label: value };
+            selectedRecord = {
+              id: value,
+              value: value,
+              name: value,
+              label: value,
+            };
             updateTriggerDisplay();
           });
       }
@@ -9140,7 +9606,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...";
@@ -9148,12 +9616,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";
@@ -9166,9 +9634,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();
       }
 
@@ -9187,13 +9657,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;
@@ -9208,7 +9680,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");
@@ -9266,70 +9738,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() {
@@ -9340,22 +9835,26 @@
           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;
-          });
+
+          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();
+              }
+              scheduleUpdatePosition();
+            })
+            .catch(function () {
+              showEmpty("Search failed");
+              hasMoreRecords = false;
+              scheduleUpdatePosition();
+            });
         }, 500);
       }
 
@@ -9400,7 +9899,7 @@
           size,
           disabled,
           !value,
-          canClear && !!value && !disabled
+          canClear && !!value && !disabled,
         );
         if (disabled && isOpen) closeDropdown();
       };
@@ -9419,7 +9918,7 @@
 
 
   // ============================================
-  // File 18/37: components/multiselect.js
+  // File 18/42: components/multiselect.js
   // ============================================
 
   /**
@@ -9577,11 +10076,11 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "custom-multiselect-content w-full  max-h-[200px] overflow-hidden flex flex-col";
+      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) {
@@ -9686,7 +10185,7 @@
         align: "start",
         closeOnClickOutside: true,
         bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
         onOpen: function () {
           if (disabled) {
             popover.hide();
@@ -9800,7 +10299,7 @@
 
 
   // ============================================
-  // File 19/37: components/enum-multiselect.js
+  // File 19/42: components/enum-multiselect.js
   // ============================================
 
   /**
@@ -10061,7 +10560,7 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
+      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");
@@ -10122,7 +10621,7 @@
       // 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);
@@ -10624,7 +11123,7 @@
 
 
   // ============================================
-  // File 20/37: components/record-multiselect.js
+  // File 20/42: components/record-multiselect.js
   // ============================================
 
   /**
@@ -10780,6 +11279,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
      */
@@ -10794,6 +11294,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;
@@ -10919,7 +11420,7 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
+      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 ";
@@ -10969,7 +11470,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 () {
@@ -10997,28 +11498,22 @@
         align: "start",
         closeOnClickOutside: true,
         bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "max-h-[30vh] overflow-hidden",
+        panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
         onOpen: function () {
           if (disabled) {
             popover.hide();
             return;
           }
-          document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open, .enum-select, .enum-multiselect").forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
-            }
-          });
           container.classList.add("open");
           trigger.setAttribute("aria-expanded", "true");
           searchTerm = "";
           if (searchInputWrapper) searchInputWrapper.setValue("");
           else if (searchInputEl) searchInputEl.value = "";
-          var triggerWidthPx = trigger.offsetWidth + "px";
-          content.style.minWidth = triggerWidthPx;
-          content.style.width = triggerWidthPx;
           if (popover.panel) {
-            popover.panel.style.width = triggerWidthPx;
+            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 () {
@@ -11097,14 +11592,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
@@ -11363,6 +11867,16 @@
         }
       }
 
+      function scheduleUpdatePosition() {
+        if (popover && typeof popover.updatePosition === "function") {
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              popover.updatePosition();
+            });
+          });
+        }
+      }
+
       function loadInitialAndRender() {
         showLoading();
         currentPage = 1;
@@ -11381,9 +11895,11 @@
           } else {
             renderOptions();
           }
+          scheduleUpdatePosition();
         }).catch(function () {
           showEmpty("Failed to load records");
           hasMoreRecords = false;
+          scheduleUpdatePosition();
         });
       }
       
@@ -11435,9 +11951,11 @@
             } else {
               renderOptions();
             }
+            scheduleUpdatePosition();
           }).catch(function () {
             showEmpty("Search failed");
             hasMoreRecords = false;
+            scheduleUpdatePosition();
           });
         }, 500);
       }
@@ -11507,7 +12025,7 @@
 
 
   // ============================================
-  // File 21/37: components/input.js
+  // File 21/42: components/input.js
   // ============================================
 
   /**
@@ -11534,7 +12052,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:
@@ -11609,13 +12127,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) {
@@ -11745,19 +12266,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;
@@ -11772,7 +12286,7 @@
 
 
   // ============================================
-  // File 22/37: components/currency.js
+  // File 22/42: components/currency.js
   // ============================================
 
   /**
@@ -11802,7 +12316,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
@@ -11989,7 +12503,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;
@@ -12005,7 +12524,7 @@
 
 
   // ============================================
-  // File 23/37: components/textarea.js
+  // File 23/42: components/textarea.js
   // ============================================
 
   /**
@@ -12030,7 +12549,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() {
@@ -12125,7 +12644,347 @@
 
 
   // ============================================
-  // File 24/37: components/checkbox.js
+  // File 24/42: 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 wrapper = document.createElement("div");
+      wrapper.className = "w-full rounded-12 border border-borderColor-border-primary shadow-soft-2x-small";
+
+      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"
+      );
+      editorEl.style.minHeight = minHeightPx + "px";
+      if (value) editorEl.innerHTML = value;
+      editorEl.setAttribute("data-placeholder", placeholder);
+
+      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();
+
+      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;
+      };
+      wrapper.getValue = function () {
+        return getHtml();
+      };
+      wrapper.setValue = function (v) {
+        setHtml(v);
+      };
+      wrapper.setDisabled = function (d) {
+        disabled = !!d;
+        editorEl.contentEditable = !disabled;
+        toolbar.querySelectorAll("button").forEach(function (b) {
+          b.disabled = disabled;
+        });
+      };
+
+      return wrapper;
+    }
+
+    global.RichTextEditorComponent = {
+      create: create,
+    };
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 25/42: components/checkbox.js
   // ============================================
 
   /**
@@ -12164,10 +13023,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";
@@ -12231,12 +13098,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");
@@ -12353,6 +13224,7 @@
         } else {
           checkboxBox.removeAttribute("aria-disabled");
         }
+        applyCheckboxBoxClasses();
         updateCheckedState();
       };
 
@@ -12385,7 +13257,210 @@
 
 
   // ============================================
-  // File 25/37: components/radio-group.js
+  // File 26/42: 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/42: components/radio-group.js
   // ============================================
 
   /**
@@ -12796,7 +13871,296 @@
 
 
   // ============================================
-  // File 26/37: components/enumeration.js
+  // File 28/42: components/card-select.js
+  // ============================================
+
+  /**
+   * CardSelect Component (vanilla JS)
+   * Full-width clickable card selection with icon, title, description, and check indicator.
+   * Drop-in replacement / upgrade to RadioGroup when visual card UI is preferred.
+   */
+
+  (function (global) {
+
+    var COLORS = {
+      selectedBorder: "#175259",
+      unselectedBorder: "#e5e7eb",
+      selectedBg: "#f0f9f8",
+      unselectedBg: "#ffffff",
+      selectedShadow: "0px 0px 0px 2px #e9f7f5",
+      unselectedShadow: "0px 1.5px 4px -1px rgba(10,9,11,0.07)",
+      hoverBorder: "#9ca3af",
+      hoverShadow: "0px 5px 13px -5px rgba(10,9,11,0.05), 0px 2px 4px -1px rgba(10,9,11,0.02)",
+      iconSelectedBg: "#d0ede9",
+      iconUnselectedBg: "#f3f4f6",
+      iconSelectedColor: "#175259",
+      iconUnselectedColor: "#6b7280",
+      titleSelected: "#175259",
+      titleUnselected: "#111827",
+      descSelected: "#35b18b",
+      descUnselected: "#6b7280",
+      checkBorderSelected: "#175259",
+      checkBorderUnselected: "#d1d5db",
+      checkBgSelected: "#175259",
+      checkBgUnselected: "transparent",
+    };
+
+    var CHECK_ICON =
+      '<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
+    function join() {
+      return Array.prototype.filter.call(arguments, Boolean).join(" ");
+    }
+
+    function applyCardStyles(card, isSelected) {
+      card.style.borderColor = isSelected ? COLORS.selectedBorder : COLORS.unselectedBorder;
+      card.style.background = isSelected ? COLORS.selectedBg : COLORS.unselectedBg;
+      card.style.boxShadow = isSelected ? COLORS.selectedShadow : COLORS.unselectedShadow;
+    }
+
+    function applyIconStyles(iconWrapper, isSelected) {
+      iconWrapper.style.background = isSelected ? COLORS.iconSelectedBg : COLORS.iconUnselectedBg;
+      iconWrapper.style.color = isSelected ? COLORS.iconSelectedColor : COLORS.iconUnselectedColor;
+    }
+
+    function applyTitleStyles(titleEl, isSelected) {
+      titleEl.style.color = isSelected ? COLORS.titleSelected : COLORS.titleUnselected;
+    }
+
+    function applyDescStyles(descEl, isSelected) {
+      descEl.style.color = isSelected ? COLORS.descSelected : COLORS.descUnselected;
+    }
+
+    function applyCheckStyles(checkEl, isSelected) {
+      checkEl.style.borderColor = isSelected ? COLORS.checkBorderSelected : COLORS.checkBorderUnselected;
+      checkEl.style.background = isSelected ? COLORS.checkBgSelected : COLORS.checkBgUnselected;
+      checkEl.innerHTML = isSelected ? CHECK_ICON : "";
+    }
+
+    /**
+     * Create a card select component
+     * @param {Object} config
+     * @param {string} [config.name] - name attribute for the group (used for id generation)
+     * @param {Array} config.options - array of { value, label, description?, icon?, disabled? }
+     * @param {string} [config.defaultValue] - initial selected value
+     * @param {string} [config.value] - controlled value (takes priority over defaultValue)
+     * @param {boolean} [config.disabled] - disable all cards
+     * @param {string} [config.className] - extra class on wrapper
+     * @param {Function} [config.onChange] - change handler (receives selected value)
+     * @returns {HTMLElement} wrapper element with getValue/setValue/setDisabled API
+     */
+    function create(config) {
+      var opts = config || {};
+      var name = opts.name || "card-select-" + Math.random().toString(36).substr(2, 9);
+      var options = opts.options || [];
+      var defaultValue = opts.defaultValue;
+      var selectedValue = opts.value !== undefined ? opts.value : defaultValue;
+      var disabled = !!opts.disabled;
+      var className = opts.className || "";
+      var onChange = opts.onChange;
+
+      // Wrapper container
+      var wrapper = document.createElement("div");
+      wrapper.setAttribute("role", "radiogroup");
+      wrapper.setAttribute("dir", "ltr");
+      wrapper.className = join("flex flex-col gap-3 w-full", className);
+
+      function updateAllCards(newValue) {
+        var cards = wrapper.querySelectorAll("[data-card-value]");
+        cards.forEach(function (card) {
+          var cv = card.dataset.cardValue;
+          var active = cv === newValue;
+          applyCardStyles(card, active);
+          card.setAttribute("aria-checked", active ? "true" : "false");
+          var iw = card.querySelector("[data-icon]");
+          var titleEl = card.querySelector("[data-title]");
+          var descEl = card.querySelector("[data-desc]");
+          var checkEl = card.querySelector("[data-check]");
+          if (iw) applyIconStyles(iw, active);
+          if (titleEl) applyTitleStyles(titleEl, active);
+          if (descEl) applyDescStyles(descEl, active);
+          if (checkEl) applyCheckStyles(checkEl, active);
+        });
+      }
+
+      options.forEach(function (option, index) {
+        var optionValue = option.value;
+        var optionLabel = option.label || option.value;
+        var optionDesc = option.description || "";
+        var optionIcon = option.icon || "";
+        var optionDisabled = disabled || !!option.disabled;
+        var isSelected = optionValue === selectedValue;
+
+        // Card element
+        var card = document.createElement("div");
+        card.dataset.cardValue = optionValue;
+        card.id = name + "-card-" + index;
+        card.setAttribute("role", "radio");
+        card.setAttribute("aria-checked", isSelected ? "true" : "false");
+        card.setAttribute("tabindex", optionDisabled ? "-1" : "0");
+
+        card.style.cssText = [
+          "display: flex",
+          "align-items: flex-start",
+          "gap: 16px",
+          "padding: 18px 20px",
+          "border-radius: 10px",
+          "border: 1.5px solid " + (isSelected ? COLORS.selectedBorder : COLORS.unselectedBorder),
+          "background: " + (isSelected ? COLORS.selectedBg : COLORS.unselectedBg),
+          "cursor: " + (optionDisabled ? "not-allowed" : "pointer"),
+          "transition: border-color 0.15s, background 0.15s, box-shadow 0.15s",
+          "box-shadow: " + (isSelected ? COLORS.selectedShadow : COLORS.unselectedShadow),
+          "user-select: none",
+          optionDisabled ? "opacity: 0.5" : "",
+        ].filter(Boolean).join("; ");
+
+        // Icon wrapper (only rendered when icon is provided)
+        if (optionIcon) {
+          var iconWrapper = document.createElement("div");
+          iconWrapper.dataset.icon = "";
+          iconWrapper.style.cssText = [
+            "flex-shrink: 0",
+            "width: 44px",
+            "height: 44px",
+            "border-radius: 8px",
+            "background: " + (isSelected ? COLORS.iconSelectedBg : COLORS.iconUnselectedBg),
+            "display: flex",
+            "align-items: center",
+            "justify-content: center",
+            "color: " + (isSelected ? COLORS.iconSelectedColor : COLORS.iconUnselectedColor),
+            "transition: background 0.15s, color 0.15s",
+          ].join("; ");
+          iconWrapper.innerHTML = optionIcon;
+          card.appendChild(iconWrapper);
+        }
+
+        // Text wrapper
+        var textWrapper = document.createElement("div");
+        textWrapper.style.cssText = "display: flex; flex-direction: column; gap: 4px; flex: 1;";
+
+        var titleEl = document.createElement("span");
+        titleEl.dataset.title = "";
+        titleEl.textContent = optionLabel;
+        titleEl.style.cssText = [
+          "font-size: 14px",
+          "font-weight: 600",
+          "color: " + (isSelected ? COLORS.titleSelected : COLORS.titleUnselected),
+          "line-height: 1.4",
+          "transition: color 0.15s",
+        ].join("; ");
+        textWrapper.appendChild(titleEl);
+
+        if (optionDesc) {
+          var descEl = document.createElement("span");
+          descEl.dataset.desc = "";
+          descEl.textContent = optionDesc;
+          descEl.style.cssText = [
+            "font-size: 12px",
+            "color: " + (isSelected ? COLORS.descSelected : COLORS.descUnselected),
+            "line-height: 1.5",
+            "transition: color 0.15s",
+          ].join("; ");
+          textWrapper.appendChild(descEl);
+        }
+
+        card.appendChild(textWrapper);
+
+        // Check indicator (radio circle in top-right)
+        var checkEl = document.createElement("div");
+        checkEl.dataset.check = "";
+        checkEl.style.cssText = [
+          "flex-shrink: 0",
+          "width: 18px",
+          "height: 18px",
+          "border-radius: 50%",
+          "border: 2px solid " + (isSelected ? COLORS.checkBorderSelected : COLORS.checkBorderUnselected),
+          "background: " + (isSelected ? COLORS.checkBgSelected : COLORS.checkBgUnselected),
+          "display: flex",
+          "align-items: center",
+          "justify-content: center",
+          "margin-top: 2px",
+          "transition: all 0.15s",
+        ].join("; ");
+        if (isSelected) {
+          checkEl.innerHTML = CHECK_ICON;
+        }
+        card.appendChild(checkEl);
+
+        // Hover and focus styles
+        if (!optionDisabled) {
+          card.addEventListener("mouseenter", function () {
+            if (card.getAttribute("aria-checked") !== "true") {
+              card.style.borderColor = COLORS.hoverBorder;
+              card.style.boxShadow = COLORS.hoverShadow;
+            }
+          });
+          card.addEventListener("mouseleave", function () {
+            if (card.getAttribute("aria-checked") !== "true") {
+              card.style.borderColor = COLORS.unselectedBorder;
+              card.style.boxShadow = COLORS.unselectedShadow;
+            }
+          });
+
+          // Click handler
+          card.addEventListener("click", function () {
+            if (optionDisabled || disabled) return;
+            selectedValue = optionValue;
+            updateAllCards(selectedValue);
+            if (typeof onChange === "function") {
+              onChange(selectedValue);
+            }
+          });
+
+          // Keyboard support
+          card.addEventListener("keydown", function (e) {
+            if (optionDisabled || disabled) return;
+            if (e.key === " " || e.key === "Enter") {
+              e.preventDefault();
+              card.click();
+            }
+          });
+        }
+
+        wrapper.appendChild(card);
+      });
+
+      // Public API
+      wrapper.getValue = function () {
+        return selectedValue !== undefined ? selectedValue : null;
+      };
+
+      wrapper.setValue = function (newValue) {
+        selectedValue = newValue;
+        updateAllCards(newValue);
+      };
+
+      wrapper.setDisabled = function (isDisabled) {
+        disabled = !!isDisabled;
+        wrapper.querySelectorAll("[data-card-value]").forEach(function (card) {
+          card.style.cursor = disabled ? "not-allowed" : "pointer";
+          card.style.opacity = disabled ? "0.5" : "1";
+          card.setAttribute("tabindex", disabled ? "-1" : "0");
+        });
+      };
+
+      return wrapper;
+    }
+
+    var CardSelect = {
+      create: create,
+    };
+
+    if (typeof module !== "undefined" && module.exports) {
+      module.exports = CardSelect;
+    } else {
+      global.CardSelect = CardSelect;
+    }
+  })(typeof window !== "undefined" ? window : undefined);
+
+
+
+  // ============================================
+  // File 29/42: components/enumeration.js
   // ============================================
 
   /**
@@ -12808,7 +14172,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:
@@ -12832,7 +14196,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 =
@@ -12891,20 +14255,23 @@
       var iconSize = opts.iconSize || "default";
       var defaultValue = opts.defaultValue;
       var disabled = opts.disabled === true;
-      var readOnly = opts.readOnly === true;
-      var className = opts.className || "";
-      var onValueChange = opts.onValueChange;
-      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
-      );
+      var readOnly = opts.readOnly === true;
+      var className = opts.className || "";
+      var onValueChange = opts.onValueChange;
+      var children = opts.children;
+
+      var wrapper = document.createElement("div");
+      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 =
@@ -12974,6 +14341,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;
     }
 
@@ -13015,7 +14398,7 @@
 
 
   // ============================================
-  // File 27/37: components/time-picker.js
+  // File 30/42: components/time-picker.js
   // ============================================
 
   /**
@@ -13376,7 +14759,7 @@
 
 
   // ============================================
-  // File 28/37: components/duration/duration-utils.js
+  // File 31/42: components/duration/duration-utils.js
   // ============================================
 
   /**
@@ -13546,7 +14929,7 @@
 
 
   // ============================================
-  // File 29/37: components/duration/duration-constants.js
+  // File 32/42: components/duration/duration-constants.js
   // ============================================
 
   /**
@@ -13598,7 +14981,7 @@
 
 
   // ============================================
-  // File 30/37: components/duration/duration.js
+  // File 33/42: components/duration/duration.js
   // ============================================
 
   /**
@@ -13642,7 +15025,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() {
@@ -14035,8 +15418,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();
       };
@@ -14052,7 +15440,7 @@
 
 
   // ============================================
-  // File 31/37: components/date-time-picker/date-time-picker-utils.js
+  // File 34/42: components/date-time-picker/date-time-picker-utils.js
   // ============================================
 
   /**
@@ -14311,7 +15699,7 @@
 
 
   // ============================================
-  // File 32/37: components/date-time-picker/date-time-picker.js
+  // File 35/42: components/date-time-picker/date-time-picker.js
   // ============================================
 
   /**
@@ -14556,13 +15944,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");
@@ -14830,8 +16220,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();
       };
@@ -14847,7 +16236,7 @@
 
 
   // ============================================
-  // File 33/37: components/phone-input/phone-utils.js
+  // File 36/42: components/phone-input/phone-utils.js
   // ============================================
 
   /**
@@ -15010,7 +16399,7 @@
 
 
   // ============================================
-  // File 34/37: components/phone-input/phone-input.js
+  // File 37/42: components/phone-input/phone-input.js
   // ============================================
 
   /**
@@ -15408,7 +16797,7 @@
 
 
   // ============================================
-  // File 35/37: components/file-input.js
+  // File 38/42: components/file-input.js
   // ============================================
 
   /**
@@ -15452,6 +16841,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
@@ -15463,26 +16861,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}`;
@@ -15526,8 +16929,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,
@@ -15539,7 +16970,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");
@@ -15557,12 +16995,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
@@ -15570,31 +17029,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)
@@ -15775,13 +17244,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";
@@ -15918,6 +17387,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;
     }
 
@@ -15932,7 +17427,7 @@
 
 
   // ============================================
-  // File 36/37: components/table.js
+  // File 39/42: components/table.js
   // ============================================
 
   /**
@@ -16273,7 +17768,455 @@
 
 
   // ============================================
-  // File 37/37: index.js
+  // File 40/42: 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 41/42: 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 42/42: index.js
   // ============================================
 
   /**
@@ -16349,6 +18292,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");
@@ -16364,8 +18308,12 @@
       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/card-select.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) {
@@ -16376,6 +18324,7 @@
               getSdk: global.superleapClient.getSdk,
               isAvailable: global.superleapClient.isAvailable,
               getDefaultConfig: global.superleapClient.getDefaultConfig,
+              getBaseUrl: global.superleapClient.getBaseUrl,
             }
           : null;
 
@@ -16391,6 +18340,7 @@
               getSdk: window.superleapClient.getSdk,
               isAvailable: window.superleapClient.isAvailable,
               getDefaultConfig: window.superleapClient.getDefaultConfig,
+              getBaseUrl: window.superleapClient.getBaseUrl,
             }
           : null;
 
@@ -16426,6 +18376,7 @@
           "InputComponent",
           "CurrencyComponent",
           "TextareaComponent",
+          "RichTextEditorComponent",
           "Duration",
           "DateTimePicker",
           "Enumeration",
@@ -16437,8 +18388,12 @@
           "FileInput",
           "PhoneInput",
           "Checkbox",
+          "CheckboxGroup",
           "RadioGroup",
+          "CardSelect",
           "SuperleapTable",
+          "Tabs",
+          "Steps",
         ];
 
         componentNames.forEach((name) => {
@@ -16468,6 +18423,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
@@ -16526,7 +18482,7 @@
             },
           });
           document.dispatchEvent(event);
-          console.log("[Superleap-Flow] Library ready - v2.3.4");
+          console.log("[Superleap-Flow] Library ready - v2.5.3");
         }
 
         // Wait for DOM to be ready before dispatching event