@openg2p/registry-widgets 1.0.1 → 1.1.0-dev.0

package/dist/index.esm.js

@@ -1675,6 +1675,158 @@ class WidgetEventBus {
     }
 }
 
+/**
+ * Built-in default values (matches the original hardcoded colours).
+ */
+const defaultTheme = {
+    colors: {
+        primary: '#F5BB1A',
+        primaryDark: '#F07B1A',
+        primaryLight: '#FBE6AA',
+        primaryAccent: '#EE7C22',
+        border: '#C4C4C4',
+        borderLight: '#E4E4E4',
+        background: '#FFFFFF',
+        backgroundAlt: '#F6F6F6',
+        text: '#011627',
+        textMuted: '#727474',
+        success: '#16A34A',
+        successDark: '#047857',
+        successLight: '#D1FAE5',
+        error: '#B91C1C',
+        errorLight: '#FEE2E2',
+        warning: '#F59E0B',
+        info: '#2563EB',
+    },
+    section: {
+        borderRadius: '8px',
+        borderColor: '#E4E4E4',
+        backgroundColor: '#FFFFFF',
+        titleColor: '#011627',
+        dividerColor: '#F5BB1A',
+    },
+    panel: {
+        dividerColor: '#C4C4C4',
+        backgroundColor: 'transparent',
+    },
+    button: {
+        primaryBg: '#FFFFFF',
+        primaryColor: '#011627',
+        primaryBorder: '#F07B1A',
+        secondaryBg: '#FFFFFF',
+        secondaryColor: '#011627',
+        secondaryBorder: '#C4C4C4',
+        borderRadius: '6px',
+    },
+    widget: {
+        labelColor: '#011627',
+        inputBorderColor: '#C4C4C4',
+        inputFocusBorderColor: '#F5BB1A',
+        inputBackground: '#FFFFFF',
+        errorColor: '#B91C1C',
+        helpTextColor: '#727474',
+        tableHeaderBg: '#F6F6F6',
+        tableHeaderColor: '#727474',
+        tableBodyBg: '#FFFFFF',
+        tableBorderColor: '#C4C4C4',
+        tableRowDividerColor: '#E4E4E4',
+        tableEditingRowBg: '#FBE6AA',
+        tableDeletedRowBg: '#FEE2E2',
+        tableEmptyTextColor: '#727474',
+        tableBorderRadius: '15px',
+    },
+};
+/**
+ * Merge a user-supplied (partial) theme with the built-in defaults.
+ */
+function resolveTheme(theme) {
+    if (!theme)
+        return defaultTheme;
+    return {
+        colors: { ...defaultTheme.colors, ...theme.colors },
+        section: { ...defaultTheme.section, ...theme.section },
+        panel: { ...defaultTheme.panel, ...theme.panel },
+        button: { ...defaultTheme.button, ...theme.button },
+        widget: { ...defaultTheme.widget, ...theme.widget },
+    };
+}
+/**
+ * Convert a resolved theme into a flat Record of CSS custom properties.
+ * These are set on the provider wrapper element so every descendant can
+ * reference them with `var(--owt-…)`.
+ *
+ * Prefix: `--owt-` (OpenG2P Widget Theme).
+ */
+function themeToCSSVariables(resolved) {
+    return {
+        // --- colors ---
+        '--owt-color-primary': resolved.colors.primary,
+        '--owt-color-primary-dark': resolved.colors.primaryDark,
+        '--owt-color-primary-light': resolved.colors.primaryLight,
+        '--owt-color-primary-accent': resolved.colors.primaryAccent,
+        '--owt-color-border': resolved.colors.border,
+        '--owt-color-border-light': resolved.colors.borderLight,
+        '--owt-color-bg': resolved.colors.background,
+        '--owt-color-bg-alt': resolved.colors.backgroundAlt,
+        '--owt-color-text': resolved.colors.text,
+        '--owt-color-text-muted': resolved.colors.textMuted,
+        '--owt-color-success': resolved.colors.success,
+        '--owt-color-success-dark': resolved.colors.successDark,
+        '--owt-color-success-light': resolved.colors.successLight,
+        '--owt-color-error': resolved.colors.error,
+        '--owt-color-error-light': resolved.colors.errorLight,
+        '--owt-color-warning': resolved.colors.warning,
+        '--owt-color-info': resolved.colors.info,
+        // --- section ---
+        '--owt-section-border-radius': resolved.section.borderRadius,
+        '--owt-section-border-color': resolved.section.borderColor,
+        '--owt-section-bg': resolved.section.backgroundColor,
+        '--owt-section-title-color': resolved.section.titleColor,
+        '--owt-section-divider-color': resolved.section.dividerColor,
+        // --- panel ---
+        '--owt-panel-divider-color': resolved.panel.dividerColor,
+        '--owt-panel-bg': resolved.panel.backgroundColor,
+        // --- button ---
+        '--owt-btn-primary-bg': resolved.button.primaryBg,
+        '--owt-btn-primary-color': resolved.button.primaryColor,
+        '--owt-btn-primary-border': resolved.button.primaryBorder,
+        '--owt-btn-secondary-bg': resolved.button.secondaryBg,
+        '--owt-btn-secondary-color': resolved.button.secondaryColor,
+        '--owt-btn-secondary-border': resolved.button.secondaryBorder,
+        '--owt-btn-border-radius': resolved.button.borderRadius,
+        // --- widget ---
+        '--owt-widget-label-color': resolved.widget.labelColor,
+        '--owt-widget-input-border': resolved.widget.inputBorderColor,
+        '--owt-widget-input-focus-border': resolved.widget.inputFocusBorderColor,
+        '--owt-widget-input-bg': resolved.widget.inputBackground,
+        '--owt-widget-error-color': resolved.widget.errorColor,
+        '--owt-widget-helptext-color': resolved.widget.helpTextColor,
+        // --- widget / table ---
+        '--owt-widget-table-header-bg': resolved.widget.tableHeaderBg,
+        '--owt-widget-table-header-color': resolved.widget.tableHeaderColor,
+        '--owt-widget-table-body-bg': resolved.widget.tableBodyBg,
+        '--owt-widget-table-border-color': resolved.widget.tableBorderColor,
+        '--owt-widget-table-row-divider': resolved.widget.tableRowDividerColor,
+        '--owt-widget-table-editing-row-bg': resolved.widget.tableEditingRowBg,
+        '--owt-widget-table-deleted-row-bg': resolved.widget.tableDeletedRowBg,
+        '--owt-widget-table-empty-color': resolved.widget.tableEmptyTextColor,
+        '--owt-widget-table-border-radius': resolved.widget.tableBorderRadius,
+    };
+}
+
+const ThemeContext = createContext(defaultTheme);
+/**
+ * Access the resolved widget theme from any component inside `<WidgetProvider>`.
+ *
+ * ```tsx
+ * const theme = useWidgetTheme();
+ * // theme.colors.primary, theme.section.dividerColor, etc.
+ * ```
+ */
+function useWidgetTheme() {
+    return useContext(ThemeContext);
+}
+
 const WidgetContext = createContext({
     dataSourceRequestHandler: undefined,
     schemaData: undefined,
@@ -1683,10 +1835,13 @@ const WidgetContext = createContext({
 const useWidgetContext = () => {
     return useContext(WidgetContext);
 };
-const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate, children, }) => {
+const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate, theme, children, }) => {
     const widgetStore = useMemo(() => store || createWidgetStore(), [store]);
     // Create event bus instance (one per provider)
     const eventBus = useMemo(() => new WidgetEventBus(), []);
+    // Resolve theme: merge user-supplied overrides with defaults
+    const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
+    const cssVariables = useMemo(() => themeToCSSVariables(resolvedTheme), [resolvedTheme]);
     // Memoize context value to prevent unnecessary re-renders
     const contextValue = useMemo(() => ({
         dataSourceRequestHandler,
@@ -1715,7 +1870,7 @@ const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [schemaData, widgetStore]); // Only run on mount
-    const content = (jsxRuntimeExports.jsx(Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: children }) }) }));
+    const content = (jsxRuntimeExports.jsx(Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(ThemeContext.Provider, { value: resolvedTheme, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: jsxRuntimeExports.jsx("div", { className: "openg2p-widget-theme-root", style: cssVariables, children: children }) }) }) }) }));
     return content;
 };
 
@@ -2735,7 +2890,7 @@ const PanelRenderer = ({ panel, dataSourceRequestHandler, schemaData, onValueCha
                                     top: 0,
                                     bottom: '5px',
                                     width: '1px',
-                                    backgroundColor: isEditMode ? '#F2BA1A' : '#D1D5DB',
+                                    backgroundColor: isEditMode ? 'var(--owt-color-primary, #F5BB1A)' : 'var(--owt-panel-divider-color, #C4C4C4)',
                                 } }))] }) }, nestedPanel['panel-id'] || `panel-${index}`));
             }), widgets.map((widgetConfig, index) => {
                 // Don't use readonly state in key - it causes remounting which resets userHasSetValueRef
@@ -3297,10 +3452,10 @@ const FileInputWidget = ({ config }) => {
                 return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("button", { type: "button", onClick: (e) => {
                                 console.log('Button clicked!', file);
                                 handleFileClick(file, e);
-                            }, className: "text-sm hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded cursor-pointer", style: { color: isSupportingDocument ? '#000000' : '#2563eb' }, title: "Click to preview", children: fileName })] }));
+                            }, className: "text-sm hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded cursor-pointer", style: { color: isSupportingDocument ? 'var(--owt-color-text, #011627)' : 'var(--owt-color-info, #2563eb)' }, title: "Click to preview", children: fileName })] }));
             }
             else {
-                return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("span", { className: "text-sm", style: { color: isSupportingDocument ? '#000000' : '#4b5563' }, children: fileName })] }));
+                return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("span", { className: "text-sm", style: { color: isSupportingDocument ? 'var(--owt-color-text, #011627)' : '#4b5563' }, children: fileName })] }));
             }
         }
         else {
@@ -3316,10 +3471,10 @@ const FileInputWidget = ({ config }) => {
                             flexShrink: 0
                         } }));
                     if (canPreview) {
-                        return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("button", { type: "button", onClick: (e) => handleFileClick(file, e), className: "text-sm hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded cursor-pointer", style: { color: isSupportingDocument ? '#000000' : '#2563eb' }, title: "Click to preview", children: fileName })] }, index));
+                        return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("button", { type: "button", onClick: (e) => handleFileClick(file, e), className: "text-sm hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded cursor-pointer", style: { color: isSupportingDocument ? 'var(--owt-color-text, #011627)' : 'var(--owt-color-info, #2563eb)' }, title: "Click to preview", children: fileName })] }, index));
                     }
                     else {
-                        return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("span", { className: "text-sm", style: { color: isSupportingDocument ? '#000000' : '#4b5563' }, children: fileName })] }, index));
+                        return (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [fileIconElement, jsxRuntimeExports.jsx("span", { className: "text-sm", style: { color: isSupportingDocument ? 'var(--owt-color-text, #011627)' : '#4b5563' }, children: fileName })] }, index));
                     }
                 }) }));
         }
@@ -3525,6 +3680,8 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
  */
 const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, onEditModeChange, forceExitEdit, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
+    const resolvedTheme = useWidgetTheme();
+    const portalCSSVariables = useMemo(() => themeToCSSVariables(resolvedTheme), [resolvedTheme]);
     const { schemaData: contextSchemaData, dataSourceRequestHandler: contextDataSourceRequestHandler } = useWidgetContext();
     const store = useStore();
     const dispatch = useDispatch();
@@ -3541,22 +3698,41 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         }
         return section;
     }, [section, namespace]);
-    // Create namespaced schemaData if namespace is provided.
-    // Widgets with namespaced data-paths (e.g. "rv-section-0.a1a4d25a.birth_date")
-    // need a nested object at values[namespace] so getValueByPath can traverse it.
+    // Create namespaced schemaData if namespace is provided
+    // This ensures widgets can read initial values from schemaData at namespaced paths
     const namespacedSchemaData = useMemo(() => {
         if (!namespace || !currentSchemaData) {
             return schemaData;
         }
-        return { ...currentSchemaData, [namespace]: currentSchemaData };
+        // Create a namespaced version of schemaData by copying values to namespaced paths
+        const namespaced = { ...currentSchemaData };
+        // Copy all top-level keys to namespaced paths
+        Object.keys(currentSchemaData).forEach(key => {
+            const namespacedKey = `${namespace}.${key}`;
+            if (!(namespacedKey in namespaced)) {
+                namespaced[namespacedKey] = currentSchemaData[key];
+            }
+        });
+        // Also handle nested objects - copy nested values to namespaced paths
+        const copyNestedValues = (obj, prefix = '') => {
+            if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+                Object.keys(obj).forEach(key => {
+                    const fullPath = prefix ? `${prefix}.${key}` : key;
+                    const namespacedPath = `${namespace}.${fullPath}`;
+                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+                        copyNestedValues(obj[key], fullPath);
+                        // Also set the nested object at the namespaced path
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                    else {
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                });
+            }
+        };
+        copyNestedValues(currentSchemaData);
+        return namespaced;
     }, [namespace, schemaData, currentSchemaData]);
-    // Populate the store with namespaced schema data so that namespaced widgets
-    // can read their initial values via getValueByPath on the namespaced paths.
-    useEffect(() => {
-        if (namespace && namespacedSchemaData) {
-            dispatch(setValues(namespacedSchemaData));
-        }
-    }, [namespace, namespacedSchemaData, dispatch]);
     const crViewData = useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -3802,9 +3978,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             top: 0;
             bottom: 5px;
             width: 1px;
-            background-color: #F2BA1A;
+            background-color: var(--owt-color-primary, #F5BB1A);
           }
         ` }), jsxRuntimeExports.jsxs("div", { className: `section ${sectionClassId} ${sectionClassId}-edit px-4 sm:px-6 lg:px-8`, "data-section-id": `${sectionId}-edit`, style: {
+                        ...portalCSSVariables,
                         position: 'absolute',
                         top: `${editSectionPosition.top}px`,
                         left: `${editSectionPosition.left}px`,
@@ -3814,10 +3991,22 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { fontFamily: 'Roboto, sans-serif', marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: editGridId, className: "section-panels", children: [editableSection.panels.map((panel, index) => {
                                     const isLastPanel = index === editableSection.panels.length - 1;
                                     return (jsxRuntimeExports.jsx("div", { className: `panel-wrapper ${isLastPanel ? 'last-panel-wrapper' : ''}`, children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: true }) }, panel['panel-id'] || `section-panel-${index}`));
-                                }), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none', margin: '25px 0 0 0' } }), hasSupportingDocuments && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setIsDocumentsExpanded(!isDocumentsExpanded), className: "supporting-documents-title-button w-full flex items-center text-left", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("img", { src: isDocumentsExpanded ? img$7 : img$6, alt: "Toggle Documents", className: "w-4 h-2.25 transition-transform ml-2" })] }), isDocumentsExpanded && (jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, index) => {
+                                }), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: 'var(--owt-section-divider-color, #F5BB1A)', border: 'none', margin: '25px 0 0 0' } }), hasSupportingDocuments && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setIsDocumentsExpanded(!isDocumentsExpanded), className: "supporting-documents-title-button w-full flex items-center text-left", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("img", { src: isDocumentsExpanded ? img$7 : img$6, alt: "Toggle Documents", className: "w-4 h-2.25 transition-transform ml-2" })] }), isDocumentsExpanded && (jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, index) => {
                                                     const docConfig = createDocumentWidgetConfig(doc, sectionId, index);
                                                     return (jsxRuntimeExports.jsx("div", { className: "supporting-document-item", children: jsxRuntimeExports.jsx(FileInputWidget, { config: docConfig }) }, `${sectionId}-doc-${index}`));
-                                                }) }))] }) })), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none', marginTop: hasSupportingDocuments ? '20px' : 0, marginBottom: '20px' } }), jsxRuntimeExports.jsx("div", { className: "edit-controls-container", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("div", { className: "edit-controls-buttons", children: [jsxRuntimeExports.jsx("button", { onClick: handleCancel, className: "bg-white hover:bg-gray-50 text-gray-900 text-sm font-medium px-6 py-2 transition-colors border border-gray-300", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '10px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: handleSave, disabled: !isDirty, className: "bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-6 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", style: { fontFamily: 'Roboto, sans-serif', borderRadius: '10px' }, children: translate('common.save') || 'Save' })] }) })] })] })] }), document.body);
+                                                }) }))] }) })), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: 'var(--owt-section-divider-color, #F5BB1A)', border: 'none', marginTop: hasSupportingDocuments ? '20px' : 0, marginBottom: '20px' } }), jsxRuntimeExports.jsx("div", { className: "edit-controls-container", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("div", { className: "edit-controls-buttons", children: [jsxRuntimeExports.jsx("button", { onClick: handleCancel, className: "text-sm font-medium px-6 py-2 transition-colors", style: {
+                                                    fontFamily: 'Roboto, sans-serif',
+                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                    border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                                    backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                                    color: 'var(--owt-btn-secondary-color, #011627)',
+                                                }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: handleSave, disabled: !isDirty, className: "text-sm font-medium px-6 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                    fontFamily: 'Roboto, sans-serif',
+                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                    border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                                    backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                                    color: 'var(--owt-color-bg, #FFFFFF)',
+                                                }, children: translate('common.save') || 'Save' })] }) })] })] })] }), document.body);
     };
     const trackSectionChages = (widgets, sourceData, pathPrefix) => {
         if (!widgets || widgets.length === 0)
@@ -3918,8 +4107,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     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 only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
-    const [hasBeenSavedByUser, setHasBeenSavedByUser] = useState(false);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
     const effectiveEditModeForDirty = mode === 'IntakeForm' ? (isDraft !== false) : isEditMode;
     // Compute isDirty: compare current store state to baseline (only when in edit mode)
@@ -3962,68 +4149,18 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const intakeFormSectionStatus = useMemo(() => {
         if (mode !== 'IntakeForm' || isDraft === false)
             return null;
+        const hasValue = (v) => v !== undefined && v !== null && (typeof v !== 'string' || v.trim().length > 0);
+        const currentSnapshot = buildSectionSnapshot(storeValues, namespace);
+        const record = currentSnapshot.records?.[0];
+        const hasData = record &&
+            typeof record === 'object' &&
+            Object.values(record).some((v) => hasValue(v));
         if (isDirty)
             return 'modified';
-        if (hasBeenSavedByUser)
+        if (hasData)
             return 'saved';
         return null;
-    }, [mode, isDirty, hasBeenSavedByUser]);
-    // Revert store values to the original schemaData for this section's widgets.
-    // Used by both handleSave (RegistryView raises a CR, so values should not persist)
-    // and handleCancel.
-    const revertToOriginalValues = useCallback(() => {
-        const sectionWidgets = collectWidgets(originalSection.panels);
-        const oldSchemaData = schemaData || contextSchemaData;
-        const currentStoreValues = store.getState().widget.values;
-        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);
-                        }
-                    });
-                }
-                else if (typeof originalDataPath === 'string') {
-                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
-                }
-                if (oldValue !== undefined) {
-                    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));
-        }
-    }, [originalSection, schemaData, contextSchemaData, store, namespace, hasSupportingDocuments, sectionId, dispatch]);
+    }, [mode, isDirty, storeValues, namespace, buildSectionSnapshot]);
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -4073,12 +4210,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 console.error('Section Changes Save failed', error);
             }
         }
-        // In RegistryView, save raises a CR — the actual data update follows a
-        // separate approval workflow, so revert the displayed values to the
-        // originals so the view doesn't show unapproved edits.
-        if (mode === 'RegistryView') {
-            revertToOriginalValues();
-        }
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4124,7 +4255,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             if (mode === 'IntakeForm') {
                 baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
                 setIntakeFormBaselineTrigger((prev) => prev + 1);
-                setHasBeenSavedByUser(true);
             }
             onSectionDirtyChange?.(sectionId, false);
         }
@@ -4133,7 +4263,64 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
     // Handle cancel button click
     const handleCancel = () => {
-        revertToOriginalValues();
+        // Revert values in store to original schema data
+        // Use original section (without namespace) for collecting widgets
+        const sectionWidgets = collectWidgets(originalSection.panels);
+        const oldSchemaData = schemaData || contextSchemaData;
+        const currentStoreValues = store.getState().widget.values;
+        let newStoreValues = currentStoreValues;
+        sectionWidgets.forEach(widget => {
+            const originalWidgetId = widget['widget-id'];
+            // If namespace was used, we need to use namespaced widget ID and data path
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-path'];
+            // If namespace was used, data path in store is namespaced, but we read from original schema using original 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) {
+                // Handle multi-path (object) or single path (string)
+                // Read from original schema data using original paths
+                let oldValue;
+                if (typeof originalDataPath === 'object') {
+                    // Multi-path: get values for each path
+                    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);
+                }
+                // Set in store using namespaced data path (if namespace was used)
+                if (oldValue !== undefined) {
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+                }
+            }
+        });
+        // Also revert supporting documents if any
+        if (hasSupportingDocuments) {
+            // Use original section's supporting documents to get original data paths
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
+                const widgetId = `supporting-doc-${sectionId}-${index}`;
+                const originalDataPath = doc['document-data-path'];
+                // If namespace was used, data path in store is namespaced
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+            });
+        }
+        if (newStoreValues !== currentStoreValues) {
+            dispatch(setValues(newStoreValues));
+        }
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4174,7 +4361,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         .${sectionClassId} label.text-gray-700,
         .${sectionClassId} .text-gray-600 {
           font-weight: 400 !important;
-          color: rgba(0, 0, 0, 0.5) !important;
+          color: var(--owt-color-text-muted, #727474) !important;
           width: 50% !important;
           min-width: 50% !important;
           max-width: 50% !important;
@@ -4219,11 +4406,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         .${sectionClassId}-edit {
           box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 
                       0 8px 10px -6px rgba(0, 0, 0, 0.1);
-          border-color: #ED7C22;
+          border-color: var(--owt-color-primary-dark, #F07B1A);
           border-style: dashed;
           border-width: 1px;
-          background-color: #F3E6BC;
-          border-radius: 10px;
+          background-color: var(--owt-color-primary-light, #FBE6AA);
+          border-radius: var(--owt-section-border-radius, 10px);
           z-index: 10;
           position: absolute;
         }
@@ -4323,23 +4510,23 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
 
         /* IntakeForm accordion */
         .${sectionClassId}.intake-form-accordion-item {
-          border-color: #E5E7EB;
+          border-color: var(--owt-color-border-light, #E4E4E4);
           transition: box-shadow 0.2s ease, border-color 0.2s ease;
         }
         .${sectionClassId}.intake-form-accordion-item:hover {
-          border-color: #D1D5DB;
+          border-color: var(--owt-color-border, #C4C4C4);
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header {
           transition: opacity 0.2s ease, background-color 0.2s ease;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header h2 {
-          color: #ED7C22;
+          color: var(--owt-color-primary-dark, #F07B1A);
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:hover {
           opacity: 0.85;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:focus-visible {
-          outline: 2px solid #F2BA1A;
+          outline: 2px solid var(--owt-color-primary, #F5BB1A);
           outline-offset: 2px;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-content {
@@ -4351,27 +4538,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           width: 100%;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-prev-btn {
-          color: rgba(0, 0, 0, 0.5) !important;
+          color: var(--owt-color-text-muted, #727474) !important;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-prev-btn:disabled {
-          color: rgba(0, 0, 0, 0.3) !important;
+          color: var(--owt-color-border, #C4C4C4) !important;
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-prev-btn:hover:not(:disabled) {
-          background-color: #F3F4F6;
-          border-color: #FD8C3E;
+          background-color: var(--owt-color-bg-alt, #F6F6F6);
+          border-color: var(--owt-btn-primary-border, #F07B1A);
         }
         .${sectionClassId}.intake-form-accordion-item .intake-form-save-btn:hover:not(:disabled) {
-          background-color: #E5E7EB;
+          background-color: var(--owt-color-border-light, #E4E4E4);
         }
-      ` }), jsxRuntimeExports.jsx("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 border-white ${mode === 'IntakeForm' ? 'intake-form-accordion-item' : ''}`, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-section-dirty": isEditMode && isDirty ? 'true' : 'false', "data-column-span": columnSpan, "data-change-request-type": changeRequestType, "data-intake-form-expanded": mode === 'IntakeForm' ? (isExpanded ? 'true' : 'false') : undefined, style: {
+      ` }), jsxRuntimeExports.jsx("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 ${mode === 'IntakeForm' ? 'intake-form-accordion-item' : ''}`, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-section-dirty": isEditMode && isDirty ? 'true' : 'false', "data-column-span": columnSpan, "data-change-request-type": changeRequestType, "data-intake-form-expanded": mode === 'IntakeForm' ? (isExpanded ? 'true' : 'false') : undefined, style: {
                     gridColumn: `span ${columnSpan}`,
                     width: '100%',
-                    borderRadius: '10px',
-                    // IntakeForm expanded: edit-mode colors. Others: normal or faded for old CR
+                    borderRadius: 'var(--owt-section-border-radius, 10px)',
+                    borderColor: 'var(--owt-color-bg, #FFFFFF)',
                     ...(mode === 'IntakeForm' && isExpanded
-                        ? { backgroundColor: '#F3E6BC', border: '1px dashed #ED7C22' }
+                        ? { backgroundColor: 'var(--owt-color-primary-light, #FBE6AA)', border: '1px dashed var(--owt-color-primary-dark, #F07B1A)' }
                         : {
-                            backgroundColor: changeRequestType === 'old' ? '#F9F9F9' : '#FFFFFF',
+                            backgroundColor: changeRequestType === 'old' ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-section-bg, #FFFFFF)',
                             opacity: changeRequestType === 'old' ? 0.95 : 1,
                         }),
                     ...(isEditMode && sectionHeight ? {
@@ -4405,17 +4592,17 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                 borderRadius: '9999px',
                                                 fontSize: '12px',
                                                 fontWeight: 500,
-                                                backgroundColor: '#D1FAE5',
-                                                color: '#047857',
+                                                backgroundColor: 'var(--owt-color-success-light, #D1FAE5)',
+                                                color: 'var(--owt-color-success-dark, #047857)',
                                             }, children: translate('common.sectionSaved') || 'Saved' })), intakeFormSectionStatus === 'modified' && (jsxRuntimeExports.jsx("span", { style: {
                                                 display: 'inline-block',
                                                 padding: '4px 10px',
                                                 borderRadius: '9999px',
                                                 fontSize: '12px',
                                                 fontWeight: 500,
-                                                backgroundColor: '#FEE2E2',
-                                                color: '#B91C1C',
-                                            }, children: translate('common.sectionModified') || 'Modified and not saved' }))] }), jsxRuntimeExports.jsx("img", { src: isExpanded ? img$7 : img$6, alt: isExpanded ? 'Collapse' : 'Expand', className: "w-5 h-5 transition-transform", style: { flexShrink: 0, marginLeft: '12px' }, "aria-hidden": true })] }), isExpanded && (jsxRuntimeExports.jsx("div", { id: `intake-form-accordion-content-${sectionId}`, className: "intake-form-accordion-content", role: "region", "aria-labelledby": `intake-form-accordion-header-${sectionId}`, children: jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: { paddingTop: '8px' }, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: isDraft !== false }) }, panel['panel-id'] || `section-panel-${index}`))), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none', margin: '15px 0 0 0' } }), hasSupportingDocuments && (jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, docIndex) => {
+                                                backgroundColor: 'var(--owt-color-error-light, #FEE2E2)',
+                                                color: 'var(--owt-color-error, #B91C1C)',
+                                            }, children: translate('common.sectionModified') || 'Modified and not saved' }))] }), jsxRuntimeExports.jsx("img", { src: isExpanded ? img$7 : img$6, alt: isExpanded ? 'Collapse' : 'Expand', className: "w-5 h-5 transition-transform", style: { flexShrink: 0, marginLeft: '12px' }, "aria-hidden": true })] }), isExpanded && (jsxRuntimeExports.jsx("div", { id: `intake-form-accordion-content-${sectionId}`, className: "intake-form-accordion-content", role: "region", "aria-labelledby": `intake-form-accordion-header-${sectionId}`, children: jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: { paddingTop: '8px' }, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: isDraft !== false }) }, panel['panel-id'] || `section-panel-${index}`))), jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', backgroundColor: 'var(--owt-section-divider-color, #F5BB1A)', border: 'none', margin: '15px 0 0 0' } }), hasSupportingDocuments && (jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, docIndex) => {
                                                     const docConfig = createDocumentWidgetConfig(doc, sectionId, docIndex);
                                                     return (jsxRuntimeExports.jsx("div", { className: "supporting-document-item", children: jsxRuntimeExports.jsx(FileInputWidget, { config: docConfig }) }, `${sectionId}-doc-${docIndex}`));
                                                 }) })] })), jsxRuntimeExports.jsxs("div", { className: "intake-form-edit-controls", style: {
@@ -4431,10 +4618,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     fontSize: '14px',
                                                     fontWeight: 400,
                                                     padding: '8px 24px',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #FD8C3E',
-                                                    background: '#FFFFFF',
-                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                    border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                                    background: 'var(--owt-btn-primary-bg, #FFFFFF)',
+                                                    color: 'var(--owt-color-text-muted, #727474)',
                                                     cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
@@ -4444,10 +4631,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     fontSize: '14px',
                                                     fontWeight: 400,
                                                     padding: '8px 24px',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #FD8C3E',
-                                                    background: '#FFFFFF',
-                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                    border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                                    background: 'var(--owt-btn-primary-bg, #FFFFFF)',
+                                                    color: 'var(--owt-color-text-muted, #727474)',
                                                     cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
@@ -4470,11 +4657,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                         fontWeight: 600,
                                         textTransform: 'uppercase',
                                         letterSpacing: '0.5px',
-                                        backgroundColor: changeRequestType === 'new' ? '#28a745' : '#ffcccc', // Green for new, faded red for old
-                                        color: changeRequestType === 'new' ? '#FFFFFF' : '#cc0000',
+                                        backgroundColor: changeRequestType === 'new' ? 'var(--owt-color-success, #16A34A)' : 'var(--owt-color-error-light, #FEE2E2)',
+                                        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: '40px' } : {}, 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: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                                    }, 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: {
                                                 marginTop: '20px',
                                                 paddingBottom: '30px',
                                                 display: 'flex',
@@ -4489,17 +4676,17 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     }, children: [jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
                                                             }, children: "Created by" }), jsxRuntimeExports.jsx("img", { src: img$a, alt: "Person", width: "16", height: "16", style: { filter: 'brightness(0) saturate(100%) invert(56%) sepia(45%) saturate(5139%) hue-rotate(348deg) brightness(96%) contrast(92%)' } }), crViewData?.createdBy && (jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
                                                             }, children: crViewData.createdBy })), jsxRuntimeExports.jsx("img", { src: img$9, alt: "Calendar", width: "16", height: "16", style: { marginLeft: '6px' } }), crViewData?.createdDate && (jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
                                                             }, children: crViewData.createdDate }))] }), jsxRuntimeExports.jsxs("div", { className: "approved-by-section", style: {
                                                         display: 'flex',
@@ -4510,22 +4697,22 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     }, children: [jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
                                                             }, children: "Approved by" }), jsxRuntimeExports.jsx("img", { src: img$a, alt: "Person", width: "16", height: "16", style: { filter: 'brightness(0) saturate(100%) invert(56%) sepia(45%) saturate(5139%) hue-rotate(348deg) brightness(96%) contrast(92%)' } }), crViewData?.approvedBy && (jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
                                                             }, children: crViewData.approvedBy })), jsxRuntimeExports.jsx("img", { src: img$9, alt: "Calendar", width: "16", height: "16", style: { marginLeft: '6px' } }), crViewData?.approvedDate && (jsxRuntimeExports.jsx("span", { style: {
                                                                 fontFamily: 'Roboto, sans-serif',
                                                                 fontSize: '14px',
-                                                                color: '#000000',
+                                                                color: 'var(--owt-color-text, #011627)',
                                                                 fontWeight: 'normal',
-                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px' } })), 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' && !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: {
                                             fontFamily: 'Roboto, sans-serif',
                                             fontSize: '16px',
-                                            color: 'rgba(0, 0, 0, 0.50)'
+                                            color: 'var(--owt-color-text-muted, #727474)'
                                         }, children: [translate('common.editDetails') || 'Edit Details', jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
 };
 
@@ -4699,9 +4886,6 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     }, []);
     const safeSections = sections ?? [];
     const prevSectionsLengthRef = useRef(safeSections.length);
-    // Stable ref for namespace so formHandle useMemo doesn't depend on the (possibly inline) function identity
-    const namespaceRef = useRef(namespace);
-    namespaceRef.current = namespace;
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = useRef({});
     const handleSectionDirtyChange = useCallback((sectionId, isDirty) => {
@@ -4747,14 +4931,11 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     // Form handle for onFormReady - allows host to validate and get all section data from its own Submit button
     const formHandle = useMemo(() => {
         const getValues = () => store.getState().widget?.values || {};
-        const getNamespace = (section, index) => {
-            const ns = namespaceRef.current;
-            return ns
-                ? typeof ns === 'string'
-                    ? ns
-                    : ns(section['section-id'], index)
-                : undefined;
-        };
+        const getNamespace = (section, index) => namespace
+            ? typeof namespace === 'string'
+                ? namespace
+                : namespace(section['section-id'], index)
+            : undefined;
         const checkNoUnsavedChanges = () => {
             const hasDirty = Object.values(sectionDirtyMapRef.current).some(Boolean);
             if (hasDirty) {
@@ -4804,7 +4985,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                 return results;
             },
         };
-    }, [store, dispatch, safeSections]);
+    }, [store, dispatch, safeSections, namespace]);
     // Call onFormReady when form is ready (sections loaded)
     useEffect(() => {
         if (onFormReady && safeSections.length > 0) {
@@ -4877,6 +5058,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                     const sectionNamespace = namespace
                         ? (typeof namespace === 'string' ? namespace : namespace(section['section-id'], index))
                         : undefined;
+                    const hideEditForSection = hideEditButton || section['section-hide-edit-button'] === true;
                     // IntakeForm mode: pass accordion state and handlers
                     const intakeFormProps = mode === 'IntakeForm'
                         ? {
@@ -4898,7 +5080,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                         : {};
                     // Check if section has explicit column span
                     if (section['section-column-span']) {
-                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace, onSectionDirtyChange: handleSectionDirtyChange, ...intakeFormProps, ...registryViewEditProps }, section['section-id']));
+                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditForSection, mode: mode, namespace: sectionNamespace, onSectionDirtyChange: handleSectionDirtyChange, ...intakeFormProps, ...registryViewEditProps }, section['section-id']));
                     }
                     const verticalPanelsCount = countVerticalPanels(section.panels);
                     const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
@@ -4906,7 +5088,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                     const columnSpan = tableWidgetColumnSpan !== null
                         ? tableWidgetColumnSpan
                         : (containsTable ? Math.max(verticalPanelsCount, 2) : verticalPanelsCount);
-                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace, onSectionDirtyChange: handleSectionDirtyChange, ...intakeFormProps, ...registryViewEditProps }, section['section-id']));
+                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditForSection, mode: mode, namespace: sectionNamespace, onSectionDirtyChange: handleSectionDirtyChange, ...intakeFormProps, ...registryViewEditProps }, section['section-id']));
                 }) })] }));
 };
 
@@ -8098,7 +8280,11 @@ const TableCellSelect = ({ config, value, onValueChange }) => {
     // Use useBaseWidget to get data source options (it handles loading)
     const { dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const isReadonly = config['widget-readonly'] || false;
-    return (jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly || loading ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
+    return (jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly || loading ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+            borderRadius: '10px',
+            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+            backgroundColor: isReadonly || loading ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+        }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 };
 const SelectDisplayValue = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
@@ -8117,7 +8303,11 @@ const TableCellText = ({ config, value, onValueChange }) => {
     config['widget-data-format'];
     const maxLength = config['widget-data-validation']?.maxLength;
     const displayValue = value !== null && value !== undefined ? String(value) : '';
-    return (jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, maxLength: maxLength, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' } }));
+    return (jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, maxLength: maxLength, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+            borderRadius: '10px',
+            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+        } }));
 };
 const TableCellNumber = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
@@ -8140,14 +8330,22 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
             onValueChange(inputValue);
         }
     };
-    return (jsxRuntimeExports.jsx("input", { type: "number", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: validationConfig?.min, max: validationConfig?.max, step: formatConfig?.decimalPlaces ? Math.pow(0.1, formatConfig.decimalPlaces) : undefined, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-right ${isReadonly ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' } }));
+    return (jsxRuntimeExports.jsx("input", { type: "number", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: validationConfig?.min, max: validationConfig?.max, step: formatConfig?.decimalPlaces ? Math.pow(0.1, formatConfig.decimalPlaces) : undefined, className: `w-full h-[28px] px-2 text-sm border focus:outline-none text-right ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+            borderRadius: '10px',
+            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+        } }));
 };
 const TableCellDate = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
     const placeholder = config['widget-data-placeholder'] || '';
     // input type="date" requires YYYY-MM-DD format
     const displayValue = value && typeof value === 'string' ? value.split('T')[0] : '';
-    return (jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' } }));
+    return (jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
+            borderRadius: '10px',
+            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
+            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+        } }));
 };
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
@@ -8554,13 +8752,13 @@ const TableWidget = ({ config }) => {
                 return {}; // No special styling when editing
             const editAction = row?.edit_action;
             if (editAction === 'ADD') {
-                return { color: '#16a34a' }; // green-600
+                return { color: 'var(--owt-color-success, #16A34A)' };
             }
             else if (editAction === 'DELETE') {
-                return { color: '#dc2626', textDecoration: 'line-through' }; // red-600 with strikethrough
+                return { color: 'var(--owt-color-error, #B91C1C)', textDecoration: 'line-through' };
             }
             else if (editAction === 'UPDATE') {
-                return { color: '#ea580c' }; // orange-600
+                return { color: 'var(--owt-color-warning, #F59E0B)' };
             }
             return {};
         };
@@ -8644,27 +8842,81 @@ const TableWidget = ({ config }) => {
         .${tableWidgetId} button {
           border-radius: 10px !important;
         }
-      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md w-full mx-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "text-gray-700 mb-6", children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700", style: { borderRadius: '15px' }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (isSectionEditMode || !isAnyRowEditing) && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('table.addRecord') || 'Add New Record' }) })), rows.length === 0 && !isAdding ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300", style: { borderRadius: '15px' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] })) : (jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-300", style: { borderRadius: '15px' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: jsxRuntimeExports.jsxs("tr", { children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { className: "bg-white divide-y divide-gray-200", children: [rows.map((row, rowIndex) => {
+        /* Focus ring for table cell inputs */
+        .${tableWidgetId} .table-cell-input:focus {
+          box-shadow: 0 0 0 1px var(--owt-widget-input-focus-border, #F07B1A);
+          border-color: var(--owt-widget-input-focus-border, #F07B1A);
+        }
+      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, children: jsxRuntimeExports.jsxs("div", { className: "rounded-lg p-6 max-w-md w-full mx-4", style: { backgroundColor: 'var(--owt-color-bg, #FFFFFF)' }, children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: 'var(--owt-color-text, #011627)' }, children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "mb-6", style: { color: 'var(--owt-color-text, #011627)' }, children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium", style: {
+                                                borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                                backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                                color: 'var(--owt-btn-secondary-color, #011627)',
+                                            }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium", style: {
+                                                borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                                backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                                color: 'var(--owt-color-bg, #FFFFFF)',
+                                            }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (isSectionEditMode || !isAnyRowEditing) && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                color: 'var(--owt-color-bg, #FFFFFF)',
+                            }, children: translate('table.addRecord') || 'Add New Record' }) })), jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border", style: { borderRadius: 'var(--owt-widget-table-border-radius, 15px)', borderColor: 'var(--owt-widget-table-border-color, #C4C4C4)' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full", style: { borderCollapse: 'separate', borderSpacing: 0 }, children: [jsxRuntimeExports.jsx("thead", { style: { backgroundColor: 'var(--owt-widget-table-header-bg, #F6F6F6)' }, children: jsxRuntimeExports.jsxs("tr", { style: { borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)' }, children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && !isAdding && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: columns.length + (((operations.edit || operations.remove) && !isReadonly) || isSectionEditMode ? 1 : 0), className: "px-4 py-6 text-center text-sm", style: { color: 'var(--owt-widget-table-empty-color, #727474)' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] }) })), rows.map((row, rowIndex) => {
                                             const isEditing = isRowEditing(rowIndex);
                                             const isLoading = loadingRowIndex === rowIndex;
-                                            return (jsxRuntimeExports.jsxs("tr", { className: isEditing ? 'bg-blue-50' : isLoading ? 'opacity-50' : row.edit_action === 'DELETE' ? 'bg-red-50' : '', children: [columns.map((col) => {
+                                            return (jsxRuntimeExports.jsxs("tr", { className: isLoading ? 'opacity-50' : '', style: {
+                                                    borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
+                                                    backgroundColor: isEditing
+                                                        ? 'var(--owt-widget-table-editing-row-bg, #FBE6AA)'
+                                                        : row.edit_action === 'DELETE'
+                                                            ? 'var(--owt-widget-table-deleted-row-bg, #FEE2E2)'
+                                                            : undefined,
+                                                }, children: [columns.map((col) => {
                                                         return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col, row) }, col['column-key']));
                                                     }), ((operations.edit || operations.remove) && !isReadonly) || isEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing ? (
                                                         // Show OK (Save)/Cancel buttons when row is being edited (works in both section edit mode and normal mode)
-                                                        jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-2 items-center", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
+                                                        jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-2 items-center", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
                                                                         display: 'inline-block',
                                                                         minWidth: '60px',
-                                                                        backgroundColor: '#16a34a', // green-600
-                                                                        color: '#ffffff', // white text
+                                                                        backgroundColor: 'var(--owt-color-success, #16A34A)',
+                                                                        color: 'var(--owt-color-bg, #FFFFFF)',
                                                                         border: 'none',
-                                                                        borderRadius: '15px'
-                                                                    }, children: translate('common.ok') || 'OK' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: { display: 'inline-block', minWidth: '60px', borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] })) : (
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    }, children: translate('common.ok') || 'OK' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
+                                                                        display: 'inline-block',
+                                                                        minWidth: '60px',
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                        border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                                                        backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                                                        color: 'var(--owt-btn-secondary-color, #011627)',
+                                                                    }, children: translate('common.cancel') || 'Cancel' })] })) : (
                                                         // Show Edit/Delete buttons when row is not being edited
-                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }))] })) })) : null] }, rowIndex));
-                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50", children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
+                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                        color: 'var(--owt-color-primary-dark, #F07B1A)',
+                                                                        backgroundColor: 'transparent',
+                                                                        border: 'none',
+                                                                    }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                        color: 'var(--owt-color-error, #B91C1C)',
+                                                                        backgroundColor: 'transparent',
+                                                                        border: 'none',
+                                                                    }, children: translate('common.remove') || 'Delete' }))] })) })) : null] }, rowIndex));
+                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { style: { backgroundColor: 'var(--owt-widget-table-editing-row-bg, #FBE6AA)' }, children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs disabled:opacity-50", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    backgroundColor: 'var(--owt-color-success, #16A34A)',
+                                                                    color: 'var(--owt-color-bg, #FFFFFF)',
+                                                                    border: 'none',
+                                                                }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
                                                                     setIsAdding(false);
                                                                     setNewRowData(null);
-                                                                }, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }));
+                                                                }, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs disabled:opacity-50", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                                                    backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                                                    color: 'var(--owt-btn-secondary-color, #011627)',
+                                                                }, 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 ProfileWidget = ({ config }) => {
@@ -8753,7 +9005,7 @@ const ProfileWidget = ({ config }) => {
     // Get format options (using index access for widget-specific properties)
     const format = widgetConfig['widget-data-format'] || {};
     const imageSize = format.imageSize || 80;
-    const nameColor = format.nameColor || '#ED7C22';
+    const nameColor = format.nameColor || 'var(--owt-color-primary-dark, #F07B1A)';
     const showIdLabel = format.showIdLabel !== false; // Default to true
     // Generate a unique class ID for this widget instance
     const widgetClassId = `profile-widget-${config['widget-id']}`;
@@ -8776,8 +9028,8 @@ const ProfileWidget = ({ config }) => {
           height: ${imageSize}px;
           border-radius: 8px;
           object-fit: cover;
-          background-color: #e5e7eb;
-          border: 2px solid #d1d5db;
+          background-color: var(--owt-color-border-light, #e5e7eb);
+          border: 2px solid var(--owt-color-border, #d1d5db);
           flex-shrink: 0;
         }
         
@@ -8785,8 +9037,8 @@ const ProfileWidget = ({ config }) => {
           width: ${imageSize}px;
           height: ${imageSize}px;
           border-radius: 8px;
-          background-color: #e5e7eb;
-          border: 2px solid #d1d5db;
+          background-color: var(--owt-color-border-light, #e5e7eb);
+          border: 2px solid var(--owt-color-border, #d1d5db);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -8827,12 +9079,12 @@ const ProfileWidget = ({ config }) => {
         }
         
         .${widgetClassId} .profile-id-label {
-          color: #6b7280;
+          color: var(--owt-color-text-muted, #6b7280);
           font-weight: 500;
         }
         
         .${widgetClassId} .profile-id-value {
-          color: #111827;
+          color: var(--owt-color-text, #111827);
           font-weight: 400;
         }
       ` }), jsxRuntimeExports.jsxs("div", { className: widgetClassId, children: [jsxRuntimeExports.jsxs("div", { className: "profile-avatar-container", children: [imageUrl ? (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: displayName || 'Profile', className: "profile-avatar", onError: (e) => {
@@ -8923,7 +9175,7 @@ const TextAreaWidget = ({ config }) => {
                                         minHeight: `${rows * 1.5 * 14 + 16}px`, // Approximate height based on rows
                                     } }), showCharCounter && (jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 text-xs px-1 rounded", style: {
                                         fontFamily: 'Roboto, sans-serif',
-                                        color: maxLength && currentLength > maxLength ? '#EF4444' : '#6B7280',
+                                        color: maxLength && currentLength > maxLength ? 'var(--owt-widget-error-color, #EF4444)' : 'var(--owt-widget-helptext-color, #6B7280)',
                                         backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                     }, children: charCounterText }))] }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: errorMessage }))] })] }) }));
 };
@@ -9070,7 +9322,7 @@ const HeaderSectionWidget = ({ config }) => {
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
     const imageSize = format.imageSize || 120;
-    const nameColor = format.nameColor || '#ED7C22';
+    const nameColor = format.nameColor || 'var(--owt-color-primary-dark, #F07B1A)';
     const statusColors = {
         ...DEFAULT_STATUS_COLORS,
         ...(format.statusColors || {}),
@@ -9090,9 +9342,19 @@ const HeaderSectionWidget = ({ config }) => {
         const opt = statusOptions.find((o) => String(o.value).toLowerCase() === String(statusValue).toLowerCase());
         return opt ? opt.label : String(statusValue);
     }, [statusValue, statusOptions]);
-    const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
+    const statusColor = statusColors[String(statusValue).toLowerCase()] || 'var(--owt-color-text-muted, #6B7280)';
     // ── Scoped class for CSS isolation ────────────────────────────
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
+    // ── Indicator dot component ───────────────────────────────────
+    const Dot = ({ color }) => (jsxRuntimeExports.jsx("span", { style: {
+            display: 'inline-block',
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: color,
+            flexShrink: 0,
+            marginTop: 6,
+        } }));
     // ── RENDER ────────────────────────────────────────────────────
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
@@ -9126,8 +9388,8 @@ const HeaderSectionWidget = ({ config }) => {
           height: ${imageSize}px;
           border-radius: 8px;
           object-fit: cover;
-          background-color: #e5e7eb;
-          border: 2px solid #d1d5db;
+          background-color: var(--owt-color-border-light, #e5e7eb);
+          border: 2px solid var(--owt-color-border, #d1d5db);
           flex-shrink: 0;
         }
 
@@ -9135,8 +9397,8 @@ const HeaderSectionWidget = ({ config }) => {
           width: ${imageSize}px;
           height: ${imageSize}px;
           border-radius: 8px;
-          background-color: #e5e7eb;
-          border: 2px solid #d1d5db;
+          background-color: var(--owt-color-border-light, #e5e7eb);
+          border: 2px solid var(--owt-color-border, #d1d5db);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -9182,7 +9444,7 @@ const HeaderSectionWidget = ({ config }) => {
         }
 
         .${cls} .hdr-field-value {
-          color: #111827;
+          color: var(--owt-color-text, #111827);
           font-weight: 500;
         }
 
@@ -9209,41 +9471,41 @@ const HeaderSectionWidget = ({ config }) => {
         }
 
         .${cls} .hdr-meta-value {
-          color: #111827;
+          color: var(--owt-color-text, #111827);
           font-weight: 500;
         }
 
         .${cls} .hdr-select {
           height: 32px;
           padding: 0 8px;
-          border: 1px solid #d1d5db;
+          border: 1px solid var(--owt-widget-input-border, #d1d5db);
           border-radius: 6px;
           font-size: 0.875rem;
           font-family: Roboto, sans-serif;
-          background: #fff;
+          background: var(--owt-widget-input-bg, #fff);
           min-width: 140px;
-          color: #374151;
+          color: var(--owt-btn-primary-color, #374151);
         }
         .${cls} .hdr-select:focus {
           outline: none;
-          border-color: #ED7C22;
+          border-color: var(--owt-widget-input-focus-border, #F07B1A);
           box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
         }
 
         .${cls} .hdr-input {
           height: 32px;
           padding: 0 8px;
-          border: 1px solid #d1d5db;
+          border: 1px solid var(--owt-widget-input-border, #d1d5db);
           border-radius: 6px;
           font-size: 0.875rem;
           font-family: Roboto, sans-serif;
-          background: #fff;
+          background: var(--owt-widget-input-bg, #fff);
           min-width: 140px;
-          color: #374151;
+          color: var(--owt-btn-primary-color, #374151);
         }
         .${cls} .hdr-input:focus {
           outline: none;
-          border-color: #ED7C22;
+          border-color: var(--owt-widget-input-focus-border, #F07B1A);
           box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
         }
 
@@ -9261,7 +9523,255 @@ const HeaderSectionWidget = ({ config }) => {
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+};
+
+function tryFormatDateTime(value) {
+    if (typeof value !== 'string' || !value)
+        return value ? String(value) : '-';
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return value;
+    try {
+        return d.toLocaleString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    catch {
+        return value;
+    }
+}
+function pickLatestScore(scores) {
+    if (!scores || scores.length === 0)
+        return null;
+    const withTime = scores
+        .map((s) => {
+        const t = typeof s?.computed_at === 'string' ? new Date(s.computed_at).getTime() : NaN;
+        return { s, t };
+    })
+        .filter((x) => !Number.isNaN(x.t));
+    if (withTime.length === 0)
+        return scores[0] || null;
+    withTime.sort((a, b) => b.t - a.t);
+    return withTime[0]?.s || null;
+}
+/**
+ * Scores Display Widget - full-width, view-only widget
+ *
+ * Expected config (reference):
+ * {
+ *   "widget": "scores-display",
+ *   "widget-type": "group",
+ *   "widget-id": "record-scores",
+ *   "widget-data-source": {
+ *     "type": "api",
+ *     "service": "staff-portal-api",
+ *     "endpoint": "get_scores",
+ *     "method": "POST",
+ *     "params": { "internal_record_id_path": "internal_record_id" }
+ *   }
+ * }
+ *
+ * The host's `dataSourceRequestHandler` is invoked with:
+ * - service: config.widget-data-source.service
+ * - endpoint: config.widget-data-source.endpoint
+ * - method: config.widget-data-source.method (default POST)
+ * - params: { internal_record_id: <resolved from internal_record_id_path> }
+ */
+const ScoresDisplayWidget = ({ config, dataSourceRequestHandler: propHandler, schemaData: propSchemaData, }) => {
+    const { dataSourceRequestHandler: ctxHandler, schemaData: ctxSchemaData } = useWidgetContext();
+    const handler = propHandler || ctxHandler;
+    const schemaData = propSchemaData || ctxSchemaData || {};
+    const values = useSelector((state) => state.widget.values);
+    const api = config['widget-data-source'];
+    const isApi = api?.type === 'api';
+    const apiDs = isApi ? api : null;
+    const internalIdPath = useMemo(() => {
+        if (!apiDs)
+            return undefined;
+        const p = apiDs.params || {};
+        const fromParams = p.internal_record_id_path || p.internalRecordIdPath;
+        const fromConfig = typeof config.internal_record_id_path === 'string'
+            ? config.internal_record_id_path
+            : undefined;
+        return fromParams || fromConfig;
+    }, [apiDs, config]);
+    const internalRecordId = useMemo(() => {
+        if (!internalIdPath)
+            return undefined;
+        const fromValues = getValueByPath(values || {}, internalIdPath);
+        if (fromValues !== undefined && fromValues !== null && String(fromValues).trim() !== '') {
+            return String(fromValues);
+        }
+        const fromSchema = getValueByPath(schemaData || {}, internalIdPath);
+        if (fromSchema !== undefined && fromSchema !== null && String(fromSchema).trim() !== '') {
+            return String(fromSchema);
+        }
+        return undefined;
+    }, [internalIdPath, values, schemaData]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [response, setResponse] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            if (!apiDs) {
+                setError('Scores widget requires an API data source.');
+                setResponse(null);
+                return;
+            }
+            if (!handler) {
+                setError(null);
+                setResponse(null);
+                return;
+            }
+            const service = apiDs.service;
+            const endpoint = apiDs.endpoint;
+            const method = apiDs.method || 'POST';
+            if (!service || !endpoint) {
+                setError('Scores widget API data source is missing service/endpoint.');
+                setResponse(null);
+                return;
+            }
+            if (!internalRecordId) {
+                setError(null);
+                setResponse(null);
+                return;
+            }
+            try {
+                setLoading(true);
+                setError(null);
+                const rawParams = apiDs.params || {};
+                // Never pass the path helper through to the API.
+                const { internal_record_id_path, internalRecordIdPath, ...rest } = rawParams;
+                void internal_record_id_path;
+                void internalRecordIdPath;
+                const params = {
+                    ...rest,
+                    internal_record_id: internalRecordId,
+                };
+                const res = await handler(service, endpoint, method, params, {
+                    headers: apiDs.headers,
+                });
+                if (cancelled)
+                    return;
+                // Accept either direct payload or OpenG2P wrapper objects.
+                const envelope = res && typeof res === 'object' ? res : null;
+                const payload = envelope?.response_body?.response_payload ?? envelope?.data ?? res;
+                if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+                    setResponse(payload);
+                }
+                else {
+                    setResponse({ scores: Array.isArray(payload) ? payload : [] });
+                }
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                const maybeErr = e;
+                const msg = maybeErr && typeof maybeErr === 'object' && typeof maybeErr.message === 'string'
+                    ? maybeErr.message
+                    : 'Failed to load scores.';
+                setError(msg);
+                setResponse(null);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        };
+        load();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiDs, handler, internalRecordId]);
+    const latest = useMemo(() => pickLatestScore(response?.scores), [response]);
+    const cls = `scores-display-widget-${config['widget-id']}`;
+    const scoreType = latest?.score_type ? String(latest.score_type) : '-';
+    const scoreValue = latest?.computed_score !== undefined && latest?.computed_score !== null && String(latest.computed_score) !== ''
+        ? String(latest.computed_score)
+        : '-';
+    const computedAt = tryFormatDateTime(latest?.computed_at);
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        .${cls} {
+          width: 100%;
+          font-family: Roboto, sans-serif;
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .${cls} .scores-subtle {
+          font-size: 13px;
+          color: var(--owt-color-text-muted, #727474);
+          font-weight: 400;
+        }
+
+        .${cls} .scores-card {
+          width: 100%;
+          border: none;
+          border-radius: 0;
+          background: transparent;
+          padding: 0;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          gap: 16px;
+          align-items: center;
+        }
+
+        .${cls} .scores-col {
+          min-width: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+
+        .${cls} .scores-label {
+          font-size: 12px;
+          color: var(--owt-color-text-muted, #727474);
+          font-weight: 600;
+          letter-spacing: 0.25px;
+          text-transform: uppercase;
+        }
+
+        .${cls} .scores-value {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--owt-color-text, #011627);
+          line-height: 1.25;
+          word-break: break-word;
+        }
+
+        .${cls} .scores-value--highlight {
+          font-weight: 800;
+          color: var(--owt-color-primary-dark, #F07B1A);
+        }
+
+        .${cls} .scores-value-wrap {
+          display: inline-flex;
+          align-items: baseline;
+          gap: 10px;
+          flex-wrap: wrap;
+        }
+
+        .${cls} .scores-value-badge { display: inline; }
+
+        .${cls} .scores-statusline {
+          grid-column: 1 / -1;
+          margin-top: 2px;
+        }
+
+        @media (max-width: 768px) {
+          .${cls} .scores-card {
+            grid-template-columns: 1fr;
+          }
+        }
+      ` }), jsxRuntimeExports.jsx("div", { className: cls, children: jsxRuntimeExports.jsxs("div", { className: "scores-card", children: [jsxRuntimeExports.jsxs("div", { className: "scores-col", "aria-live": "polite", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score Type" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreType }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreValue }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Computed at" }), jsxRuntimeExports.jsx("div", { className: "scores-value", children: computedAt })] }), jsxRuntimeExports.jsx("div", { className: "scores-statusline", children: loading ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "Loading scores\u2026" })) : error ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", style: { color: 'var(--owt-color-error, #B91C1C)' }, children: error })) : !latest ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "No scores available." })) : null })] }) })] }));
 };
 
 /**
@@ -9305,6 +9815,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'profile', component: ProfileWidget });
     // Header section widget for full-width registry header with profile, status, and metadata
     widgetRegistry.register({ widget: 'header-section', component: HeaderSectionWidget });
+    // Scores display widget for full-width computed scores display (view-only)
+    widgetRegistry.register({ widget: 'scores-display', component: ScoresDisplayWidget });
 };
 // Auto-register on import
 registerDefaultWidgets();
@@ -9666,5 +10178,5 @@ const translateUISchema = (schema, translate) => {
     };
 };
 
-export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DisplayWidget, FileInputWidget, HeaderSectionWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
+export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DisplayWidget, FileInputWidget, HeaderSectionWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, ScoresDisplayWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, defaultTheme, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, resolveTheme, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTheme, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
 //# sourceMappingURL=index.esm.js.map