@openg2p/registry-widgets 1.1.2-dev.6 → 1.1.2-dev.8

package/dist/index.esm.js

@@ -402,6 +402,18 @@ const createZodSchema = (validation, required = false) => {
     return schema;
 };
 
+const normalizeBooleanLike = (val) => {
+    if (val === true || val === 1)
+        return true;
+    if (val === false || val === 0 || val === null || val === undefined || val === '') {
+        return false;
+    }
+    if (typeof val === 'string') {
+        const normalized = val.trim().toLowerCase();
+        return normalized === 'true' || normalized === 'yes' || normalized === '1';
+    }
+    return Boolean(val);
+};
 /**
  * Evaluate condition against field value
  */
@@ -410,6 +422,9 @@ const evaluateCondition = (condition, allValues) => {
     const { operator, value } = condition;
     switch (operator) {
         case 'equals':
+            if (typeof value === 'boolean' || typeof fieldValue === 'boolean') {
+                return normalizeBooleanLike(fieldValue) === normalizeBooleanLike(value);
+            }
             return fieldValue === value;
         case 'notEquals':
             return fieldValue !== value;
@@ -442,37 +457,62 @@ const evaluateCondition = (condition, allValues) => {
     }
 };
 /**
- * Check if widget should be visible based on conditions
+ * Normalize widget-data-options into a sequential list of action rules.
+ * Supports legacy single { action, condition } and new { actions: [...] }.
  */
-const shouldShowWidget = (options, allValues) => {
-    if (!options?.condition) {
-        return true;
+const normalizeOptionRules = (options) => {
+    if (!options) {
+        return [];
     }
-    const conditionResult = evaluateCondition(options.condition, allValues);
-    if (options.action === 'show') {
-        return conditionResult;
+    if (Array.isArray(options.actions) && options.actions.length > 0) {
+        return options.actions.filter((rule) => !!rule?.action);
     }
-    if (options.action === 'hide') {
-        return !conditionResult;
+    if (options.action && options.condition) {
+        return [{ action: options.action, condition: options.condition }];
     }
-    return true;
+    return [];
+};
+const hasVisibilityRules = (options) => {
+    return normalizeOptionRules(options).some((rule) => rule.action === 'show' || rule.action === 'hide');
 };
 /**
- * Check if widget should be enabled based on conditions
+ * Evaluate widget-data-options rules sequentially.
+ * show/hide and enable/disable only affect visibility and enabled state.
+ * require is independent: required = widget-required OR require-condition-match.
  */
-const shouldEnableWidget = (options, allValues) => {
-    if (!options?.condition) {
-        return true;
-    }
-    const conditionResult = evaluateCondition(options.condition, allValues);
-    if (options.action === 'enable') {
-        return conditionResult;
-    }
-    if (options.action === 'disable') {
-        return !conditionResult;
+const evaluateWidgetConditions = (options, allValues, baseRequired = false) => {
+    let visible = true;
+    let enabled = true;
+    let required = baseRequired;
+    const rules = normalizeOptionRules(options);
+    for (const rule of rules) {
+        if (!rule.condition) {
+            continue;
+        }
+        const match = evaluateCondition(rule.condition, allValues);
+        switch (rule.action) {
+            case 'show':
+                visible = match;
+                break;
+            case 'hide':
+                visible = !match;
+                break;
+            case 'enable':
+                enabled = match;
+                break;
+            case 'disable':
+                enabled = !match;
+                break;
+            case 'require':
+                required = baseRequired || match;
+                break;
+        }
     }
-    return true;
+    return { visible, enabled, required };
 };
+const shouldShowWidget = (options, allValues) => evaluateWidgetConditions(options, allValues).visible;
+const shouldEnableWidget = (options, allValues) => evaluateWidgetConditions(options, allValues).enabled;
+const shouldRequireWidget = (options, allValues, baseRequired = false) => evaluateWidgetConditions(options, allValues, baseRequired).required;
 
 /**
  * Format number with thousand and decimal separators
@@ -1042,6 +1082,67 @@ const formatValue = (value, format, widgetType) => {
     return value?.toString() || '';
 };
 
+const apiDataSourceCache = new Map();
+const apiDataSourceInflight = new Map();
+function buildApiRequestContext(dataSource, allValues, levelId) {
+    let depValue = null;
+    if (dataSource.dependsOn) {
+        if (dataSource.dependsOn.includes('.')) {
+            depValue = getValueByPath(allValues, dataSource.dependsOn);
+        }
+        else {
+            depValue = resolveWidgetIdValue(allValues, dataSource.dependsOn);
+        }
+        if (depValue === null || depValue === undefined || depValue === '') {
+            return null;
+        }
+    }
+    const method = dataSource.method || 'GET';
+    const staticParams = { ...dataSource.params };
+    const standardFields = ['type', 'service', 'endpoint', 'url', 'method', 'dependsOn', 'valueKey', 'labelKey', 'headers', 'body', 'params', 'level_id'];
+    for (const [key, value] of Object.entries(dataSource)) {
+        if (!standardFields.includes(key) && value !== undefined && value !== null) {
+            staticParams[key] = value;
+        }
+    }
+    if (levelId) {
+        staticParams.level_id = levelId;
+    }
+    const requestParams = { ...staticParams };
+    if (dataSource.dependsOn && depValue !== null && depValue !== undefined) {
+        const parentValueId = typeof depValue === 'object' && depValue !== null
+            ? (depValue.level_value_id || depValue.id || depValue.value || depValue)
+            : depValue;
+        if (staticParams.level_id) {
+            requestParams.parent_level_value_id = parentValueId;
+        }
+        else {
+            const paramKey = dataSource.dependsOn.split('.').pop() || 'filter';
+            requestParams[paramKey] = parentValueId;
+        }
+    }
+    else if (staticParams.level_id) {
+        requestParams.parent_level_value_id = '';
+    }
+    const service = dataSource.service;
+    const endpoint = dataSource.endpoint;
+    if (!service || !endpoint) {
+        return null;
+    }
+    return { service, endpoint, method, requestParams };
+}
+function buildApiDataSourceCacheKey(service, endpoint, method, requestParams) {
+    return `${service}|${endpoint}|${method}|${JSON.stringify(requestParams)}`;
+}
+/** Return cached API options when already fetched (e.g. duplicate table cells). */
+function getCachedApiDataSource(dataSource, allValues, levelId) {
+    const context = buildApiRequestContext(dataSource, allValues, levelId);
+    if (!context) {
+        return undefined;
+    }
+    const cacheKey = buildApiDataSourceCacheKey(context.service, context.endpoint, context.method, context.requestParams);
+    return apiDataSourceCache.get(cacheKey);
+}
 /**
  * Get static data source options
  */
@@ -1059,98 +1160,33 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
         return [];
     }
     try {
-        // Get dependency value if exists
-        // dependsOn can be either a data path (e.g., "person.address") or a widget-id
-        let depValue = null;
-        if (dataSource.dependsOn) {
-            if (dataSource.dependsOn.includes('.')) {
-                depValue = getValueByPath(allValues, dataSource.dependsOn);
-            }
-            else {
-                depValue = resolveWidgetIdValue(allValues, dataSource.dependsOn);
-            }
-            if (depValue === null || depValue === undefined || depValue === '') {
-                // If dependency is empty, return empty array
-                return [];
-            }
-        }
-        // Build request parameters
-        const method = dataSource.method || 'GET';
-        // Extract static params from dataSource
-        // Include explicit params object and any additional fields (like level_id)
-        const staticParams = { ...dataSource.params };
-        // Extract additional fields that aren't part of the standard ApiDataSource interface
-        // These are fields like level_id that might be directly on the dataSource
-        // BUT: level_id should come from widget-geo-config.level, not from dataSource
-        const standardFields = ['type', 'service', 'endpoint', 'url', 'method', 'dependsOn', 'valueKey', 'labelKey', 'headers', 'body', 'params', 'level_id'];
-        for (const [key, value] of Object.entries(dataSource)) {
-            if (!standardFields.includes(key) && value !== undefined && value !== null) {
-                staticParams[key] = value;
-            }
-        }
-        // If levelId is provided (from widget-geo-config.level), use it instead of any level_id in dataSource
-        if (levelId) {
-            staticParams.level_id = levelId;
-        }
-        // Build request params object
-        const requestParams = { ...staticParams };
-        // Add dependency value to params
-        if (dataSource.dependsOn && depValue !== null && depValue !== undefined) {
-            // Extract the actual value ID if depValue is an object
-            const parentValueId = typeof depValue === 'object' && depValue !== null
-                ? (depValue.level_value_id || depValue.id || depValue.value || depValue)
-                : depValue;
-            // For geo APIs, use parent_level_value_id
-            if (staticParams.level_id) {
-                requestParams.parent_level_value_id = parentValueId;
-            }
-            else {
-                // For other APIs, use the dependency field name as param key
-                const paramKey = dataSource.dependsOn.split('.').pop() || 'filter';
-                requestParams[paramKey] = parentValueId;
-            }
-        }
-        else if (staticParams.level_id) {
-            // First level has no parent, send empty string as many OpenG2P APIs expect it
-            requestParams.parent_level_value_id = "";
-        }
-        // Get service mnemonic and endpoint (required)
-        const service = dataSource.service;
-        const endpoint = dataSource.endpoint;
-        if (!service) {
-            console.error('[getApiDataSource] API data source missing service mnemonic. Use "service" field instead of "url"');
-            return [];
-        }
-        if (!endpoint) {
-            console.error('[getApiDataSource] API data source missing endpoint. Use "endpoint" field to specify the operation (e.g., "get_g2p_geo_level_values")');
+        const context = buildApiRequestContext(dataSource, allValues, levelId);
+        if (!context) {
             return [];
         }
-        // Call handler — let any throw propagate to the outer catch so it is logged once
-        // by useBaseWidget rather than double-logged here (which can cascade when
-        // intercept-console-error.js converts console.error calls into thrown errors).
-        const response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
-            headers: dataSource.headers,
-        });
-        // Handle OpenG2P response format (response_body.response_payload)
-        if (response && typeof response === 'object') {
-            if (response.response_body?.response_payload && Array.isArray(response.response_body.response_payload)) {
-                return response.response_body.response_payload;
-            }
-        }
-        // Handle array response
-        if (Array.isArray(response)) {
-            return response;
+        const { service, endpoint, method, requestParams } = context;
+        const cacheKey = buildApiDataSourceCacheKey(service, endpoint, method, requestParams);
+        const cached = apiDataSourceCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const inflight = apiDataSourceInflight.get(cacheKey);
+        if (inflight) {
+            return inflight;
+        }
+        const fetchPromise = (async () => {
+            const response = await dataSourceRequestHandler(service, endpoint, method, requestParams, { headers: dataSource.headers });
+            const parsed = Array.isArray(response) ? response : [];
+            apiDataSourceCache.set(cacheKey, parsed);
+            return parsed;
+        })();
+        apiDataSourceInflight.set(cacheKey, fetchPromise);
+        try {
+            return await fetchPromise;
         }
-        // Handle object response (extract array from common keys)
-        if (response && typeof response === 'object') {
-            if (response.data && Array.isArray(response.data)) {
-                return response.data;
-            }
-            if (response.results && Array.isArray(response.results)) {
-                return response.results;
-            }
+        finally {
+            apiDataSourceInflight.delete(cacheKey);
         }
-        return [];
     }
     catch (error) {
         // Rethrow so useBaseWidget's catch can log it with full widget context
@@ -1936,6 +1972,98 @@ const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate
     return content;
 };
 
+/**
+ * Custom hook for widget translations
+ * Provides translation function with widget-specific namespace and fallback support
+ */
+const useWidgetTranslation = () => {
+    const { translate: translateFunction } = useWidgetContext();
+    /**
+     * Translate a key with flexible namespace support
+     * Supports translation keys in various formats and direct strings
+     *
+     * Translation key formats supported:
+     * - "widgets:common.addItem" - Namespaced key (for widget-specific translations)
+     * - "Name" - Direct string (will be looked up in flat translation structure)
+     * - "sections.personalDetails" - Nested key (for backward compatibility)
+     *
+     * With flat translation structure, direct strings like "Name" are automatically
+     * translated by looking them up in the translation resources.
+     *
+     * @param keyOrString - Translation key (e.g., "widgets:common.addItem") or direct string (e.g., "Name")
+     * @param options - Translation options (interpolation values, default value, etc.)
+     * @returns Translated string or original string if translation not found
+     */
+    const translate = (keyOrString, options) => {
+        if (!keyOrString) {
+            return options?.defaultValue || '';
+        }
+        // Use the provided translation function or fallback to the key
+        if (translateFunction) {
+            return translateFunction(keyOrString, options) || options?.defaultValue || keyOrString;
+        }
+        // Fallback to key if no translation function available
+        return options?.defaultValue || keyOrString;
+    };
+    /**
+     * Translate widget config property
+     * Attempts to translate the value, but if translation is not found,
+     * returns the original value as-is (graceful fallback)
+     *
+     * This function will:
+     * - Try to translate any string value
+     * - If translation exists, use the translated value
+     * - If translation doesn't exist (returns same value or throws), use original value
+     * - This prevents errors when literal strings like "XXXX-XXXX-XXXX" are used
+     */
+    const translateConfig = (value, fallback) => {
+        if (!value) {
+            return fallback || '';
+        }
+        // Try to translate the value
+        if (translateFunction) {
+            try {
+                // Pass defaultValue to ensure we get the original value if translation fails
+                const translated = translateFunction(value, { defaultValue: value });
+                // If translation returns empty, null, undefined, or the exact same value,
+                // it means no translation was found - return the original value
+                if (!translated || translated === value) {
+                    return value;
+                }
+                // Translation found, return it
+                return translated;
+            }
+            catch (error) {
+                // If translation throws an error (e.g., missing key warning), return original value
+                return value;
+            }
+        }
+        // No translation function available, return value as-is
+        return value;
+    };
+    // No need of this getLanguage and changeLanguage functions
+    /**
+     * Get current language
+     */
+    // const getLanguage = (): string => {
+    //   return i18n.language || 'en';
+    // };
+    /**
+     * Change language
+     */
+    // const changeLanguage = (lng: string): Promise<void> => {
+    //   return i18n.changeLanguage(lng).then(() => undefined);
+    // };
+    return {
+        t: translate,
+        translate,
+        translateConfig,
+        // getLanguage,
+        // changeLanguage,
+        // i18n: null,
+    };
+};
+
 /**
  * Geo Hierarchy Builder
  * Manages geo hierarchy state and builds hierarchy JSON structure
@@ -2135,6 +2263,42 @@ function isUpstreamGeoAncestor(changedWidgetId, widgetId, immediateParentWidgetI
     }
     return false;
 }
+/** Group id for geo widgets sharing the same register prefix (e.g. `{registerId}`). */
+function getGeoGroupId(dataPath) {
+    if (typeof dataPath === 'string' && dataPath.includes('.')) {
+        return dataPath.split('.').slice(0, -1).join('.');
+    }
+    return 'default';
+}
+/**
+ * Resolve the human-readable label for a geo level from persisted hierarchy JSON.
+ * Used in readonly mode when API options are not loaded.
+ */
+function resolveGeoWidgetLevelLabel(values, widgetId, dataPath, geoConfig) {
+    if (!dataPath || typeof dataPath !== 'string') {
+        return undefined;
+    }
+    const stored = getWidgetValue(values, dataPath, widgetId);
+    const hierarchy = stored?.hierarchy || stored?.geo_code_hierarchy_json?.hierarchy;
+    if (!Array.isArray(hierarchy)) {
+        return undefined;
+    }
+    const levelData = hierarchy.find((l) => l.level === geoConfig.level);
+    if (levelData?.level_value_mnemonic) {
+        return String(levelData.level_value_mnemonic);
+    }
+    return undefined;
+}
+/** All registered geo widgets that are descendants of ancestorWidgetId. */
+function getGeoDescendantWidgetIds(ancestorWidgetId) {
+    const descendants = [];
+    for (const [childId, parentId] of geoWidgetParentRegistry.entries()) {
+        if (isUpstreamGeoAncestor(ancestorWidgetId, childId, parentId)) {
+            descendants.push(childId);
+        }
+    }
+    return descendants;
+}
 function readStoredHierarchyLevels(values, dataPath, widgetId) {
     const stored = getWidgetValue(values, dataPath, widgetId);
     const hierarchy = stored?.hierarchy || stored?.geo_code_hierarchy_json?.hierarchy;
@@ -2185,6 +2349,7 @@ const useBaseWidget = (options) => {
     const dispatch = useDispatch();
     const context = useWidgetContext();
     const eventBus = useWidgetEventBus();
+    const { translateConfig } = useWidgetTranslation();
     const widgetId = config['widget-id'];
     // Fall back to WidgetContext for dataSourceRequestHandler
     const dataSourceRequestHandler = propHandler || context.dataSourceRequestHandler;
@@ -2355,6 +2520,15 @@ const useBaseWidget = (options) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLayoutWidget]); // Only run once on mount
+    const resolveIsRequired = useCallback((currentValues) => {
+        if (isLayoutWidget) {
+            return false;
+        }
+        if (config['widget-readonly']) {
+            return false;
+        }
+        return evaluateWidgetConditions(config['widget-data-options'], currentValues, config['widget-required'] ?? false).required;
+    }, [config, isLayoutWidget]);
     // Handle value change
     // CRITICAL: Don't include 'values' in dependency array - it causes the callback to be recreated
     // every time values change, which can lead to stale closures and double dispatches
@@ -2398,29 +2572,26 @@ const useBaseWidget = (options) => {
             lastDispatchedValueRef.current = newValue;
             dispatch(setValue({ widgetId, value: newValue }));
         }
+        else if (config['widget-geo-config']) {
+            // Geo widgets: hierarchy dataPath is managed by useGeoWidgetCascade
+            getGeoDescendantWidgetIds(widgetId).forEach((descendantId) => {
+                dispatch(setValue({ widgetId: descendantId, value: GEO_LEVEL_CLEARED }));
+                dispatch(setDataSource({ widgetId: descendantId, data: [] }));
+            });
+            dispatch(setValue({ widgetId, value: newValue }));
+        }
         else {
-            // Has dataPath: update both widgetId and dataPath
-            // CRITICAL: For geo widgets, we do NOT want to overwrite the shared hierarchy dataPath
-            // with a primitive value (the selected ID). The hierarchy object is managed by useGeoWidgetCascade.
-            if (config['widget-geo-config']) {
-                dispatch(setValue({ widgetId, value: newValue }));
-                return;
-            }
-            // For non-geo widgets, update both widgetId and dataPath
-            // CRITICAL: Create updated values object with newValue already set
-            // This prevents setWidgetValue from reading stale values
+            // Non-geo widgets: update both widgetId and dataPath
             const currentValuesWithUpdate = {
                 ...valuesRef.current,
-                [widgetId]: newValue, // Ensure widgetId has the new value
+                [widgetId]: newValue,
             };
             const updatedValues = setWidgetValue(currentValuesWithUpdate, config['widget-data-path'], widgetId, newValue);
-            // setWidgetValue returns the complete updated structure with all existing data preserved
-            // Use setValues to update the entire state with deep merge
             dispatch(setValues(updatedValues));
         }
         // Validate if needed
         if (validate) {
-            const validationErrors = validateWidget(newValue, config['widget-data-validation'], config['widget-required']);
+            const validationErrors = validateWidget(newValue, config['widget-data-validation'], resolveIsRequired(currentValues));
             dispatch(setError({ widgetId, errors: validationErrors }));
         }
         // Call custom onChange if provided
@@ -2439,13 +2610,12 @@ const useBaseWidget = (options) => {
                 timestamp: Date.now(),
             });
         }
-    }, [config, widgetId, dispatch, onValueChange, eventBus] // Removed 'values' to prevent stale closures
+    }, [config, widgetId, dispatch, onValueChange, eventBus, resolveIsRequired] // Removed 'values' to prevent stale closures
     );
     // Handle blur
     const handleBlur = useCallback(() => {
         dispatch(setTouched({ widgetId, touched: true }));
-        // Validate on blur
-        const validationErrors = validateWidget(currentValue, config['widget-data-validation'], config['widget-required']);
+        const validationErrors = validateWidget(currentValue, config['widget-data-validation'], resolveIsRequired(valuesRef.current));
         dispatch(setError({ widgetId, errors: validationErrors }));
         // Publish widget:blur event
         if (eventBus) {
@@ -2456,7 +2626,7 @@ const useBaseWidget = (options) => {
                 timestamp: Date.now(),
             });
         }
-    }, [currentValue, config, widgetId, dispatch, eventBus]);
+    }, [currentValue, config, widgetId, dispatch, eventBus, resolveIsRequired]);
     // Get field value helper
     const getFieldValue = useCallback((path) => {
         return getWidgetValue(values, path, '');
@@ -2464,7 +2634,7 @@ const useBaseWidget = (options) => {
     // Conditional visibility and enablement
     const isVisible = useMemo(() => {
         // Layout widgets are always visible unless explicitly hidden
-        if (isLayoutWidget && !config['widget-data-options']?.condition) {
+        if (isLayoutWidget && !hasVisibilityRules(config['widget-data-options'])) {
             return true;
         }
         return shouldShowWidget(config['widget-data-options'], values);
@@ -2479,6 +2649,7 @@ const useBaseWidget = (options) => {
         }
         return shouldEnableWidget(config['widget-data-options'], values);
     }, [config['widget-readonly'], config['widget-data-options'], values, isLayoutWidget]);
+    const isRequired = useMemo(() => resolveIsRequired(values), [resolveIsRequired, values]);
     // Format value for display
     const formattedValue = useMemo(() => {
         if (!config['widget-data-format']) {
@@ -2525,10 +2696,9 @@ const useBaseWidget = (options) => {
         if (!dataSource) {
             return;
         }
-        // For API data sources, check if widget is readonly
-        // According to PRD: "Level 1 geo widgets load on widget mount or when entering edit mode"
-        // So we should only load API data sources when widget is NOT readonly
-        if (dataSource.type === 'api' && isReadonly) {
+        const loadApiInReadonly = !!geoConfig ||
+            ['select', 'radio', 'checkbox', 'multi-select'].includes(config.widget);
+        if (dataSource.type === 'api' && isReadonly && !loadApiInReadonly) {
             return;
         }
         // For widgets with dependencies, check if dependency value exists
@@ -2570,6 +2740,30 @@ const useBaseWidget = (options) => {
                     // React will call this effect again when the handler is ready
                     return;
                 }
+                const resolveOptionKeys = () => {
+                    if (dataSource.type === 'static') {
+                        return { valueKey: undefined, labelKey: undefined };
+                    }
+                    if (geoConfig) {
+                        return {
+                            valueKey: dataSource.valueKey || 'level_value_id',
+                            labelKey: dataSource.labelKey || 'level_value_mnemonic',
+                        };
+                    }
+                    return { valueKey: dataSource.valueKey, labelKey: dataSource.labelKey };
+                };
+                if (dataSource.type === 'api') {
+                    const levelId = geoConfig?.level;
+                    const cached = getCachedApiDataSource(dataSource, valuesRef.current, levelId);
+                    if (cached) {
+                        const { valueKey, labelKey } = resolveOptionKeys();
+                        dispatch(setDataSource({
+                            widgetId,
+                            data: transformDataSourceOptions(cached, valueKey, labelKey),
+                        }));
+                        return;
+                    }
+                }
                 dispatch(setLoading({ widgetId, loading: true }));
                 let data = [];
                 if (dataSource.type === 'static') {
@@ -2582,31 +2776,13 @@ const useBaseWidget = (options) => {
                         dispatch(setDataSource({ widgetId, data: [] }));
                         return;
                     }
-                    // Extract level_id from widget-geo-config.level if available
                     const levelId = geoConfig?.level;
                     data = await getApiDataSource(dataSource, valuesRef.current, currentHandler, levelId);
                 }
                 else if (dataSource.type === 'schema') {
                     data = getSchemaDataSource(dataSource, schemaData || {});
                 }
-                // Transform to { value, label } format
-                // For geo widgets, default to level_value_id and level_value_mnemonic
-                let valueKey;
-                let labelKey;
-                if (dataSource.type === 'static') {
-                    valueKey = undefined;
-                    labelKey = undefined;
-                }
-                else if (geoConfig) {
-                    // Geo widgets: default to level_value_id and level_value_mnemonic
-                    valueKey = dataSource.valueKey || 'level_value_id';
-                    labelKey = dataSource.labelKey || 'level_value_mnemonic';
-                }
-                else {
-                    // Non-geo widgets: use specified keys or undefined
-                    valueKey = dataSource.valueKey;
-                    labelKey = dataSource.labelKey;
-                }
+                const { valueKey, labelKey } = resolveOptionKeys();
                 const transformed = transformDataSourceOptions(data, valueKey, labelKey);
                 dispatch(setDataSource({ widgetId, data: transformed }));
             }
@@ -2622,15 +2798,24 @@ const useBaseWidget = (options) => {
         // Use configKey and dependencyValue to ensure effect runs only when relevant state changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [configKey, dependencyValue, dataSourceRequestHandler, schemaData, widgetId, dispatch]);
+    const geoDisplayLabel = useMemo(() => {
+        if (!geoConfig) {
+            return undefined;
+        }
+        const rawLabel = resolveGeoWidgetLevelLabel(values, widgetId, config['widget-data-path'], geoConfig);
+        return rawLabel ? translateConfig(rawLabel) : undefined;
+    }, [values, widgetId, config, geoConfig, translateConfig]);
     return {
         widgetId,
         value: currentValue,
+        geoDisplayLabel,
         formattedValue,
         error: errors,
         touched,
         loading,
         isVisible,
         isEnabled,
+        isRequired,
         onChange: handleChange,
         onBlur: handleBlur,
         setError: (errors) => dispatch(setError({ widgetId, errors })),
@@ -2721,6 +2906,7 @@ const useGeoWidgetCascade = (options) => {
     const valuesRef = useRef(values);
     const handlerRef = useRef(dataSourceRequestHandler);
     const lastCascadePublishRef = useRef(undefined);
+    const lastDirectParentValueRef = useRef(undefined);
     // Keep refs updated
     useEffect(() => {
         valuesRef.current = values;
@@ -2790,6 +2976,13 @@ const useGeoWidgetCascade = (options) => {
                 event.value === null ||
                 event.value === '' ||
                 event.value === GEO_LEVEL_CLEARED;
+            const isFirstParentEvent = lastDirectParentValueRef.current === undefined;
+            const parentValueChanged = !isFirstParentEvent &&
+                lastDirectParentValueRef.current !== event.value;
+            lastDirectParentValueRef.current = event.value;
+            if (!parentCleared && !parentValueChanged && !isFirstParentEvent) {
+                return;
+            }
             let parentValue = event.value;
             if (!parentCleared && (parentValue === undefined || parentValue === null)) {
                 parentValue = currentValues[parentWidgetId];
@@ -2897,17 +3090,7 @@ const useGeoWidgetCascade = (options) => {
         if (dataPath && geoHierarchyBuilder.buildHierarchyJson(groupId)) {
             dispatch(setValues(applySharedGeoHierarchyToValues(valuesRef.current, groupId, dataPath, widgetId)));
         }
-        // Notify descendants when this level changes via hierarchy/rehydration (handleChange may not run).
-        if (!isLastLevel && eventBus && lastCascadePublishRef.current !== level_value_id) {
-            lastCascadePublishRef.current = level_value_id;
-            eventBus.publish({
-                type: 'widget:change',
-                widgetId,
-                value: level_value_id,
-                timestamp: Date.now(),
-            });
-        }
-    }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions, eventBus, groupId]);
+    }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions, groupId]);
 };
 
 class WidgetRegistry {
@@ -2984,144 +3167,52 @@ class WidgetRegistry {
             config,
             ...context,
             ...entry.defaultProps,
-        });
-    }
-}
-// Singleton instance
-const widgetRegistry = new WidgetRegistry();
-
-const WidgetRenderer = ({ config, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData: propSchemaData, onValueChange, defaultComponent, }) => {
-    // Use context values as fallback
-    const context = useWidgetContext();
-    const dataSourceRequestHandler = propDataSourceRequestHandler || context.dataSourceRequestHandler;
-    const schemaData = propSchemaData || context.schemaData;
-    // Warn if dataSourceRequestHandler is missing for API data sources, but don't break rendering
-    // This allows widgets to render in read-only or static modes (e.g., CRView)
-    if (!dataSourceRequestHandler && config['widget-data-source']?.type === 'api') {
-        console.warn(`[WidgetRenderer] dataSourceRequestHandler is not provided for widget ${config['widget-id']} with API data source. ` +
-            `The widget will render but API data source functionality will be disabled.`);
-    }
-    // Get values from Redux for cascade hooks
-    const values = useSelector((state) => state.widget.values);
-    const widgetContext = useBaseWidget({
-        config,
-        dataSourceRequestHandler,
-        schemaData,
-        onValueChange,
-    });
-    // Apply cascade hooks if configured (only if handler is available)
-    if (dataSourceRequestHandler) {
-        useWidgetCascade({
-            config,
-            dataSourceRequestHandler,
-            values,
-        });
-        useGeoWidgetCascade({
-            config,
-            dataSourceRequestHandler,
-            values,
-        });
-    }
-    // Don't render if not visible
-    if (!widgetContext.isVisible) {
-        return null;
-    }
-    // Render widget using registry
-    // Don't use key based on readonly state - it causes remounting which resets userHasSetValueRef
-    // The readonly state is already handled in the widget components themselves
-    return (jsxRuntimeExports.jsx("div", { className: "widget-container", "data-widget-id": widgetContext.widgetId, style: { marginBottom: 0 }, children: widgetRegistry.render(config, widgetContext, defaultComponent) }));
-};
-
-/**
- * Custom hook for widget translations
- * Provides translation function with widget-specific namespace and fallback support
- */
-const useWidgetTranslation = () => {
-    const { translate: translateFunction } = useWidgetContext();
-    /**
-     * Translate a key with flexible namespace support
-     * Supports translation keys in various formats and direct strings
-     *
-     * Translation key formats supported:
-     * - "widgets:common.addItem" - Namespaced key (for widget-specific translations)
-     * - "Name" - Direct string (will be looked up in flat translation structure)
-     * - "sections.personalDetails" - Nested key (for backward compatibility)
-     *
-     * With flat translation structure, direct strings like "Name" are automatically
-     * translated by looking them up in the translation resources.
-     *
-     * @param keyOrString - Translation key (e.g., "widgets:common.addItem") or direct string (e.g., "Name")
-     * @param options - Translation options (interpolation values, default value, etc.)
-     * @returns Translated string or original string if translation not found
-     */
-    const translate = (keyOrString, options) => {
-        if (!keyOrString) {
-            return options?.defaultValue || '';
-        }
-        // Use the provided translation function or fallback to the key
-        if (translateFunction) {
-            return translateFunction(keyOrString, options) || options?.defaultValue || keyOrString;
-        }
-        // Fallback to key if no translation function available
-        return options?.defaultValue || keyOrString;
-    };
-    /**
-     * Translate widget config property
-     * Attempts to translate the value, but if translation is not found,
-     * returns the original value as-is (graceful fallback)
-     *
-     * This function will:
-     * - Try to translate any string value
-     * - If translation exists, use the translated value
-     * - If translation doesn't exist (returns same value or throws), use original value
-     * - This prevents errors when literal strings like "XXXX-XXXX-XXXX" are used
-     */
-    const translateConfig = (value, fallback) => {
-        if (!value) {
-            return fallback || '';
-        }
-        // Try to translate the value
-        if (translateFunction) {
-            try {
-                // Pass defaultValue to ensure we get the original value if translation fails
-                const translated = translateFunction(value, { defaultValue: value });
-                // If translation returns empty, null, undefined, or the exact same value,
-                // it means no translation was found - return the original value
-                if (!translated || translated === value) {
-                    return value;
-                }
-                // Translation found, return it
-                return translated;
-            }
-            catch (error) {
-                // If translation throws an error (e.g., missing key warning), return original value
-                return value;
-            }
-        }
-        // No translation function available, return value as-is
-        return value;
-    };
-    // No need of this getLanguage and changeLanguage functions
-    /**
-     * Get current language
-     */
-    // const getLanguage = (): string => {
-    //   return i18n.language || 'en';
-    // };
-    /**
-     * Change language
-     */
-    // const changeLanguage = (lng: string): Promise<void> => {
-    //   return i18n.changeLanguage(lng).then(() => undefined);
-    // };
-    return {
-        t: translate,
-        translate,
-        translateConfig,
-        // getLanguage,
-        // changeLanguage,
-        // i18n: null,
-    };
+        });
+    }
+}
+// Singleton instance
+const widgetRegistry = new WidgetRegistry();
+
+const WidgetRenderer = ({ config, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData: propSchemaData, onValueChange, defaultComponent, }) => {
+    // Use context values as fallback
+    const context = useWidgetContext();
+    const dataSourceRequestHandler = propDataSourceRequestHandler || context.dataSourceRequestHandler;
+    const schemaData = propSchemaData || context.schemaData;
+    // Warn if dataSourceRequestHandler is missing for API data sources, but don't break rendering
+    // This allows widgets to render in read-only or static modes (e.g., CRView)
+    if (!dataSourceRequestHandler && config['widget-data-source']?.type === 'api') {
+        console.warn(`[WidgetRenderer] dataSourceRequestHandler is not provided for widget ${config['widget-id']} with API data source. ` +
+            `The widget will render but API data source functionality will be disabled.`);
+    }
+    // Get values from Redux for cascade hooks
+    const values = useSelector((state) => state.widget.values);
+    const widgetContext = useBaseWidget({
+        config,
+        dataSourceRequestHandler,
+        schemaData,
+        onValueChange,
+    });
+    // Apply cascade hooks if configured (only if handler is available)
+    if (dataSourceRequestHandler) {
+        useWidgetCascade({
+            config,
+            dataSourceRequestHandler,
+            values,
+        });
+        useGeoWidgetCascade({
+            config,
+            dataSourceRequestHandler,
+            values,
+        });
+    }
+    // Don't render if not visible
+    if (!widgetContext.isVisible) {
+        return null;
+    }
+    // Render widget using registry
+    // Don't use key based on readonly state - it causes remounting which resets userHasSetValueRef
+    // The readonly state is already handled in the widget components themselves
+    return (jsxRuntimeExports.jsx("div", { className: "widget-container", "data-widget-id": widgetContext.widgetId, style: { marginBottom: 0 }, children: widgetRegistry.render(config, widgetContext, defaultComponent) }));
 };
 
 /**
@@ -3242,6 +3333,16 @@ const PanelRenderer = ({ panel, dataSourceRequestHandler, schemaData, onValueCha
     return (jsxRuntimeExports.jsx("div", { className: `panel panel-${orientation}`, "data-panel-id": panel['panel-id'], style: orientation === 'horizontal' ? { width: '100%' } : {}, children: content }));
 };
 
+/**
+ * Field label: long text truncates with ellipsis; required asterisk always stays visible.
+ */
+const WidgetFieldLabel = ({ label, required = false, className = '', title, }) => {
+    const { translateConfig } = useWidgetTranslation();
+    const translatedLabel = translateConfig(label);
+    const tooltip = title !== undefined ? translateConfig(title) : translatedLabel;
+    return (jsxRuntimeExports.jsxs("label", { className: `flex items-baseline min-w-0 max-w-full ${className}`, style: { fontFamily: 'Roboto, sans-serif' }, title: tooltip, children: [jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate", children: translatedLabel }), required && jsxRuntimeExports.jsx("span", { className: "ml-1 shrink-0 text-red-500", children: "*" })] }));
+};
+
 /**
  * Utility functions for file preview functionality
  */
@@ -3591,7 +3692,7 @@ const deserializeValue = (value) => {
 };
 
 const FileInputWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const accept = widgetConfig['widget-data-options']?.accept;
     const multiple = widgetConfig['widget-data-options']?.multiple || false;
@@ -3831,7 +3932,7 @@ const FileInputWidget = ({ config }) => {
                         setPreviewFile(null);
                     } })] }));
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:space-x-4", children: [jsxRuntimeExports.jsxs("label", { className: `cursor-pointer inline-flex items-center justify-between gap-2 border border-gray-300 shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${!isEnabled
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:space-x-4", children: [jsxRuntimeExports.jsxs("label", { className: `cursor-pointer inline-flex items-center justify-between gap-2 border border-gray-300 shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${!isEnabled
                                             ? 'opacity-50 cursor-not-allowed'
                                             : ''}`, style: {
                                             width: '100%',
@@ -3892,6 +3993,13 @@ const namespaceWidgetConfig = (widgetConfig, namespace) => {
     if (namespaced['widget-data-path']) {
         namespaced['widget-data-path'] = namespaceDataPath(namespaced['widget-data-path'], namespace);
     }
+    // Namespace geo parent references so cascade events match namespaced widget-id
+    if (namespaced['widget-geo-config']?.parentWidgetId) {
+        namespaced['widget-geo-config'] = {
+            ...namespaced['widget-geo-config'],
+            parentWidgetId: `${namespace}__${namespaced['widget-geo-config'].parentWidgetId}`,
+        };
+    }
     // Recursively namespace nested widgets (for layout widgets)
     if (namespaced.widgets && Array.isArray(namespaced.widgets)) {
         namespaced.widgets = namespaced.widgets.map((widget) => namespaceWidgetConfig(widget, namespace));
@@ -4096,6 +4204,9 @@ const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = fa
         const isVisible = shouldShowWidget(widget['widget-data-options'], currentSchemaData);
         if (!isVisible)
             continue;
+        const isEnabled = shouldEnableWidget(widget['widget-data-options'], currentSchemaData);
+        if (!isEnabled)
+            continue;
         const widgetId = widget['widget-id'];
         if (isTableLikeWidget(widget)) {
             const tableValid = validateTableLikeWidget(widget, currentSchemaData, dispatch, skipRequired);
@@ -4105,7 +4216,8 @@ const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = fa
             continue;
         }
         const value = getWidgetValue(currentSchemaData, widget['widget-data-path'], widgetId);
-        const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required'], skipRequired);
+        const isRequired = shouldRequireWidget(widget['widget-data-options'], currentSchemaData, widget['widget-required'] ?? false);
+        const errors = validateWidget(value, widget['widget-data-validation'], isRequired, skipRequired);
         if (errors.length > 0) {
             isValid = false;
             dispatch(setTouched({ widgetId, touched: true }));
@@ -4138,6 +4250,108 @@ const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = fa
     return isValid;
 };
 
+const cloneValue = (value) => {
+    if (value === undefined) {
+        return undefined;
+    }
+    try {
+        return structuredClone(value);
+    }
+    catch {
+        return JSON.parse(JSON.stringify(value));
+    }
+};
+const resolveNamespacedWidgetId = (widgetId, namespace) => namespace ? `${namespace}__${widgetId}` : widgetId;
+const resolveStoreDataPath = (dataPath, namespace) => {
+    if (!dataPath) {
+        return dataPath;
+    }
+    if (!namespace) {
+        return dataPath;
+    }
+    if (typeof dataPath === 'string') {
+        return `${namespace}.${dataPath}`;
+    }
+    return Object.fromEntries(Object.entries(dataPath).map(([key, path]) => [key, `${namespace}.${path}`]));
+};
+/**
+ * Capture Redux widget values for a section at edit entry.
+ * Used to restore exact pre-edit state on Cancel (schemaData may be stale or shared with Redux).
+ */
+function captureSectionEditSnapshot(values, section, options) {
+    const { namespace, sectionId, supportingDocuments = [] } = options ?? {};
+    const dataPaths = [];
+    const processedPaths = new Set();
+    const widgetIds = {};
+    const addPath = (path) => {
+        if (!path || processedPaths.has(path)) {
+            return;
+        }
+        processedPaths.add(path);
+        dataPaths.push({
+            path,
+            value: cloneValue(getValueByPath(values, path)),
+        });
+        if (path.endsWith('.geo_code_hierarchy_json')) {
+            const prefix = path.slice(0, -'.geo_code_hierarchy_json'.length);
+            addPath(`${prefix}.geo_lowest_level_value_id`);
+        }
+    };
+    collectWidgets(section.panels).forEach((widget) => {
+        const widgetId = resolveNamespacedWidgetId(widget['widget-id'], namespace);
+        const storeDataPath = resolveStoreDataPath(widget['widget-data-path'], namespace);
+        if (Object.prototype.hasOwnProperty.call(values, widgetId)) {
+            widgetIds[widgetId] = { present: true, value: cloneValue(values[widgetId]) };
+        }
+        else {
+            widgetIds[widgetId] = { present: false };
+        }
+        if (typeof storeDataPath === 'string') {
+            addPath(storeDataPath);
+        }
+        else if (storeDataPath && typeof storeDataPath === 'object') {
+            Object.values(storeDataPath).forEach((path) => {
+                if (typeof path === 'string') {
+                    addPath(path);
+                }
+            });
+        }
+    });
+    supportingDocuments.forEach((doc, index) => {
+        const widgetId = `supporting-doc-${sectionId ?? 'section'}-${index}`;
+        const storeDataPath = namespace && doc['document-data-path']
+            ? `${namespace}.${doc['document-data-path']}`
+            : doc['document-data-path'];
+        if (Object.prototype.hasOwnProperty.call(values, widgetId)) {
+            widgetIds[widgetId] = { present: true, value: cloneValue(values[widgetId]) };
+        }
+        else {
+            widgetIds[widgetId] = { present: false };
+        }
+        if (typeof storeDataPath === 'string') {
+            addPath(storeDataPath);
+        }
+    });
+    return { dataPaths, widgetIds };
+}
+/** Apply a section edit snapshot back onto the full Redux values object. */
+function applySectionEditSnapshot(currentValues, snapshot) {
+    let result = currentValues;
+    for (const { path, value } of snapshot.dataPaths) {
+        result = setValueByPath(result, path, cloneValue(value));
+    }
+    for (const [widgetId, entry] of Object.entries(snapshot.widgetIds)) {
+        if (entry.present) {
+            result = { ...result, [widgetId]: cloneValue(entry.value) };
+        }
+        else {
+            const { [widgetId]: _removed, ...rest } = result;
+            result = rest;
+        }
+    }
+    return result;
+}
+
 /** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
 const READONLY_VALUE_ROW_ROOT_CLASSES = [
     'TextDisplayWidget',
@@ -4349,6 +4563,8 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     }, [forceExitEdit]); // eslint-disable-line react-hooks/exhaustive-deps
     const [isDocumentsExpanded, setIsDocumentsExpanded] = useState(true);
     const sectionRef = useRef(null);
+    const baselineSnapshotRef = useRef(null);
+    const editEntrySnapshotRef = useRef(null);
     const [sectionHeight, setSectionHeight] = useState(null);
     const [editSectionPosition, setEditSectionPosition] = useState(null);
     // Capture section position when entering edit mode and update on scroll
@@ -4413,6 +4629,18 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             panels: makePanelsEditable(sectionToRender.panels, widgetsEditable),
         };
     }, [sectionToRender, widgetsEditable]);
+    const effectiveHideEditButton = hideEditButton ||
+        section['section-hide-edit-button'] === true ||
+        !collectWidgets(section.panels || []).some((w) => section['section-editable'] === true || w['widget-readonly'] !== true);
+    const captureEditEntrySnapshot = useCallback(() => {
+        const currentValues = store.getState().widget.values;
+        const supportingDocuments = section['section-supporting-documents'] || [];
+        editEntrySnapshotRef.current = captureSectionEditSnapshot(currentValues, section, {
+            namespace,
+            sectionId,
+            supportingDocuments: hasSupportingDocuments ? supportingDocuments : [],
+        });
+    }, [store, section, namespace, sectionId, hasSupportingDocuments]);
     // Handle edit button click
     const handleEdit = () => {
         // Capture height BEFORE entering edit mode to preserve space
@@ -4420,6 +4648,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             const height = sectionRef.current.offsetHeight;
             setSectionHeight(height);
         }
+        captureEditEntrySnapshot();
         setIsEditMode(true);
         onEditModeChange?.(originalSectionId, true);
     };
@@ -4594,8 +4823,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         }
         return { records, files };
     }, [originalSection, hasSupportingDocuments]);
-    // Capture baseline when entering edit mode (used for isDirty comparison)
-    const baselineSnapshotRef = useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = useState(0);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
@@ -4613,6 +4840,9 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     // Set baseline when entering edit mode; clear when leaving (baseline captured only on entry)
     useEffect(() => {
         if (effectiveEditModeForDirty) {
+            if (!editEntrySnapshotRef.current) {
+                captureEditEntrySnapshot();
+            }
             const oldSchemaData = schemaData || contextSchemaData || {};
             if (namespace) {
                 const namespacedSchema = getValueByPath(oldSchemaData, namespace);
@@ -4621,11 +4851,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     : buildSectionSnapshot(oldSchemaData);
             }
             else {
-                baselineSnapshotRef.current = buildSectionSnapshot(oldSchemaData);
+                baselineSnapshotRef.current = buildSectionSnapshot(store.getState().widget.values, namespace);
             }
         }
         else {
             baselineSnapshotRef.current = null;
+            editEntrySnapshotRef.current = null;
             onSectionDirtyChange?.(sectionId, false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- baseline must be captured only when effectiveEditModeForDirty toggles
@@ -4651,56 +4882,103 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     // and handleCancel.
     const revertToOriginalValues = useCallback(() => {
         const sectionWidgets = collectWidgets(originalSection.panels);
-        const oldSchemaData = schemaData || contextSchemaData;
         const currentStoreValues = store.getState().widget.values;
+        const snapshot = editEntrySnapshotRef.current;
         let newStoreValues = currentStoreValues;
-        sectionWidgets.forEach(widget => {
-            const originalWidgetId = widget['widget-id'];
-            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
-            const widgetId = namespacedWidgetId;
-            const originalDataPath = widget['widget-data-path'];
-            const storeDataPath = namespace && originalDataPath
-                ? (typeof originalDataPath === 'string'
-                    ? `${namespace}.${originalDataPath}`
-                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
-                : originalDataPath;
-            if (widgetId && originalDataPath) {
-                let oldValue;
-                if (typeof originalDataPath === 'object') {
-                    oldValue = {};
-                    Object.entries(originalDataPath).forEach(([key, path]) => {
-                        if (typeof path === 'string') {
-                            oldValue[key] = getValueByPath(oldSchemaData, path);
+        if (snapshot) {
+            newStoreValues = applySectionEditSnapshot(currentStoreValues, snapshot);
+        }
+        else {
+            const oldSchemaData = schemaData || contextSchemaData;
+            const processedGeoGroups = new Set();
+            sectionWidgets.forEach((widget) => {
+                const originalWidgetId = widget['widget-id'];
+                const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+                const widgetId = namespacedWidgetId;
+                const originalDataPath = widget['widget-data-path'];
+                const storeDataPath = namespace && originalDataPath
+                    ? (typeof originalDataPath === 'string'
+                        ? `${namespace}.${originalDataPath}`
+                        : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                    : originalDataPath;
+                const geoConfig = widget['widget-geo-config'];
+                if (widgetId && originalDataPath) {
+                    let oldValue;
+                    if (typeof originalDataPath === 'object') {
+                        oldValue = {};
+                        Object.entries(originalDataPath).forEach(([key, path]) => {
+                            if (typeof path === 'string') {
+                                oldValue[key] = getValueByPath(oldSchemaData, path);
+                            }
+                        });
+                    }
+                    else if (typeof originalDataPath === 'string') {
+                        oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                    }
+                    if (oldValue !== undefined) {
+                        newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+                        if (geoConfig && typeof storeDataPath === 'string') {
+                            const groupId = getGeoGroupId(storeDataPath);
+                            const levelValue = resolveGeoWidgetLevelValue(newStoreValues, widgetId, storeDataPath, geoConfig);
+                            if (levelValue !== undefined && levelValue !== null && levelValue !== '') {
+                                newStoreValues = { ...newStoreValues, [widgetId]: levelValue };
+                            }
+                            else {
+                                const { [widgetId]: _removed, ...rest } = newStoreValues;
+                                newStoreValues = rest;
+                            }
+                            if (!processedGeoGroups.has(groupId)) {
+                                resetAndSeedGeoHierarchyFromValues(newStoreValues, storeDataPath, widgetId, groupId);
+                                processedGeoGroups.add(groupId);
+                            }
+                            if (geoConfig.parentWidgetId) {
+                                dispatch(setDataSource({ widgetId, data: [] }));
+                            }
                         }
-                    });
-                }
-                else if (typeof originalDataPath === 'string') {
-                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                        else {
+                            newStoreValues = { ...newStoreValues, [widgetId]: oldValue };
+                        }
+                    }
                 }
-                if (oldValue !== undefined) {
+            });
+            if (hasSupportingDocuments) {
+                const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+                originalSupportingDocuments.forEach((doc, index) => {
+                    const widgetId = `supporting-doc-${sectionId}-${index}`;
+                    const originalDataPath = doc['document-data-path'];
+                    const storeDataPath = namespace && originalDataPath
+                        ? `${namespace}.${originalDataPath}`
+                        : originalDataPath;
+                    const oldValue = getValueByPath(oldSchemaData, originalDataPath);
                     newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
-                    // Also revert the widgetId-based entry — useBaseWidget.handleChange
-                    // sets values[widgetId] during editing, and useBaseWidget.currentValue
-                    // reads values[widgetId] first before falling through to the dataPath.
-                    newStoreValues = { ...newStoreValues, [widgetId]: oldValue };
-                }
+                });
             }
-        });
-        if (hasSupportingDocuments) {
-            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
-            originalSupportingDocuments.forEach((doc, index) => {
-                const widgetId = `supporting-doc-${sectionId}-${index}`;
-                const originalDataPath = doc['document-data-path'];
-                const storeDataPath = namespace && originalDataPath
-                    ? `${namespace}.${originalDataPath}`
-                    : originalDataPath;
-                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
-                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
-            });
-        }
-        if (newStoreValues !== currentStoreValues) {
-            dispatch(setValues(newStoreValues));
         }
+        const processedGeoGroups = new Set();
+        sectionWidgets.forEach((widget) => {
+            const geoConfig = widget['widget-geo-config'];
+            if (!geoConfig) {
+                return;
+            }
+            const originalWidgetId = widget['widget-id'];
+            const widgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const originalDataPath = widget['widget-data-path'];
+            const storeDataPath = namespace && typeof originalDataPath === 'string'
+                ? `${namespace}.${originalDataPath}`
+                : originalDataPath;
+            if (typeof storeDataPath !== 'string') {
+                return;
+            }
+            const groupId = getGeoGroupId(storeDataPath);
+            if (!processedGeoGroups.has(groupId)) {
+                resetAndSeedGeoHierarchyFromValues(newStoreValues, storeDataPath, widgetId, groupId);
+                processedGeoGroups.add(groupId);
+            }
+            if (geoConfig.parentWidgetId) {
+                dispatch(setDataSource({ widgetId, data: [] }));
+            }
+        });
+        dispatch(setValues(newStoreValues));
     }, [originalSection, schemaData, contextSchemaData, store, namespace, hasSupportingDocuments, sectionId, dispatch]);
     // Handle save button click
     const handleSave = async () => {
@@ -5196,7 +5474,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                         color: changeRequestType === 'new' ? 'var(--owt-color-bg, #FFFFFF)' : 'var(--owt-color-error, #B91C1C)',
                                         whiteSpace: 'nowrap',
                                         boxShadow: changeRequestType === 'new' ? '0 2px 4px rgba(40, 167, 69, 0.3)' : 'none',
-                                    }, children: changeRequestType === 'new' ? 'New' : 'Old' }))] })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '30px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px', border: 'none', backgroundColor: 'var(--owt-color-border, #C4C4C4)' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                                    }, children: changeRequestType === 'new' ? 'New' : 'Old' }))] })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && effectiveHideEditButton ? { paddingBottom: '30px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px', border: 'none', backgroundColor: 'var(--owt-color-border, #C4C4C4)' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
                                                 marginTop: '20px',
                                                 paddingBottom: '30px',
                                                 display: 'flex',
@@ -5244,7 +5522,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                                 fontSize: '14px',
                                                                 color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
-                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px', border: 'none', backgroundColor: 'var(--owt-color-border, #C4C4C4)' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
+                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !effectiveHideEditButton && (jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px', border: 'none', backgroundColor: 'var(--owt-color-border, #C4C4C4)' } })), mode === 'RegistryView' && !isEditMode && !effectiveHideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
                                             fontFamily: 'Roboto, sans-serif',
                                             fontSize: '16px',
                                             color: 'var(--owt-color-text-muted, #727474)',
@@ -6050,7 +6328,7 @@ const JSONEditorPanel = ({ section, onChange, onReset, context = 'section', }) =
             'widget-data-format.dateConstraint': ['any', 'past-only', 'future-only'],
             'widget-data-format.dateTimeConstraint': ['any', 'past-only', 'future-only'],
             // Widget options
-            'widget-data-options.action': ['show', 'hide', 'enable', 'disable'],
+            'widget-data-options.action': ['show', 'hide', 'enable', 'disable', 'require'],
             'widget-data-options.condition.operator': CONDITION_OPERATORS,
         };
     }, []);
@@ -7435,7 +7713,7 @@ const removeMask = (value, mask) => {
 };
 
 const TextInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, formattedValue, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     // Track raw value separately for masking (to preserve unmasked value internally)
     const formatConfig = widgetConfig['widget-data-format'];
@@ -7572,7 +7850,7 @@ const TextInputWidget = ({ config }) => {
         const label = translateConfig(widgetConfig['widget-label']);
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] TextDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntimeExports.jsx("input", { type: getInputType(), value: displayValue, onChange: handleChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, maxLength: formatConfig?.mask ? undefined : maxLength, inputMode: formatConfig?.currency
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntimeExports.jsx("input", { type: getInputType(), value: displayValue, onChange: handleChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, maxLength: formatConfig?.mask ? undefined : maxLength, inputMode: formatConfig?.currency
                                         ? 'decimal'
                                         : formatConfig?.characterType === 'numeric' || formatConfig?.characterType === 'numeric-decimal'
                                             ? 'numeric'
@@ -7595,7 +7873,7 @@ const NumberInputWidget = ({ config }) => {
         }
         return { ...config, 'widget-data-default': normalizedDefault };
     }, [config]);
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config: resolvedConfig });
+    const { value, formattedValue, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config: resolvedConfig });
     const { translate, translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const validationConfig = widgetConfig['widget-data-validation'];
@@ -7726,7 +8004,7 @@ const NumberInputWidget = ({ config }) => {
         const display = numValue !== null ? formatNumber(numValue, formatConfig) : '';
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] NumberDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: `text-base text-gray-900 font-medium ${textAlignClass}`, title: String(display ?? ''), children: display }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntimeExports.jsx("input", { type: "text", inputMode: "decimal", value: displayValue, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, maxLength: maxLength, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${textAlignClass} ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (value === null || value === undefined || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntimeExports.jsx("input", { type: "text", inputMode: "decimal", value: displayValue, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, maxLength: maxLength, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${textAlignClass} ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (value === null || value === undefined || value === ''))
                                         ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                         : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), maxLength && (jsxRuntimeExports.jsxs("span", { className: `text-xs ml-2 flex-shrink-0 ${currentLength > maxLength
                                         ? 'text-red-500'
@@ -7734,7 +8012,7 @@ const NumberInputWidget = ({ config }) => {
 };
 
 const BooleanWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const representation = formatConfig?.booleanRepresentation || 'true-false';
@@ -7803,7 +8081,7 @@ const BooleanWidget = ({ config }) => {
     }
     // Render based on control type
     if (controlType === 'checkbox') {
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex items-baseline cursor-pointer gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: currentValue === true, onChange: handleCheckboxChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), (currentValue === true || currentValue === false) && (jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: currentValue === true ? trueLabel : falseLabel }))] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex items-baseline cursor-pointer gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: currentValue === true, onChange: handleCheckboxChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), (currentValue === true || currentValue === false) && (jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: currentValue === true ? trueLabel : falseLabel }))] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     if (controlType === 'radio') {
         const containerClass = orientation === 'horizontal'
@@ -7811,10 +8089,10 @@ const BooleanWidget = ({ config }) => {
             : 'flex flex-col items-start gap-2';
         const radioDisabled = !isEnabled || widgetConfig['widget-readonly'];
         const optionDisabledClass = radioDisabled ? 'opacity-50 cursor-not-allowed' : '';
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: containerClass, onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === null, onChange: () => handleRadioChange(null), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: unsetLabel })] })), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === true, onChange: () => handleRadioChange(true), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: trueLabel })] }), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === false, onChange: () => handleRadioChange(false), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: falseLabel })] })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: containerClass, onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === null, onChange: () => handleRadioChange(null), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: unsetLabel })] })), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === true, onChange: () => handleRadioChange(true), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: trueLabel })] }), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === false, onChange: () => handleRadioChange(false), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: falseLabel })] })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     // Toggle/switch control type
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 sm:min-w-[150px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-3", onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(null), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === null
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium leading-normal text-gray-700 sm:min-w-[150px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-3", onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(null), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === null
                                         ? 'bg-blue-600 text-white border-blue-600'
                                         : 'bg-white text-gray-700 border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}`, style: { borderRadius: '15px' }, children: unsetLabel })), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(true), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === true
                                         ? 'bg-blue-600 text-white border-blue-600'
@@ -7824,7 +8102,7 @@ const BooleanWidget = ({ config }) => {
 };
 
 const DateInputWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, setError, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, setError, config: widgetConfig, } = useBaseWidget({ config });
     const formValues = useSelector((state) => state.widget.values);
     const { translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
@@ -8025,7 +8303,7 @@ const DateInputWidget = ({ config }) => {
         }
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DateDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showValidationError || showRequiredError
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showValidationError || showRequiredError
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                 : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), showValidationError && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })] }) }));
 };
@@ -8315,7 +8593,7 @@ const validateDateTimeConstraints = (date, minDateTime, maxDateTime, constraint)
 };
 
 const DateTimeInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, formattedValue, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const optionsConfig = widgetConfig['widget-data-options'];
@@ -8468,29 +8746,33 @@ const DateTimeInputWidget = ({ config }) => {
         }
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DateTimeDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDateTime : undefined, max: inputMethod === 'picker' ? effectiveMaxDateTime : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDateTime : undefined, max: inputMethod === 'picker' ? effectiveMaxDateTime : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                 : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const SelectWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, geoDisplayLabel, error, touched, isEnabled, isRequired, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     // For readonly mode, render as display text showing only the selected label
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
         // Find the selected option's label
-        const selectedOption = dataSourceOptions.find((option) => option.value === value);
-        const displayValue = selectedOption ? selectedOption.label : (value || '-');
+        const selectedOption = dataSourceOptions.find((option) => option.value === value || String(option.value) === String(value));
+        const displayValue = selectedOption
+            ? translateConfig(selectedOption.label)
+            : loading
+                ? (geoDisplayLabel || '-')
+                : (geoDisplayLabel || (value != null && value !== '' ? translateConfig(String(value)) : '-'));
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] SelectDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onChange(e.target.value === '' ? undefined : e.target.value), onBlur: onBlur, disabled: !isEnabled || loading || widgetConfig['widget-readonly'], className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onChange(e.target.value === '' ? undefined : e.target.value), onBlur: onBlur, disabled: !isEnabled || loading || widgetConfig['widget-readonly'], className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300'} ${!isEnabled || loading || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']), children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }), loading && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mt-1", children: translate('common.loadingOptions') })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+                                : 'border-gray-300'} ${!isEnabled || loading || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']), children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: translateConfig(option.label) }, option.value)))] }), loading && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mt-1", children: translate('common.loadingOptions') })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const RadioWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const layout = formatConfig?.layout || widgetConfig['widget-orientation'] || 'vertical';
@@ -8553,14 +8835,16 @@ const RadioWidget = ({ config }) => {
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
         const selectedOption = processedOptions.find(opt => opt.value === currentValue);
-        const displayValue = selectedOption ? selectedOption.label : (allowUnset && currentValue === null ? '-' : '');
+        const displayValue = selectedOption
+            ? translateConfig(selectedOption.label)
+            : (allowUnset && currentValue === null ? '-' : '');
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] RadioDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, onChange: handleUnset, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: option.value, checked: currentValue === option.value, onChange: (e) => handleChange(option.value), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, option.value)))] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, onChange: handleUnset, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: option.value, checked: currentValue === option.value, onChange: (e) => handleChange(option.value), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, option.value)))] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const CheckboxWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const hasDataSource = !!widgetConfig['widget-data-source'];
     const formatConfig = widgetConfig['widget-data-format'];
@@ -8575,7 +8859,7 @@ const CheckboxWidget = ({ config }) => {
             const displayValue = isChecked ? 'Yes' : 'No';
             return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] CheckboxDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
         }
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex cursor-pointer items-baseline gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: isChecked, onChange: (e) => onChange(e.target.checked), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: isChecked ? 'Yes' : 'No' })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex cursor-pointer items-baseline gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: isChecked, onChange: (e) => onChange(e.target.checked), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: isChecked ? 'Yes' : 'No' })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     // Multiple checkboxes (with data source) - for array values
     // Process and sort options if needed
@@ -8645,7 +8929,7 @@ const CheckboxWidget = ({ config }) => {
             : '-';
         return (jsxRuntimeExports.jsxs("div", { className: "mb-3 CheckboxDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `inline-flex cursor-pointer items-baseline gap-2 ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", value: option.value, checked: selectedValues.includes(option.value), onChange: (e) => handleCheckboxChange(option.value, e.target.checked), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: translateConfig(option.label) })] }, option.value)))) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `inline-flex cursor-pointer items-baseline gap-2 ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", value: option.value, checked: selectedValues.includes(option.value), onChange: (e) => handleCheckboxChange(option.value, e.target.checked), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: translateConfig(option.label) })] }, option.value)))) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const SimpleTableWidget = ({ config }) => {
@@ -8696,7 +8980,7 @@ const SimpleTableWidget = ({ config }) => {
 };
 
 const ArrayWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const items = Array.isArray(value) ? value : [];
     const itemConfig = widgetConfig['widget-item'];
@@ -8720,7 +9004,7 @@ const ArrayWidget = ({ config }) => {
         newItems[index] = newValue;
         onChange(newItems);
     };
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start mb-2", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 flex justify-between items-center", children: [jsxRuntimeExports.jsx("div", { className: "flex-1" }), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: addItem, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600", style: { borderRadius: '15px' }, children: addLabel }))] })] }), items.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300 rounded", children: [translate('common.noItems'), ". ", operations.add && !isReadonly && translate('common.clickToAdd', { label: addLabel })] })) : (jsxRuntimeExports.jsx("div", { className: "space-y-2", children: items.map((itemValue, index) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start mb-2", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 flex justify-between items-center", children: [jsxRuntimeExports.jsx("div", { className: "flex-1" }), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: addItem, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600", style: { borderRadius: '15px' }, children: addLabel }))] })] }), items.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300 rounded", children: [translate('common.noItems'), ". ", operations.add && !isReadonly && translate('common.clickToAdd', { label: addLabel })] })) : (jsxRuntimeExports.jsx("div", { className: "space-y-2", children: items.map((itemValue, index) => {
                     ({
                         ...itemConfig,
                         'widget-id': `${widgetConfig['widget-id']}-item-${index}`,
@@ -8731,7 +9015,7 @@ const ArrayWidget = ({ config }) => {
 };
 
 const IterableAccordionWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const items = Array.isArray(value) ? value : [];
     const itemConfig = widgetConfig['widget-item'];
@@ -8780,7 +9064,7 @@ const IterableAccordionWidget = ({ config }) => {
         newItems[index] = newValue;
         onChange(newItems);
     };
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start mb-2", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 flex justify-between items-center", children: [jsxRuntimeExports.jsx("div", { className: "flex-1" }), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: addItem, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600", style: { borderRadius: '15px' }, children: addLabel }))] })] }), items.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300 rounded", children: [translate('common.noItems'), ". ", operations.add && !isReadonly && translate('common.clickToAdd', { label: addLabel })] })) : (jsxRuntimeExports.jsx("div", { className: "space-y-2", children: items.map((itemValue, index) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start mb-2", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 flex justify-between items-center", children: [jsxRuntimeExports.jsx("div", { className: "flex-1" }), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: addItem, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600", style: { borderRadius: '15px' }, children: addLabel }))] })] }), items.length === 0 ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300 rounded", children: [translate('common.noItems'), ". ", operations.add && !isReadonly && translate('common.clickToAdd', { label: addLabel })] })) : (jsxRuntimeExports.jsx("div", { className: "space-y-2", children: items.map((itemValue, index) => {
                     const isCollapsed = collapsedItems[index] ?? defaultCollapsed;
                     const parentPath = widgetConfig['widget-data-path'];
                     const childPath = itemConfig['widget-data-path'];
@@ -8819,7 +9103,7 @@ const IterableAccordionWidget = ({ config }) => {
 };
 
 const PhoneInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, formattedValue, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     // Use formatted value if available, otherwise raw value
     const displayValue = formattedValue !== undefined && formattedValue !== value
@@ -8830,13 +9114,13 @@ const PhoneInputWidget = ({ config }) => {
         const label = translateConfig(widgetConfig['widget-label']);
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] PhoneDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue || ''), children: displayValue || '-' }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: "tel", value: displayValue, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: translateConfig(widgetConfig['widget-data-placeholder']), className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: "tel", value: displayValue, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: translateConfig(widgetConfig['widget-data-placeholder']), className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                 : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const CurrencyInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, formattedValue, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     // For input, use raw numeric value; formatted value is for display only
     const numericValue = typeof value === 'number' ? value : (value ? parseFloat(String(value)) : '');
@@ -8858,7 +9142,7 @@ const CurrencyInputWidget = ({ config }) => {
         const display = formattedValue || (value !== null && value !== undefined ? String(value) : '-');
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] CurrencyDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(display ?? ''), children: display }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx("input", { type: "text", inputMode: "decimal", value: numericValue, onChange: handleChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: translateConfig(widgetConfig['widget-data-placeholder']), className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (value === null || value === undefined || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: translateConfig(widgetConfig['widget-label']), required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx("input", { type: "text", inputMode: "decimal", value: numericValue, onChange: handleChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: translateConfig(widgetConfig['widget-data-placeholder']), className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (value === null || value === undefined || value === ''))
                                         ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                         : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), formattedValue && formattedValue !== String(value) && (jsxRuntimeExports.jsx("span", { className: "absolute right-3 top-2 text-gray-500 text-sm", children: formattedValue }))] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
@@ -8978,7 +9262,7 @@ const SelectDisplayValue$1 = ({ config, value }) => {
     if (value === null || value === undefined || value === '') {
         return jsxRuntimeExports.jsx("span", { children: "-" });
     }
-    const selectedOption = dataSourceOptions.find((option) => option.value === value);
+    const selectedOption = dataSourceOptions.find((option) => option.value === value || String(option.value) === String(value));
     return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
 };
 const TableCellText = ({ config, value, onValueChange }) => {
@@ -9701,6 +9985,7 @@ const TableWidget = ({ config }) => {
                                                                 }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] })] }));
 };
 
+const isUnsetRowValue = (value) => value === null || value === undefined || value === '';
 // Display select value label in view mode
 const SelectDisplayValue = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
@@ -9708,7 +9993,7 @@ const SelectDisplayValue = ({ config, value }) => {
         return jsxRuntimeExports.jsx("span", { children: "-" });
     if (value === null || value === undefined || value === '')
         return jsxRuntimeExports.jsx("span", { children: "-" });
-    const selectedOption = dataSourceOptions.find((option) => option.value === value);
+    const selectedOption = dataSourceOptions.find((option) => option.value === value || String(option.value) === String(value));
     return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
 };
 /**
@@ -9733,7 +10018,6 @@ const DialogTableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const dispatch = useDispatch();
-    const storeValues = useSelector((state) => state.widget?.values ?? {});
     const rows = Array.isArray(value) ? value : [];
     const columns = widgetConfig['widget-data-columns'] || [];
     const operations = widgetConfig['widget-data-operations'] || {};
@@ -9765,7 +10049,12 @@ const DialogTableWidget = ({ config }) => {
         const emptyRow = {};
         columns.forEach((col) => {
             const key = col['column-key'];
-            emptyRow[key] = col['widget-data-default'] ?? '';
+            if (col['widget-data-default'] !== undefined) {
+                emptyRow[key] = col['widget-data-default'];
+            }
+            else if (col.widget === 'checkbox') {
+                emptyRow[key] = false;
+            }
         });
         return emptyRow;
     }, [columns]);
@@ -9818,17 +10107,48 @@ const DialogTableWidget = ({ config }) => {
     const updateField = useCallback((columnKey, newValue) => {
         setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
     }, []);
-    const collectMergedRowPayload = useCallback(() => {
-        const merged = { ...formData };
+    const membersWidgetId = widgetConfig['widget-id'];
+    const dialogStoreValues = useSelector((state) => {
+        if (dialogSessionId <= 0) {
+            return {};
+        }
+        const values = state.widget?.values ?? {};
+        const row = {};
+        columns.forEach((col) => {
+            const k = col['column-key'];
+            const wid = `${membersWidgetId}-dlg-${dialogSessionId}-${k}`;
+            if (values[wid] !== undefined) {
+                row[k] = values[wid];
+            }
+        });
+        return row;
+    }, (a, b) => JSON.stringify(a) === JSON.stringify(b));
+    const buildDialogRowValues = useCallback((storeSlice) => {
+        const row = { ...formData };
         columns.forEach((col) => {
             const k = col['column-key'];
-            const wid = dialogFieldWidgetId(k);
-            const fromStore = storeValues[wid];
-            if (fromStore !== undefined)
-                merged[k] = fromStore;
+            if (storeSlice[k] !== undefined) {
+                row[k] = storeSlice[k];
+            }
+        });
+        return row;
+    }, [formData, columns]);
+    const dialogRowValues = useMemo(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
+    const collectMergedRowPayload = useCallback(() => buildDialogRowValues(dialogStoreValues), [buildDialogRowValues, dialogStoreValues]);
+    const finalizeDialogRowPayload = useCallback((raw) => {
+        const result = {};
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            if (!shouldShowWidget(col['widget-data-options'], raw)) {
+                return;
+            }
+            const val = raw[key];
+            if (!isUnsetRowValue(val)) {
+                result[key] = val;
+            }
         });
-        return merged;
-    }, [formData, columns, storeValues, dialogFieldWidgetId]);
+        return result;
+    }, [columns]);
     const saveDialog = useCallback(() => {
         const payload = collectMergedRowPayload();
         let hasErrors = false;
@@ -9838,8 +10158,11 @@ const DialogTableWidget = ({ config }) => {
             const isColReadonly = isReadonly || col['widget-readonly'] === true;
             if (isColReadonly)
                 return;
+            if (!shouldShowWidget(col['widget-data-options'], payload))
+                return;
             const cellValue = payload[key];
-            const validationErrors = validateWidget(cellValue, col['widget-data-validation'], col['widget-required']);
+            const isRequired = shouldRequireWidget(col['widget-data-options'], payload, col['widget-required']);
+            const validationErrors = validateWidget(cellValue, col['widget-data-validation'], isRequired);
             if (validationErrors && validationErrors.length > 0) {
                 hasErrors = true;
                 dispatch(setError({ widgetId: cellWidgetId, errors: validationErrors }));
@@ -9852,8 +10175,9 @@ const DialogTableWidget = ({ config }) => {
         if (hasErrors) {
             return;
         }
+        const cleaned = finalizeDialogRowPayload(payload);
         if (dialogMode === 'add') {
-            const savedRow = { ...payload, edit_action: 'ADD' };
+            const savedRow = { ...cleaned, edit_action: 'ADD' };
             onChange([...rows, savedRow]);
             closeDialog();
             return;
@@ -9863,11 +10187,18 @@ const DialogTableWidget = ({ config }) => {
             const currentRow = newRows[activeRowIndex] || {};
             const wasDeleted = currentRow.edit_action === 'DELETE';
             const editAction = wasDeleted ? 'UPDATE' : (currentRow.edit_action ?? 'UPDATE');
-            newRows[activeRowIndex] = { ...currentRow, ...payload, edit_action: editAction };
+            const merged = { ...currentRow, ...cleaned, edit_action: editAction };
+            columns.forEach((col) => {
+                const key = col['column-key'];
+                if (!(key in cleaned)) {
+                    delete merged[key];
+                }
+            });
+            newRows[activeRowIndex] = merged;
             onChange(newRows);
             closeDialog();
         }
-    }, [collectMergedRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex, columns, dialogFieldWidgetId, isReadonly, dispatch]);
+    }, [collectMergedRowPayload, finalizeDialogRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex, columns, dialogFieldWidgetId, isReadonly, dispatch]);
     const deleteRow = useCallback((rowIndex) => {
         const newRows = rows.filter((_, i) => i !== rowIndex);
         onChange(newRows);
@@ -9954,9 +10285,12 @@ const DialogTableWidget = ({ config }) => {
                                         lineHeight: 1,
                                     }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: columns.map((col) => {
                                 const key = col['column-key'];
+                                if (!shouldShowWidget(col['widget-data-options'], dialogRowValues)) {
+                                    return null;
+                                }
                                 const widgetType = col.widget || 'text';
                                 const cellWidgetId = dialogFieldWidgetId(key);
-                                const initialValue = formData[key] ?? col['widget-data-default'] ?? '';
+                                const initialValue = formData[key] ?? col['widget-data-default'];
                                 const fieldConfig = {
                                     ...col,
                                     widget: widgetType,
@@ -9966,6 +10300,8 @@ const DialogTableWidget = ({ config }) => {
                                     'widget-readonly': isReadonly || col['widget-readonly'] === true,
                                     'widget-data-path': undefined,
                                     'widget-data-default': initialValue,
+                                    'widget-data-options': undefined,
+                                    'widget-required': shouldRequireWidget(col['widget-data-options'], dialogRowValues, col['widget-required']),
                                 };
                                 return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: initialValue }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, `${dialogSessionId}-${key}`));
                             }) }, `dialog-fields-${dialogSessionId}`), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, className: "px-4 py-2 text-sm font-medium", style: {
@@ -10163,7 +10499,7 @@ const ProfileWidget = ({ config }) => {
 const TextAreaWidget = ({ config }) => {
     // Check readonly early from original config
     const isReadonly = config['widget-readonly'] || false;
-    const { value, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'] || {};
     const validationConfig = widgetConfig['widget-data-validation'] || {};
@@ -10211,7 +10547,6 @@ const TextAreaWidget = ({ config }) => {
         ? translateConfig(widgetConfig['widget-label'])
         : '';
     // Check if required
-    const isRequired = widgetConfig['widget-required'] || false;
     // Error display
     const hasError = touched && error && error.length > 0;
     const errorMessage = hasError ? error[0] : '';
@@ -10229,7 +10564,7 @@ const TextAreaWidget = ({ config }) => {
                             border: 'none',
                         }, children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [label, isRequired && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { style: { position: 'relative' }, children: [jsxRuntimeExports.jsx("textarea", { id: widgetConfig['widget-id'], rows: rows, value: getStringValue(), onChange: handleChange, onBlur: onBlur, disabled: !isEnabled, placeholder: placeholder, className: `w-full px-3 py-2 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${hasError
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: label, required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { style: { position: 'relative' }, children: [jsxRuntimeExports.jsx("textarea", { id: widgetConfig['widget-id'], rows: rows, value: getStringValue(), onChange: handleChange, onBlur: onBlur, disabled: !isEnabled, placeholder: placeholder, className: `w-full px-3 py-2 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${hasError
                                         ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                         : 'border-gray-300'} ${!isEnabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: {
                                         borderRadius: '10px',
@@ -11707,7 +12042,7 @@ const ResultsTable = ({ rows, selectedRowKey, onRowClick, onRowDoubleClick, }) =
                     }) })] }) }));
 };
 const RegisterLookupWidget = ({ config }) => {
-    const { value, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
     const { dataSourceRequestHandler } = useWidgetContext();
     const dataSource = widgetConfig['widget-data-source'];
@@ -11870,7 +12205,7 @@ const RegisterLookupWidget = ({ config }) => {
                                     onChange(null);
                                     setAppliedRecord(null);
                                     setPendingRow(null);
-                                }, className: "text-sm underline text-red-500 p-0 border-0 bg-transparent cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 rounded", children: translate('common.remove', { defaultValue: 'Remove' }) })] })), !isReadonly && touched && error.length > 0 && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })) : !isReadonly ? (jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [jsxRuntimeExports.jsxs("button", { type: "button", disabled: !isEnabled, onClick: openLookup, title: actionLabel, className: `flex items-center gap-2 w-full sm:w-[180px] max-w-full px-3 h-[30px] text-sm border rounded-[10px] shadow-sm transition-colors ${hasError ? 'border-red-500 text-gray-700' : 'border-gray-300 text-gray-700'} ${!isEnabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white cursor-pointer'}`, children: [jsxRuntimeExports.jsx("img", { src: img$g, alt: "", className: "w-4 h-4 opacity-50 flex-shrink-0" }), jsxRuntimeExports.jsx("span", { className: "truncate", children: actionLabel }), widgetConfig['widget-required'] && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), touched && error.length > 0 && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })) : null, !isReadonly && isOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, onClick: () => { setIsOpen(false); onBlur(); } }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden", style: {
+                                }, className: "text-sm underline text-red-500 p-0 border-0 bg-transparent cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 rounded", children: translate('common.remove', { defaultValue: 'Remove' }) })] })), !isReadonly && touched && error.length > 0 && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })) : !isReadonly ? (jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [jsxRuntimeExports.jsxs("button", { type: "button", disabled: !isEnabled, onClick: openLookup, title: actionLabel, className: `flex items-center gap-2 w-full sm:w-[180px] max-w-full px-3 h-[30px] text-sm border rounded-[10px] shadow-sm transition-colors ${hasError ? 'border-red-500 text-gray-700' : 'border-gray-300 text-gray-700'} ${!isEnabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white cursor-pointer'}`, children: [jsxRuntimeExports.jsx("img", { src: img$g, alt: "", className: "w-4 h-4 opacity-50 flex-shrink-0" }), jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate", children: actionLabel }), isRequired && jsxRuntimeExports.jsx("span", { className: "shrink-0 text-red-500", children: "*" })] }), touched && error.length > 0 && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })) : null, !isReadonly && isOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, onClick: () => { setIsOpen(false); onBlur(); } }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden", style: {
                             position: 'fixed',
                             top: modalPos.y,
                             left: modalPos.x,
@@ -11899,6 +12234,288 @@ const RegisterLookupWidget = ({ config }) => {
                                         : translate('common.searchHint', { defaultValue: 'Type and press Enter or click search' }) })) : (jsxRuntimeExports.jsx(ResultsTable, { rows: searchResults, selectedRowKey: pendingRow?.internal_record_id ?? null, onRowClick: setPendingRow, onRowDoubleClick: applySelection })) }), jsxRuntimeExports.jsxs("div", { className: `flex-shrink-0 flex flex-wrap items-center gap-3 px-5 py-3 border-t border-gray-200 ${totalCount !== null ? 'justify-between' : 'justify-end'}`, children: [totalCount !== null && (jsxRuntimeExports.jsx(PaginationFooter, { embedded: true, currentPage: currentPage, totalPages: totalPages, totalCount: totalCount, pageSize: pageSize, onPageChange: (page) => runSearch(searchText, page), onPrev: () => currentPage > 1 && runSearch(searchText, currentPage - 1), onNext: () => currentPage < totalPages && runSearch(searchText, currentPage + 1), translate: translate })), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => pendingRow && applySelection(pendingRow), disabled: !pendingRow, className: "px-4 h-9 text-sm font-medium rounded-[10px] text-white disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0", style: { backgroundColor: 'var(--owt-color-info, #2563eb)' }, children: selectRecordLabel })] })] })] }))] }));
 };
 
+const MultiSelectWidget = ({ config }) => {
+    const { value, error, touched, isEnabled, isRequired, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
+    const { translate, translateConfig } = useWidgetTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const [isListPopupOpen, setIsListPopupOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [dropdownPosition, setDropdownPosition] = useState(null);
+    const [listPopupPosition, setListPopupPosition] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const listPopupRef = useRef(null);
+    const moreButtonRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const formatConfig = widgetConfig['widget-data-format'];
+    const sortOptions = formatConfig?.sortOptions ?? false;
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const updateDropdownPosition = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const gap = 4;
+        const spaceBelow = window.innerHeight - rect.bottom - gap;
+        const spaceAbove = rect.top - gap;
+        const openDown = spaceBelow >= 160 || spaceBelow >= spaceAbove;
+        const availableSpace = openDown ? spaceBelow : spaceAbove;
+        const maxHeight = Math.min(320, Math.max(160, availableSpace - 8));
+        setDropdownPosition(openDown
+            ? {
+                top: rect.bottom + gap,
+                left: rect.left,
+                width: rect.width,
+                maxHeight,
+                placement: 'bottom',
+            }
+            : {
+                bottom: window.innerHeight - rect.top + gap,
+                left: rect.left,
+                width: rect.width,
+                maxHeight,
+                placement: 'top',
+            });
+    }, []);
+    const updateListPopupPosition = useCallback(() => {
+        const anchor = moreButtonRef.current;
+        if (!anchor)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const gap = 4;
+        const spaceBelow = window.innerHeight - rect.bottom - gap;
+        const spaceAbove = rect.top - gap;
+        const openDown = spaceBelow >= 120 || spaceBelow >= spaceAbove;
+        const availableSpace = openDown ? spaceBelow : spaceAbove;
+        const maxHeight = Math.min(280, Math.max(120, availableSpace - 8));
+        setListPopupPosition(openDown
+            ? {
+                top: rect.bottom + gap,
+                left: rect.left,
+                width: Math.max(rect.width, 220),
+                maxHeight,
+                placement: 'bottom',
+            }
+            : {
+                bottom: window.innerHeight - rect.top + gap,
+                left: rect.left,
+                width: Math.max(rect.width, 220),
+                maxHeight,
+                placement: 'top',
+            });
+    }, []);
+    useEffect(() => {
+        if (!isOpen) {
+            setDropdownPosition(null);
+            setSearchQuery('');
+            return;
+        }
+        updateDropdownPosition();
+        const handleResize = () => updateDropdownPosition();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    useEffect(() => {
+        if (!isListPopupOpen) {
+            setListPopupPosition(null);
+            return;
+        }
+        updateListPopupPosition();
+        const handleResize = () => updateListPopupPosition();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [isListPopupOpen, updateListPopupPosition]);
+    useEffect(() => {
+        if (!isOpen && !isListPopupOpen)
+            return;
+        const handleScroll = (event) => {
+            const target = event.target;
+            if (dropdownRef.current?.contains(target))
+                return;
+            if (listPopupRef.current?.contains(target))
+                return;
+            if (isOpen)
+                setIsOpen(false);
+            if (isListPopupOpen)
+                setIsListPopupOpen(false);
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return () => window.removeEventListener('scroll', handleScroll, true);
+    }, [isOpen, isListPopupOpen]);
+    useEffect(() => {
+        if (!isOpen && !isListPopupOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (isOpen) {
+                if (containerRef.current?.contains(target))
+                    return;
+                if (dropdownRef.current?.contains(target))
+                    return;
+                setIsOpen(false);
+            }
+            if (isListPopupOpen) {
+                if (listPopupRef.current?.contains(target))
+                    return;
+                if (moreButtonRef.current?.contains(target))
+                    return;
+                setIsListPopupOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, isListPopupOpen]);
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [isOpen]);
+    const processedOptions = useMemo(() => {
+        let options = dataSourceOptions.map((opt) => {
+            const rawLabel = String(opt.label ?? opt.value ?? '');
+            return {
+                value: opt.value,
+                label: translateConfig(rawLabel),
+                rawLabel,
+            };
+        });
+        if (sortOptions) {
+            options.sort((a, b) => a.label.localeCompare(b.label));
+        }
+        return options;
+    }, [dataSourceOptions, sortOptions, translateConfig]);
+    const filteredOptions = useMemo(() => {
+        if (!searchQuery.trim())
+            return processedOptions;
+        const q = searchQuery.trim().toLowerCase();
+        return processedOptions.filter((opt) => opt.label.toLowerCase().includes(q) ||
+            opt.rawLabel.toLowerCase().includes(q));
+    }, [processedOptions, searchQuery]);
+    const selectedValues = useMemo(() => {
+        if (value === null || value === undefined)
+            return [];
+        if (Array.isArray(value))
+            return value;
+        return [value];
+    }, [value]);
+    const allFilteredSelected = useMemo(() => {
+        if (filteredOptions.length === 0)
+            return false;
+        return filteredOptions.every((opt) => selectedValues.includes(opt.value));
+    }, [filteredOptions, selectedValues]);
+    const handleToggle = useCallback((optionValue, checked) => {
+        if (checked) {
+            onChange([...selectedValues, optionValue]);
+        }
+        else {
+            onChange(selectedValues.filter((v) => v !== optionValue));
+        }
+    }, [selectedValues, onChange]);
+    const handleSelectAll = useCallback(() => {
+        const filteredVals = filteredOptions.map((o) => o.value);
+        const merged = Array.from(new Set([...selectedValues, ...filteredVals]));
+        onChange(merged);
+    }, [filteredOptions, selectedValues, onChange]);
+    const handleClearAll = useCallback(() => {
+        onChange([]);
+    }, [onChange]);
+    const selectedLabels = useMemo(() => {
+        return selectedValues.map((val) => {
+            const opt = processedOptions.find((o) => o.value === val);
+            return opt ? opt.label : translateConfig(String(val));
+        });
+    }, [selectedValues, processedOptions, translateConfig]);
+    const fullSelectionText = selectedLabels.join(', ');
+    const visibleLabels = selectedLabels.slice(0, 5);
+    const overflowCount = Math.max(0, selectedLabels.length - 10);
+    const disabled = !isEnabled || loading || widgetConfig['widget-readonly'];
+    const renderSelectedLabels = (options) => {
+        if (selectedLabels.length === 0)
+            return null;
+        const readonly = options?.readonly ?? false;
+        return (jsxRuntimeExports.jsxs("div", { className: `flex flex-wrap gap-1 ${readonly ? '' : 'mt-1.5'}`, children: [visibleLabels.map((label, index) => (jsxRuntimeExports.jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md bg-blue-50 px-2 py-0.5 text-xs text-blue-800", title: label, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: label }), !readonly && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleToggle(selectedValues[index], false), className: "shrink-0 text-blue-600 hover:text-blue-900 focus:outline-none", "aria-label": translate('common.removeItem', {
+                                label,
+                                defaultValue: `Remove ${label}`,
+                            }), children: "\u00D7" }))] }, `${selectedValues[index]}-${label}`))), overflowCount > 0 && (jsxRuntimeExports.jsx("button", { ref: moreButtonRef, type: "button", onClick: () => setIsListPopupOpen((prev) => !prev), className: "inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500", children: translate('common.moreSelected', {
+                        count: overflowCount,
+                        defaultValue: `+${overflowCount} more`,
+                    }) }))] }));
+    };
+    const listPopupPanel = isListPopupOpen && listPopupPosition && mounted ? (jsxRuntimeExports.jsxs("div", { ref: listPopupRef, className: "fixed z-[201] bg-white border border-gray-300 shadow-lg", style: {
+            ...(listPopupPosition.placement === 'bottom'
+                ? { top: listPopupPosition.top }
+                : { bottom: listPopupPosition.bottom }),
+            left: listPopupPosition.left,
+            width: listPopupPosition.width,
+            maxWidth: '320px',
+            maxHeight: listPopupPosition.maxHeight,
+            borderRadius: '10px',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [jsxRuntimeExports.jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 shrink-0", style: { borderBottom: '1px solid #e5e7eb' }, children: translate('common.allSelected', {
+                    count: selectedLabels.length,
+                    defaultValue: `All selected (${selectedLabels.length})`,
+                }) }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto flex-1 min-h-0 py-1 overscroll-contain", children: selectedLabels.map((label, index) => (jsxRuntimeExports.jsx("div", { className: "px-3 py-1.5 text-sm text-gray-700", title: label, children: label }, `${selectedValues[index]}-${label}`))) })] })) : null;
+    if (widgetConfig['widget-readonly']) {
+        const fieldLabel = widgetConfig['widget-label'];
+        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] MultiSelectDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [fieldLabel && (jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", label: fieldLabel })), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [selectedLabels.length === 0 ? (jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", children: "-" })) : (renderSelectedLabels({ readonly: true })), mounted && listPopupPanel && typeof document !== 'undefined'
+                            ? createPortal(listPopupPanel, document.body)
+                            : null] })] }));
+    }
+    const optionsMaxHeight = dropdownPosition
+        ? Math.min(280, dropdownPosition.maxHeight - 100)
+        : 280;
+    const dropdownPanel = isOpen && dropdownPosition && mounted ? (jsxRuntimeExports.jsxs("div", { ref: dropdownRef, className: "fixed z-[200] bg-white border border-gray-300 shadow-lg", style: {
+            ...(dropdownPosition.placement === 'bottom'
+                ? { top: dropdownPosition.top }
+                : { bottom: dropdownPosition.bottom }),
+            left: dropdownPosition.left,
+            width: dropdownPosition.width,
+            maxWidth: '280px',
+            maxHeight: dropdownPosition.maxHeight,
+            borderRadius: '10px',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [jsxRuntimeExports.jsx("div", { className: "px-3 pt-2 pb-1 shrink-0", style: { borderBottom: '1px solid #e5e7eb' }, children: jsxRuntimeExports.jsx("input", { ref: searchInputRef, type: "text", placeholder: translate('common.searchPlaceholder', { defaultValue: 'Search...' }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-[28px] px-2 text-sm border border-gray-300 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500", style: { borderRadius: '6px' } }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 py-1 shrink-0", style: { borderBottom: '1px solid #e5e7eb' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: allFilteredSelected ? () => {
+                            const filteredVals = new Set(filteredOptions.map((o) => o.value));
+                            onChange(selectedValues.filter((v) => !filteredVals.has(v)));
+                        } : handleSelectAll, className: "text-xs font-medium text-blue-600 hover:text-blue-800 focus:outline-none", children: allFilteredSelected
+                            ? translate('common.deselectAll', { defaultValue: 'Deselect All' })
+                            : translate('common.selectAll', { defaultValue: 'Select All' }) }), selectedValues.length > 0 && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClearAll, className: "text-xs font-medium text-red-500 hover:text-red-700 focus:outline-none", children: translate('common.clearAll', { defaultValue: 'Clear All' }) }))] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto flex-1 min-h-0 py-1 overscroll-contain", style: { maxHeight: `${Math.max(80, optionsMaxHeight)}px` }, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 px-3 py-2", children: translate('common.loading') })) : filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-400 px-3 py-2", children: translate('common.noOptionsFound', { defaultValue: 'No options found' }) })) : (filteredOptions.map((option) => {
+                    const isChecked = selectedValues.includes(option.value);
+                    return (jsxRuntimeExports.jsxs("label", { className: `flex items-center gap-2 px-3 py-1 cursor-pointer hover:bg-blue-50 ${isChecked ? 'bg-blue-50/60' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: isChecked, onChange: (e) => handleToggle(option.value, e.target.checked), className: "h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700 leading-normal select-none", children: option.label })] }, option.value));
+                })) })] })) : null;
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsx(WidgetFieldLabel, { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", label: widgetConfig['widget-label'] ?? '', required: isRequired }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", ref: containerRef, children: [jsxRuntimeExports.jsxs("button", { ref: triggerRef, type: "button", onClick: () => {
+                                if (!disabled)
+                                    setIsOpen((prev) => !prev);
+                            }, onBlur: () => {
+                                if (!isOpen)
+                                    onBlur();
+                            }, disabled: disabled, className: `w-full sm:w-[280px] max-w-full h-[30px] px-3 border shadow-sm text-left flex items-center justify-between gap-2 ${(touched && error.length > 0) ||
+                                (widgetConfig['widget-required'] && selectedValues.length === 0)
+                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                                : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white cursor-pointer'} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500`, style: { borderRadius: '10px' }, title: selectedValues.length > 0
+                                ? fullSelectionText
+                                : translateConfig(widgetConfig['widget-data-tooltip']), children: [jsxRuntimeExports.jsx("span", { className: `truncate text-sm ${selectedValues.length === 0 ? 'text-gray-400' : 'text-gray-900'}`, children: selectedLabels.length === 0
+                                        ? translate('common.select', { defaultValue: 'Select...' })
+                                        : translate('common.selectedCount', {
+                                            count: selectedLabels.length,
+                                            defaultValue: `${selectedLabels.length} selected`,
+                                        }) }), jsxRuntimeExports.jsx("svg", { className: `w-4 h-4 flex-shrink-0 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), mounted && dropdownPanel && typeof document !== 'undefined'
+                            ? createPortal(dropdownPanel, document.body)
+                            : null, selectedLabels.length > 0 && renderSelectedLabels(), mounted && listPopupPanel && typeof document !== 'undefined'
+                            ? createPortal(listPopupPanel, document.body)
+                            : null, touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })), loading && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mt-1", children: translate('common.loadingOptions') }))] })] }) }));
+};
+
 /**
  * Register all default/generic widgets
  * This is called automatically when the package is imported
@@ -11948,6 +12565,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'id-authentication', component: IdAuthenticationWidget });
     // Register lookup widget — searchable popup to select a record from any register
     widgetRegistry.register({ widget: 'register-lookup', component: RegisterLookupWidget });
+    // Multi-select widget — searchable dropdown with checkbox-style options, select all, and clear all
+    widgetRegistry.register({ widget: 'multi-select', component: MultiSelectWidget });
 };
 // Auto-register on import
 registerDefaultWidgets();
@@ -12011,6 +12630,14 @@ var enTranslations = {
 	"common.sectionModified": "Modified and not saved",
 	"common.supportedDocuments": "Supported Documents",
 	"common.searchPlaceholder": "Search...",
+	"common.selectAll": "Select All",
+	"common.deselectAll": "Deselect All",
+	"common.clearAll": "Clear All",
+	"common.noOptionsFound": "No options found",
+	"common.allSelected": "All selected ({{count}})",
+	"common.moreSelected": "+{{count}} more",
+	"common.selectedCount": "{{count}} selected",
+	"common.removeItem": "Remove {{label}}",
 	"common.selectAction": "Select {{label}}",
 	"common.selectTitle": "Select {{label}}",
 	"common.change": "Change",
@@ -12263,13 +12890,10 @@ const translateWidgetConfig = (widgetConfig, translate) => {
                 ...dataSource,
                 options: dataSource.options.map((option) => {
                     if (option.label && typeof option.label === 'string') {
-                        const optionLabel = option.label;
-                        if (isTranslationKey(optionLabel)) {
-                            return {
-                                ...option,
-                                label: translate(optionLabel, { defaultValue: optionLabel }),
-                            };
-                        }
+                        return {
+                            ...option,
+                            label: translate(option.label, { defaultValue: option.label }),
+                        };
                     }
                     return option;
                 }),
@@ -12322,5 +12946,5 @@ const translateUISchema = (schema, translate) => {
     };
 };
 
-export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DialogTableWidget, DisplayWidget, FileInputWidget, GEO_LEVEL_CLEARED, HeaderSectionWidget, IdAuthenticationWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, RegisterLookupWidget, ScoresDisplayWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, applySharedGeoHierarchyToValues, createWidgetStore, createZodSchema, defaultTheme, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, isUpstreamGeoAncestor, normalizeNumericDefault, parseDataPath, parseNumber, registerDefaultWidgets, registerGeoWidgetParent, removeMask, resetAll, resetAndSeedGeoHierarchyFromValues, resetWidget, resolveGeoWidgetLevelValue, resolveTheme, resolveWidgetIdValue, seedGeoHierarchyFromValues, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, unregisterGeoWidgetParent, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTheme, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
+export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DialogTableWidget, DisplayWidget, FileInputWidget, GEO_LEVEL_CLEARED, HeaderSectionWidget, IdAuthenticationWidget, IterableAccordionWidget, JSONEditorPanel, MultiSelectWidget, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, RegisterLookupWidget, ScoresDisplayWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, applySharedGeoHierarchyToValues, createWidgetStore, createZodSchema, defaultTheme, evaluateCondition, evaluateWidgetConditions, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getCachedApiDataSource, getFormattedNumberLength, getGeoDescendantWidgetIds, getGeoGroupId, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, hasVisibilityRules, initI18n, isAllowedKey, isUpstreamGeoAncestor, normalizeNumericDefault, normalizeOptionRules, parseDataPath, parseNumber, registerDefaultWidgets, registerGeoWidgetParent, removeMask, resetAll, resetAndSeedGeoHierarchyFromValues, resetWidget, resolveGeoWidgetLevelLabel, resolveGeoWidgetLevelValue, resolveTheme, resolveWidgetIdValue, seedGeoHierarchyFromValues, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldRequireWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, unregisterGeoWidgetParent, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTheme, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
 //# sourceMappingURL=index.esm.js.map