impaktapps-ui-builder 1.0.3 → 1.0.5

package/dist/impaktapps-ui-builder.es.js

@@ -44,7 +44,7 @@ const PageMasterSchema = {
       disabled: true
     }
   },
-  required: ["template", "name", "label"]
+  required: ["name", "label"]
 };
 const PageMasterUiSchema = (theme) => {
   var _a;
@@ -96,11 +96,41 @@ const PageMasterUiSchema = (theme) => {
               }
             }
           },
+          {
+            type: "Control",
+            scope: "#/properties/pageIconUrl",
+            options: {
+              widget: "InputField"
+            },
+            config: {
+              layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Page Icon URL",
+                options: [],
+                color: "secondary",
+                required: true
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/hasBackIcon",
+            options: {
+              widget: "RadioInputField"
+            },
+            config: {
+              layout: { xs: 12, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Back Icon",
+                options: [{ label: "Yes", const: "YES" }, { label: "No", const: "NO" }]
+              }
+            }
+          },
           {
             type: "Control",
             scope: "#/properties/EmptyBox",
             config: {
-              layout: { xs: 0, sm: 0, md: 4, lg: 6 }
+              layout: { xs: 0, sm: 6, md: 0, lg: 3 }
             },
             options: {
               widget: "EmptyBox"
@@ -204,91 +234,70 @@ const PageMasterUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "name",
-                header: "Name",
-                size: 300,
-                type: "string"
-              },
-              {
-                accessorKey: "type",
-                header: "Type",
-                size: 300,
-                type: "string"
               },
-              {
-                header: "Edit",
-                field: "Reject_Records",
-                size: 150,
-                type: "action",
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "TableEditIcon",
+                      size: "small",
+                      startIcon: "EditIcon",
                       onClick: "Edit_Components",
-                      tooltipMessage: "Edit This Record"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      tooltipMessage: "Edit This Record",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                header: "Delete",
-                field: "Reject_Records",
-                size: 150,
-                type: "action",
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      size: "small",
+                      startIcon: "Bin",
                       onClick: "deletePopUpComponent",
-                      tooltipMessage: "Reject This Record"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      tooltipMessage: "Reject This Record",
+                      name: "Delete"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Component",
-                flex: 1,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Component",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      size: "small",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: false,
+                      name: "Copy"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "name",
+                header: "Name",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "type",
+                header: "Type",
+                size: 300,
+                type: "string"
               }
             ]
           },
@@ -361,93 +370,70 @@ const PageMasterUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "eventType",
-                header: "Event's Type",
-                size: 300,
-                type: "string"
               },
-              {
-                accessorKey: "Handler",
-                header: "Handler",
-                size: 200,
-                type: "string"
-              },
-              {
-                accessorKey: "Edit_Approve_Records",
-                header: "Edit",
-                type: "action",
-                size: 150,
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
                       size: "small",
-                      icon: "TableEditIcon",
+                      startIcon: "EditIcon",
                       tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "editEvent",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                accessorKey: "Reject_Records",
-                header: "Delete",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      size: "small",
+                      startIcon: "Bin",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deletePopUpEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "deletePopUpEvent",
+                      name: "Delete"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Event",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      size: "small",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: true,
+                      name: "Copy"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "Handler",
+                header: "Handler",
+                size: 200,
+                type: "string"
               }
             ]
           }
@@ -1518,7 +1504,7 @@ var lodash = { exports: {} };
       var reIsNative = RegExp2(
         "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
       );
-      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined$1, symIterator = Symbol ? Symbol.iterator : undefined$1, symToStringTag = Symbol ? Symbol.toStringTag : undefined$1;
+      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol = context.Symbol, Uint8Array2 = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined$1, symIterator = Symbol ? Symbol.iterator : undefined$1, symToStringTag = Symbol ? Symbol.toStringTag : undefined$1;
       var defineProperty = function() {
         try {
           var func = getNative(Object2, "defineProperty");
@@ -2780,7 +2766,7 @@ var lodash = { exports: {} };
       }
       function cloneArrayBuffer(arrayBuffer) {
         var result2 = new arrayBuffer.constructor(arrayBuffer.byteLength);
-        new Uint8Array(result2).set(new Uint8Array(arrayBuffer));
+        new Uint8Array2(result2).set(new Uint8Array2(arrayBuffer));
         return result2;
       }
       function cloneDataView(dataView, isDeep) {
@@ -3384,7 +3370,7 @@ var lodash = { exports: {} };
             object = object.buffer;
             other = other.buffer;
           case arrayBufferTag:
-            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
+            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array2(object), new Uint8Array2(other))) {
               return false;
             }
             return true;
@@ -6253,9 +6239,13 @@ const ComponentSchema = {
         { title: "Masked Aadhar Card", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
+        { title: "ButtonGroup", const: "ButtonGroup" },
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
+        { title: "Camera", const: "Camera" },
+        { title: "Column Group", const: "ColumnGroup" },
         { title: "Container", const: "WrapperSection" },
+        { title: "Tab Container", const: "HorizontalLayout" },
         { title: "Data Grid", const: "DataGrid" },
         { title: "Date", const: "Date" },
         { title: "Time Stamp", const: "DateTime" },
@@ -6263,12 +6253,15 @@ const ComponentSchema = {
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File Handler", const: "FileInput" },
         { title: "Graph", const: "Graph" },
+        { title: "Image", const: "Image" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
         { title: "Leaderboard", const: "LeaderBoard" },
         { title: "Multi-Select Dropdown", const: "MultipleSelect" },
+        { title: "OTP_Input", const: "OTP_Input" },
         { title: "Pan Card Masked", const: "PanCardText" },
         { title: "Pop Up", const: "PopUp" },
+        { title: "Pop Over", const: "PopOver" },
         { title: "Progress Bar", const: "ProgressBar" },
         { title: "Progress Bar Card", const: "ProgressBarCard" },
         { title: "Dropdown", const: "Select" },
@@ -6278,6 +6271,7 @@ const ComponentSchema = {
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
+        { title: "Metric Card", const: "MetricCard" },
         { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
@@ -6286,8 +6280,8 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
-        { title: "Column Group", const: "ColumnGroup" },
-        { title: "Thought of the day", const: "Thought" }
+        { title: "Thought of the day", const: "Thought" },
+        { title: "PDF", const: "PdfViewer" }
       ]
     },
     elementType: {
@@ -6301,7 +6295,86 @@ const ComponentSchema = {
       oneOf: [
         { title: "Date Column", const: "date" },
         { title: "DateTime Column", const: "dateTime" },
-        { title: "Amount Column", const: "amount" }
+        { title: "Amount Column", const: "amount" },
+        { title: "Center Column", const: "action" }
+      ]
+    },
+    dateFormat: {
+      oneOf: [
+        {
+          title: "YYYY-MM-DDTHH:mm:ss.SSSZ",
+          const: "YYYY-MM-DDTHH:mm:ss.SSSZ"
+        },
+        {
+          title: "YYYY-MM-DDTHH:mm:ssZ",
+          const: "YYYY-MM-DDTHH:mm:ssZ"
+        },
+        {
+          title: "YYYY-MM-DDTHH:mm:ss",
+          const: "YYYY-MM-DDTHH:mm:ss"
+        },
+        { title: "YYYY-MM-DD", const: "YYYY-MM-DD" },
+        { title: "DD-MM-YYYY", const: "DD-MM-YYYY" },
+        { title: "MM/DD/YYYY", const: "MM/DD/YYYY" },
+        {
+          title: "YYYY-MM-DD HH:mm:ss",
+          const: "YYYY-MM-DD HH:mm:ss"
+        },
+        {
+          title: "YYYY-MM-DD HH:mm:ss.SSS",
+          const: "YYYY-MM-DD HH:mm:ss.SSS"
+        },
+        { title: "Milliseconds", const: "x" },
+        { title: "Seconds", const: "X" }
+      ]
+    },
+    variant: {
+      oneOf: [
+        { title: "Outlined", const: "outlined" },
+        { title: "Filled", const: "filled" },
+        { title: "Standard", const: "standard" }
+      ]
+    },
+    positionVertical: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Center", const: "center" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    positionHorizontal: {
+      oneOf: [
+        { title: "Left", const: "left" },
+        { title: "Center", const: "center" },
+        { title: "Right", const: "right" }
+      ]
+    },
+    contentVertical: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Center", const: "center" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    contentHorizontal: {
+      oneOf: [
+        { title: "Left", const: "left" },
+        { title: "Center", const: "center" },
+        { title: "Right", const: "right" }
+      ]
+    },
+    toolTipPosition: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Left", const: "left" },
+        { title: "Right", const: "right" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    growthRate: {
+      oneOf: [
+        { title: "Positive", const: "positive" },
+        { title: "Negative", const: "negative" }
       ]
     },
     orientation: {
@@ -6319,6 +6392,40 @@ const ComponentSchema = {
         { title: "Put", const: "put" }
       ]
     },
+    maxPageSize: {
+      type: "number",
+      oneOf: [
+        { title: "10", const: 10 },
+        { title: "20", const: 20 },
+        { title: "30", const: 30 },
+        { title: "50", const: 50 },
+        { title: "100", const: 100 },
+        { title: "500", const: 500 }
+      ]
+    },
+    initialDensity: {
+      type: "string",
+      oneOf: [
+        { title: "Compact", const: "compact" },
+        { title: "Comfortable", const: "comfortable" },
+        { title: "Spacious", const: "spacious" }
+      ]
+    },
+    xAxisFormatType: {
+      type: "string",
+      oneOf: [
+        { title: "Date and Month", const: "Date and Month" },
+        { title: "Month and Year", const: "Month and Year" }
+      ]
+    },
+    xAxisType: {
+      type: "string",
+      oneOf: [
+        { title: "Date", const: "date" },
+        { title: "String", const: "string" },
+        { title: "Number", const: "number" }
+      ]
+    },
     layout: {
       type: "array",
       items: {
@@ -6386,20 +6493,6 @@ const ComponentSchema = {
         }
       }
     },
-    events: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          eventType: {
-            type: "string"
-          },
-          configType: {
-            type: "string"
-          }
-        }
-      }
-    },
     sectionLabels: {
       type: "array",
       items: {
@@ -6468,6 +6561,9 @@ const ComponentSchema = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string"
+          },
           label: {
             type: "string"
           }
@@ -6479,12 +6575,26 @@ const ComponentSchema = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string"
+          },
           label: {
             type: "string"
           }
         }
       }
     },
+    tabIcons: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          url: {
+            type: "string"
+          }
+        }
+      }
+    },
     InputFormatingAndMasking: {
       type: "array",
       items: {
@@ -6510,7 +6620,8 @@ const ComponentSchema = {
               { const: "required", title: "Required" },
               { const: "minLength", title: "Minimum Length" },
               { const: "maxLength", title: "Maximum Length" },
-              { const: "pattern", title: "Pattern" }
+              { const: "pattern", title: "Pattern" },
+              { const: "readOnly", title: "Read Only" }
             ]
           },
           validationValue: {
@@ -6542,7 +6653,12 @@ const ComponentSchema = {
         { title: "Line Graph", const: "LineGraph" },
         { title: "Pie Graph", const: "PieGraph" },
         { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
-        { title: "Stack Horizontal Bar Graph", const: "HorizontalStackBarGraph" }
+        {
+          title: "Stack Horizontal Bar Graph",
+          const: "HorizontalStackBarGraph"
+        },
+        { title: "Area Graph", const: "AreaGraph" },
+        { title: "StackBar And Line Graph", const: "StackBarLineGraph" }
       ]
     },
     iconName: {
@@ -6564,7 +6680,43 @@ const ComponentSchema = {
         { title: "Error Icon", const: "ErrorIcon" },
         { title: "Refresh Icon", const: "RefreshIcon" },
         { title: "Download Icon", const: "DownloadIcon" },
-        { title: "Exception Icon", const: "ExceptionIcon" }
+        { title: "Download All Icon", const: "DownloadAllIcon" },
+        { title: "Exception Icon", const: "ExceptionIcon" },
+        { title: "Alarm Icon", const: "AlarmIcon" },
+        { title: "Click Icon", const: "ClickIcon" },
+        { title: "Content Copy Icon", const: "ContentCopyIcon" },
+        { title: "File Copy Icon", const: "FileCopyIcon" },
+        { title: "Pause Icon", const: "PauseIcon" },
+        { title: "Play Icon", const: "PlayIcon" },
+        { title: "Close Icon", const: "CloseIcon" },
+        { title: "Replay Icon", const: "ReplayIcon" },
+        { title: "Delete Icon", const: "DeleteIcon" },
+        { title: "Drafts Icon", const: "DraftsIcon" },
+        { title: "Perm Phone Msg Icon", const: "PermPhoneMsgIcon" },
+        { title: "Paste Icon", const: "PasteIcon" },
+        { title: "Calendar", const: "Calendar" },
+        { title: "Prev Icon", const: "PrevIcon" },
+        { title: "Verified Icon", const: "VerifiedIcon" },
+        { title: "Table Add Icon", const: "TableAddIcon" },
+        { title: "Table Download Icon", const: "TableDownloadIcon" },
+        { title: "Audit Trail Icon", const: "AuditTrailIcon" },
+        { title: "View Component", const: "View" },
+        { title: "Table Edit Icon", const: "TableEditIcon" },
+        { title: "Maximize Icon", const: "Maximize" },
+        { title: "Minimize Icon", const: "Minimize" },
+        { title: "Subtract Icon", const: "Subtract" },
+        { title: "Bin Icon", const: "Bin" },
+        { title: "Export Icon", const: "Export" },
+        { title: "Table Paste Icon", const: "TablePaste" },
+        { title: "Clone Icon", const: "CloneIcon" },
+        { title: "Detail Icon", const: "DetailIcon" },
+        { title: "Report View Icon", const: "ReportViewIcon" },
+        { title: "Payout", const: "Payout" },
+        { title: "Info Outlined", const: "InfoOutlinedIcon" },
+        { title: "Territory Add", const: "TerritoryAdd" },
+        { title: "Territory Edit", const: "TerritoryEdit" },
+        { title: "Territory Delete", const: "TerritoryDelete" },
+        { title: "Git Compare", const: "GitCompare" }
       ]
     },
     color: {
@@ -6682,7 +6834,7 @@ const componentBasicUiSchema = (theme) => {
               },
               {
                 type: "Control",
-                scope: "#/properties/proc",
+                scope: "#/properties/proc5",
                 config: {
                   layout: { xs: 6, sm: 6, md: 0, lg: 3 }
                 },
@@ -6692,84 +6844,155 @@ const componentBasicUiSchema = (theme) => {
               },
               {
                 type: "Control",
-                scope: "#/properties/layout",
-                layout: 12,
+                scope: "#/properties/proc6",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
                 options: {
-                  detail: {
-                    type: "HorizontalLayout",
-                    elements: [
-                      {
-                        type: "Control",
-                        scope: "#/properties/key",
-                        options: {
-                          widget: "SelectInputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Screen Size"
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/value",
-                        options: {
-                          widget: "InputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Value",
-                            type: "number",
-                            helperText: "Number should be in range of 0 to 12",
-                            errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/proc",
-                        config: {
-                          layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-                        },
-                        options: {
-                          widget: "EmptyBox"
-                        }
-                      }
-                    ]
-                  }
+                  widget: "EmptyBox"
                 }
-              }
-            ]
-          }
-        ]
-      },
-      {
-        type: "WrapperLayout",
-        config: {
-          main: {
-            gap: "8px"
-          }
-        },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/btn",
-            options: {
-              widget: "Button"
-            },
-            config: {
-              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
-              main: {
-                name: "Ok",
-                variant: "contained",
-                type: "text",
-                onClick: "okHandler",
-                size: "medium"
-              }
-            }
-          },
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc7",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc8",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc9",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc10",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc11",
+                config: {
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/layout",
+                config: {
+                  layout: 12,
+                  main: {
+                    label: "Layout",
+                    childElementLabel: "Layout"
+                  },
+                  style: {
+                    marginLeft: "-24px",
+                    marginBottom: "24px !important",
+                    labelStyle: {
+                      marginLeft: "24px"
+                    },
+                    detailsStyle: {
+                      marginLeft: "24px"
+                    }
+                  }
+                },
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/key",
+                    options: {
+                      widget: "SelectInputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Screen Size"
+                      }
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/value",
+                    options: {
+                      widget: "InputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Value",
+                        type: "number",
+                        helperText: "Number should be in range of 0 to 12",
+                        errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+                      }
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/proc",
+                    config: {
+                      layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                    },
+                    options: {
+                      widget: "EmptyBox"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "WrapperLayout",
+        config: {
+          main: {
+            gap: "8px"
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/btn",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+              main: {
+                name: "Ok",
+                variant: "contained",
+                type: "text",
+                onClick: "okHandler",
+                size: "medium"
+              }
+            }
+          },
           {
             type: "Control",
             scope: "#/properties/btnSubmit",
@@ -7191,6 +7414,76 @@ const CoreSection = {
         }
       }
     },
+    {
+      type: "Control",
+      scope: "#/properties/proc5",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc6",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc7",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc8",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc9",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc10",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc11",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
     {
       type: "Control",
       scope: "#/properties/proc",
@@ -7204,78 +7497,88 @@ const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
-      options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Screen Size"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value",
-                  type: "number",
-                  helperText: "Number should be in range of 0 to 12",
-                  errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              },
-              options: {
-                widget: "EmptyBox"
-              }
-            }
-          ]
+      config: {
+        layout: 12,
+        main: {
+          label: "Layout",
+          childElementLabel: "Layout"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
         }
-      }
-    }
-  ]
-};
-const EventSection = (theme) => {
-  const uiSchema = {
-    type: "HorizontalLayout",
-    elements: [
-      {
-        type: "Control",
-        scope: "#/properties/events",
-        options: {
-          widget: "Table"
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Screen Size"
+            }
+          }
         },
-        config: {
-          main: {
-            headerIcons: {
-              elements: [
-                {
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/New_Record",
-                    options: {
-                      widget: "IconButton"
-                    },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+              type: "number",
+              helperText: "Number should be in range of 0 to 12",
+              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/proc",
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          },
+          options: {
+            widget: "EmptyBox"
+          }
+        }
+      ]
+    }
+  ]
+};
+const EventSection = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/events",
+        options: {
+          widget: "Table"
+        },
+        config: {
+          main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+                    options: {
+                      widget: "IconButton"
+                    },
                     config: {
                       main: {
                         onClick: "eventAddHandler",
@@ -7328,95 +7631,71 @@ const EventSection = (theme) => {
             disableAction: true,
             disableSelection: true,
             enableDrag: true
-          }
-        },
-        elements: [
-          {
-            accessorKey: "eventType",
-            header: "Event's Type",
-            type: "string",
-            size: 300
-          },
-          {
-            accessorKey: "Handler",
-            header: "Handler",
-            type: "string",
-            size: 200
           },
-          {
-            accessorKey: "Edit_Approve_Records",
-            header: "Edit",
-            size: 150,
-            type: "action",
-            widget: {
+          action: [
+            {
               type: "Control",
               scope: "#/properties/Edit_Records",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
                   size: "small",
-                  icon: "TableEditIcon",
+                  startIcon: "EditIcon",
                   tooltipMessage: "Edit This Record",
-                  onClick: "eventEditHandler"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  onClick: "eventEditHandler",
+                  name: "Edit"
                 }
               }
-            }
-          },
-          {
-            accessorKey: "Reject_Records",
-            header: "Delete",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               accessorKeyName: "Reject_Records",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "Bin",
+                  startIcon: "Bin",
                   tooltipMessage: "Reject This Record",
-                  onClick: "deletePopUpEvent"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  onClick: "deletePopUpEvent",
+                  name: "Delete",
+                  size: "small"
                 }
               }
-            }
-          },
-          {
-            header: "Copy",
-            field: "Copy_Event",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/Copy_Event",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "FileCopyIcon",
+                  startIcon: "FileCopyIcon",
                   onClick: "copyPasteElement",
                   tooltipMessage: "Reject This Record",
-                  styleDefault: true
+                  styleDefault: false,
+                  name: "Copy"
                 }
               }
             }
+          ]
+        },
+        elements: [
+          {
+            accessorKey: "eventType",
+            header: "Event's Type",
+            type: "string",
+            size: 300
+          },
+          {
+            accessorKey: "Handler",
+            header: "Handler",
+            type: "string",
+            size: 200
           }
         ]
       }
@@ -7451,44 +7730,55 @@ const emptyBox$1 = (scope, layout) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 12,
-  options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/value",
-          options: {
-            widget: "InputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              helperText: "Number should be in range of 0 to 12",
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-            }
-          }
-        },
-        emptyBox$1("cardEmpty")
-      ]
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout"
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px"
+      },
+      detailsStyle: {
+        marginLeft: "24px"
+      }
     }
-  }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Screen Size"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
+      options: {
+        widget: "InputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          helperText: "Number should be in range of 0 to 12",
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+        }
+      }
+    },
+    emptyBox$1("cardEmpty")
+  ]
 };
 const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
@@ -7532,6 +7822,60 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
     ]
   };
 };
+const getArrayControlMultiField = (parentScope, firstFieldScope, secondFieldScope, firstFieldLabel, secondFieldLabel, arrayLabel) => {
+  return {
+    type: "Control",
+    scope: `#/properties/${parentScope}`,
+    options: {
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: arrayLabel
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px"
+        },
+        detailsStyle: {
+          marginLeft: "24px"
+        }
+      }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${firstFieldScope}`,
+        options: {
+          widget: "InputField"
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: firstFieldLabel || "Labels for Tab"
+          }
+        }
+      },
+      {
+        type: "Control",
+        scope: `#/properties/${secondFieldScope}`,
+        options: {
+          widget: "InputField"
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: secondFieldLabel || "Labels for Tab"
+          }
+        }
+      },
+      emptyBox$1("ArrayControlEmpty2", { xs: 6, sm: 6, md: 4, lg: 4 })
+    ]
+  };
+};
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
 sizeHolder.elements[1] = {
   type: "Control",
@@ -7654,6 +7998,28 @@ const BaseSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
+    case "OTP_Input":
+      uiSchema.elements = [
+        getInputField("seperator", "Seperator"),
+        getInputField("length", "OTP Length"),
+        getRadioInputField("masking", "OTP Masking", ["YES", "NO"]),
+        emptyBox$1("empty1", { xs: 12, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
+    case "Array":
+      uiSchema.elements = [
+        getRadioInputField("allExpanded", "Initial Expand", ["YES", "NO"]),
+        getRadioInputField("disableAddButton", "Disable Add Button", ["YES", "NO"]),
+        getRadioInputField("disableExpandAllButton", "Disable Expand Buttons", ["YES", "NO"]),
+        getRadioInputField("disableRowActions", "Disable Row Actions", ["YES", "NO"]),
+        getInputField("childElementLabel", "Child Element Label"),
+        getInputField("showKeyAsLabel", "ShowKey As Label"),
+        getInputField("rowSpacing", "Row Spacing"),
+        getInputField("columnSpacing", "Column Spacing"),
+        getInputField("spacing", "Spacing"),
+        emptyBox$1("empty1", { xs: 12, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
     case "TreeMap":
       uiSchema.elements = [
         getSelectField("orientation", "orientation"),
@@ -7704,12 +8070,28 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("PopUpEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
+    case "PopOver":
+      uiSchema.elements = [
+        getSelectField("positionVertical", "Attach To (Vertical)"),
+        getSelectField("positionHorizontal", "Attach To (Horizontal)"),
+        getSelectField("contentVertical", "Popover Start (Vertical)"),
+        getSelectField("contentHorizontal", "Popover Start (Horizontal)"),
+        getInputField("width", "Width"),
+        getInputField("gap", "Gap"),
+        emptyBox$1("PopUpEmpty", { xs: 6, sm: 0, md: 8, lg: 6 })
+      ];
+      break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
-        emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
-        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
+        getSelectField("variant", "Variant"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        getSelectField("iconName", "Start Icon"),
+        emptyBox$1("Radio", { xs: 0, sm: 0, md: 0, lg: 6 }),
+        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
+        getInputField("keyName", "Event Key Name")
       ];
       break;
     case "TextArea":
@@ -7745,7 +8127,8 @@ const buildPropertiesSection = function(type) {
         getInputField("nameKey", "Key for Name"),
         getInputField("imageKey", "Key for Image"),
         getInputField("scoreKey", "Key for comparing parameter"),
-        emptyBox$1("LeaderBoardEmpty1", { xs: 6, sm: 6, md: 0, lg: 0 })
+        getRadioInputField("isScoreAmount", "Is Score an Amount Type", ["YES", "No"]),
+        emptyBox$1("LeaderBoardEmpty1", { xs: 6, sm: 6, md: 0, lg: 3 })
       ];
       break;
     case "CardSlider":
@@ -7761,8 +8144,9 @@ const buildPropertiesSection = function(type) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        emptyBox$1("ProgressBarCardEmpty1"),
-        emptyBox$1("ProgressBarCardEmpty2")
+        getInputField("size", "Size"),
+        getRadioInputField("variant", "Variant", ["circular", "horizontal"]),
+        getArrayControl("pieArcColors", "color", "Color")
       ];
       break;
     case "card":
@@ -7774,6 +8158,17 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
+    case "MetricCard":
+      uiSchema.elements = [
+        getInputField("url", "Image Url"),
+        getInputField("label", "Label"),
+        getInputField("cardValue", "Value"),
+        getInputField("description", "Description"),
+        getSelectField("growthRate", "Growth Rate"),
+        getInputField("color", "Card Color"),
+        emptyBox$1("MetricEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
     case "Button":
       uiSchema.elements = [
         getSelectField("buttonType", "Button Type"),
@@ -7784,22 +8179,45 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
+    case "ButtonGroup":
+      uiSchema.elements = [
+        getRadioInputField("multiSelect", "Enable multiSelect", ["YES", "No"]),
+        getInputField("size", "Size"),
+        getSelectField("color", "Color"),
+        emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
+    case "Box":
+      uiSchema.elements = [
+        getSelectField("iconName", "Icon Name"),
+        emptyBox$1("BoxEmpty1", { xs: 6, sm: 6, md: 4, lg: 8 })
+      ];
+      break;
     case "Graph":
       uiSchema.elements = [
         getInputField("height", "Height"),
         getInputField("heading", "Heading"),
+        getInputField("subHeader", "Sub Header"),
         getSelectField("graphType", "Graph Type"),
         getInputField("leftLabel", "Left Label"),
+        getInputField("rightLabel", "Right Label"),
+        getRadioInputField("disableLeftLabel", "Disable Left Label", ["YES", "No"]),
         getInputField("bottomLabel", "Bottom Label"),
         emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
-        getInputField("yAxisValue", "Y-AxisValue"),
-        getInputField("xAxisValue", "X-AxisValue"),
+        getRadioInputField("legendDirection", "Legend Direction", ["Row", "Column"]),
+        getInputField("yAxisValue", "Y-Axis Key"),
+        getInputField("xAxisValue", "X-Axis Key"),
+        getSelectField("xAxisType", "X-AxisType"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
-        getArrayControl("legendLabels", "label"),
-        getArrayControl("pieArcColors", "color")
+        getInputField("yAxisTickCount", "Y Axis TickCount"),
+        getInputField("xAxisTickCount", "X Axis TickCount"),
+        getSelectField("xAxisFormatType", "X Axis Format Type"),
+        getInputField("growthRateKey", "Growth Rate Key"),
+        getInputField("tooltipUnit", "Tooltip Unit"),
+        getArrayControlMultiField("legendLabels", "key", "value", "Key", "Label", "Configure Bar Labels"),
+        getArrayControlMultiField("pieArcColors", "key", "value", "Key", "Color", "Configure Bar Colors")
       ];
       break;
     case "WrapperSection":
@@ -7807,8 +8225,12 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("divider", "Divider", ["YES", "No"]),
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
+        getRadioInputField("defaultClosed", "Default Closed", ["YES", "No"]),
         getInputField("rowSpacing", "Row Spacing"),
-        emptyBox$1("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
+        getInputField("columnSpacing", "Column Spacing"),
+        getInputField("spacing", "Spacing"),
+        getInputField("iconUrl", "Icon Url"),
+        emptyBox$1("WrapperSectionEmpty1", { xs: 0, sm: 0, md: 4, lg: 6 }),
         emptyBox$1("WrapperSectionEmpty2")
       ];
       break;
@@ -7817,7 +8239,7 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
         emptyBox$1("TabEmpty"),
-        getArrayControl("sectionLabels", "label")
+        getArrayControlMultiField("sectionLabels", "label", "icon", "Label", "Icon")
       ];
       break;
     case "Table":
@@ -7837,12 +8259,16 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("disablePagination", "Disable Pagination", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
         getMultiSelectField("filteringOptions", "Filtering Options"),
+        getSelectField("maxPageSize", "Max Page Size"),
+        getSelectField("initialDensity", "Initial Toggle Density"),
         buildWrapper("Tree Table Properties", [
           getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
           getRadioInputField("paginateExpandedRows", "Multi Page Expansion", ["YES", "NO"]),
           getRadioInputField("treeStructure", "Flat Tree Structure", ["YES", "NO"]),
-          emptyBox$1("LazyLoadingTableEmpty2"),
+          getRadioInputField("filterFromLeafRows", "Filter from tree rows", ["YES", "NO"]),
+          getInputField("defaultColumnSize", "Default Column Size"),
+          ,
           emptyBox$1("LazyLoadingTableEmpty3")
         ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
@@ -7852,6 +8278,10 @@ const buildPropertiesSection = function(type) {
       break;
     case "Radio":
       uiSchema.elements = [
+        getInputField("errorMessage", "Error Message"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("RadioEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
         getArrayControl("sectionLabels", "label", "Options Of Radio")
       ];
       break;
@@ -7859,14 +8289,40 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        emptyBox$1("SelectEmpty")
+        getSelectField("variant", "Variant"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("SelectEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        emptyBox$1("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
-        emptyBox$1("MultipleSelectEmpty2")
+        getSelectField("variant", "Variant"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position")
+      ];
+      break;
+    case "PdfViewer":
+      uiSchema.elements = [
+        getInputField("scale", "Zoom"),
+        emptyBox$1("PdfViewer", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
+    case "Date":
+      uiSchema.elements = [
+        getSelectField("variant", "Variant"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
+      ];
+      break;
+    case "DateTime":
+      uiSchema.elements = [
+        getSelectField("variant", "Variant"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
       ];
       break;
     case "Thought":
@@ -7874,16 +8330,50 @@ const buildPropertiesSection = function(type) {
         getTextArea("thought", "Today's thought", false)
       ];
       break;
-  }
-  return uiSchema;
-};
-const StyleSection = {
-  type: "WrapperLayout",
-  config: {
-    main: {
-      label: " ",
-      gap: "8px"
-    }
+    case "Image":
+      uiSchema.elements = [
+        getInputField("imageUrl", "Image URL"),
+        getInputField("height", "Image Height"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
+      ];
+      break;
+    case "FileInput":
+      uiSchema.elements = [
+        getRadioInputField("variant", "Variant", ["Outlined", "Standard"]),
+        getRadioInputField("disableUpload", "Disable Upload", ["YES", "NO"]),
+        getRadioInputField("disableDelete", "Disable Delete", ["YES", "NO"]),
+        getRadioInputField("disableDownload", "Disable Download", ["YES", "NO"]),
+        getInputField("description", "Enter description"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        getInputField("chooseButtonLabel", "ChooseButton Label"),
+        getInputField("noFileAvailableMessage", "No Found Message"),
+        getRadioInputField("useLabel", "Use Button", ["YES", "NO"]),
+        getRadioInputField("externalUpload", "External Upload", ["YES", "NO"]),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
+      ];
+      break;
+    case "Camera":
+      uiSchema.elements = [
+        getSelectField("iconName", "Icon Name"),
+        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]),
+        getSelectField("color", "Color"),
+        getInputField("tooltipMessage", "Tooltip Message"),
+        getSelectField("variant", "Variant"),
+        emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
+      ];
+  }
+  return uiSchema;
+};
+const StyleSection = {
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
   },
   elements: [
     {
@@ -7911,13 +8401,13 @@ const StyleSection = {
     }
   ]
 };
-const TableSection = (theme) => {
+const TableSection = (theme, scopeName = "elements") => {
   const uiSchema = {
     type: "HorizontalLayout",
     elements: [
       {
         type: "Control",
-        scope: "#/properties/elements",
+        scope: `#/properties/${scopeName}`,
         options: {
           widget: "Table"
         },
@@ -7928,7 +8418,7 @@ const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/New_Record",
+                    scope: `#/properties/${scopeName}_New_Record`,
                     options: {
                       widget: "IconButton"
                     },
@@ -7955,7 +8445,7 @@ const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/Paste_Component",
+                    scope: scopeName === "elements" ? `#/properties/Paste_Component` : `#/properties/Paste_TabsComponent`,
                     options: {
                       widget: "IconButton"
                     },
@@ -7984,94 +8474,69 @@ const TableSection = (theme) => {
             disableAction: true,
             disableSelection: true,
             enableDrag: true
-          }
-        },
-        elements: [
-          {
-            accessorKey: "name",
-            header: "Name",
-            type: "string",
-            size: 300
           },
-          {
-            accessorKey: "type",
-            header: "Type",
-            type: "string",
-            size: 200
-          },
-          {
-            header: "Edit Record",
-            field: "Reject_Records",
-            size: 150,
-            type: "action",
-            widget: {
+          action: [
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "TableEditIcon",
+                  startIcon: "EditIcon",
                   size: "small",
                   onClick: "editComponents",
-                  tooltipMessage: "Reject This Record"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  tooltipMessage: "Reject This Record",
+                  name: "Edit"
                 }
               }
-            }
-          },
-          {
-            header: "Delete",
-            field: "Reject_Records",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "Bin",
+                  startIcon: "Bin",
                   onClick: "deletePopUpComponent",
-                  tooltipMessage: "Reject This Record"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  tooltipMessage: "Reject This Record",
+                  name: "Delete",
+                  size: "small"
                 }
               }
-            }
-          },
-          {
-            header: "Copy",
-            field: "Copy_Component",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
-              scope: "#/properties/Copy_Component",
+              scope: scopeName === "elements" ? `#/properties/Copy_Component` : `#/properties/Copy_TabsComponent`,
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "FileCopyIcon",
+                  startIcon: "FileCopyIcon",
                   onClick: "copyPasteElement",
-                  styleDefault: true,
-                  disabled: false
+                  styleDefault: false,
+                  name: "Copy"
                 }
               }
             }
+          ]
+        },
+        elements: [
+          {
+            accessorKey: "name",
+            header: "Name",
+            type: "string",
+            size: 300
+          },
+          {
+            accessorKey: "type",
+            header: "Type",
+            type: "string",
+            size: 200
           }
         ]
       }
@@ -8091,9 +8556,6 @@ const ValueTab = {
     {
       type: "Control",
       scope: "#/properties/value",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -8164,51 +8626,61 @@ const ValidationSection = {
     {
       type: "Control",
       scope: "#/properties/validation",
-      layout: 11.5,
-      options: {
-        "elementLabelProp": "validationType",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/validationType",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Type"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/validationValue",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4 }
-              }
+      config: {
+        layout: 12,
+        main: {
+          label: "Validation",
+          childElementLabel: "Validation"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/validationType",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Type"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/validationValue",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     }
   ]
 };
@@ -8231,26 +8703,29 @@ var buildConfig = (FormData) => {
   if (formData.events) {
     delete formData.events;
   }
+  if (formData.tabLabelElements) {
+    component.tabLabelElements = formData.tabLabelElements || [];
+    delete formData.tabLabelElements;
+  }
   component = { ...formData, ...component };
   return component;
 };
-const createLayoutFormat = (config2) => {
-  if (_.isEmpty(config2)) {
-    return {
-      xs: 12,
-      sm: 12,
-      md: 12,
-      lg: 12
-    };
+const createLayoutFormat = (layout, type) => {
+  if (_.isEmpty(layout)) {
+    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout", "Table"];
+    if (fullLayoutComponents.includes(type)) {
+      return { xs: 12, sm: 12, md: 12, lg: 12 };
+    } else if (type === "Graph") {
+      return { xs: 12, sm: 12, md: 12, lg: 6 };
+    } else if (type === "Button") {
+      return { xs: 4, sm: 2.5, md: 2, lg: 1.5 };
+    } else {
+      return { xs: 6, sm: 6, md: 4, lg: 3 };
+    }
   }
-  let data = {
-    xs: 12,
-    sm: 12,
-    md: 6,
-    lg: 6
-  };
-  config2.map((e) => {
-    data[e.key || "xs"] = +e.value || 5.5;
+  let data = {};
+  layout.map((e) => {
+    data[e.key || "xs"] = e.value === null || e.value === void 0 || e.value === "" ? 5.5 : +e.value;
   });
   return data;
 };
@@ -8264,9 +8739,27 @@ const flatObjectValueInArray = (config2 = []) => {
   });
   return data;
 };
+const createKeyValueMap = (config2 = []) => {
+  return config2.reduce((acc, item) => {
+    if (!item.key)
+      return acc;
+    acc[item.key] = item.value;
+    return acc;
+  }, {});
+};
 const clearFromSessionStorage = () => {
   sessionStorage.removeItem("pageFormdata");
 };
+const validateAndShowErrors = (store2) => {
+  if (_.isEmpty(store2.ctx.core.errors))
+    return false;
+  store2.setValidation("ValidateAndShow");
+  store2.setNotify({
+    Fail: true,
+    FailMessage: "Error on Page"
+  });
+  return true;
+};
 const getNavigationHistory = (config2, path) => {
   if (path) {
     let urlRoutes = config2.name;
@@ -8325,11 +8818,13 @@ async function saveHandler(store2, service2, submitHandler) {
       const saveReturn = await submitHandler(store2, service2, config2);
       navigateHandler(store2, true, "/PageMasterRecords");
     } catch (err) {
-      navigateHandler(store2, false);
+      navigateHandler(store2, false, void 0, err.message);
     }
+  } else {
+    navigateHandler(store2, false);
   }
 }
-const navigateHandler = (store2, isSubmitted, pageName) => {
+const navigateHandler = (store2, isSubmitted, pageName, errorMessage) => {
   if (isSubmitted) {
     sessionStorage.removeItem("pageFormdata");
     store2.navigate(pageName || -1);
@@ -8341,7 +8836,7 @@ const navigateHandler = (store2, isSubmitted, pageName) => {
     store2.setValidation("ValidateAndShow");
     store2.setNotify({
       Fail: true,
-      FailMessage: "Errors on Page"
+      FailMessage: errorMessage || "Errors on Page"
     });
   }
 };
@@ -8366,34 +8861,46 @@ function okHandler(store2) {
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style"],
+  WrapperSection: ["Core", "Components", "Properties", "Style"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style"],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style"],
+  ProgressBar: ["Core", "Properties", "Events", "Style"],
+  RankCard: ["Core", "Properties", "Events", "Style"],
+  MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
-  Timer: ["Core", "Events", "Style", "Validation"],
-  Rank: ["Core", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style"],
+  Rank: ["Core", "Events", "Style"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components", "Validation"],
+  ButtonGroup: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  Array: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
-  PopUp: ["Core", "Components", "Properties", "Style"],
+  PopUp: ["Core", "Components", "Properties", "Events", "Style"],
+  PopOver: ["Core", "Components", "Properties", "Style"],
+  PdfViewer: ["Core", "Properties", "Style"],
   Stepper: ["Core", "Components", "Properties", "Events", "Style"],
   DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style"],
+  Date: ["Core", "Properties", "Events", "Style", "Validation"],
+  DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
+  Image: ["Core", "Properties", "Events", "Style"],
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
+  Camera: ["Core", "Properties", "Events", "Style", "Validation"],
+  OTP_Input: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a, _b;
@@ -8406,6 +8913,7 @@ function refreshPage(type, store2) {
       Style: StyleSection,
       Events: EventSection(store2.theme.myTheme),
       Components: TableSection(store2.theme.myTheme),
+      TabTitles: TableSection(store2.theme.myTheme, "tabLabelElements"),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     };
@@ -8417,7 +8925,7 @@ function refreshPage(type, store2) {
   const lastDotIndex = path.lastIndexOf(".");
   const parentPath = path.slice(0, lastDotIndex);
   const parentObj = _.get(currentConfig, parentPath);
-  if ((parentObj == null ? void 0 : parentObj.type) === "Table") {
+  if ((parentObj == null ? void 0 : parentObj.type) === "Table" || (parentObj == null ? void 0 : parentObj.type) === "ColumnGroup") {
     UiSchema.elements[0].elements[0].elements[4] = {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -8496,6 +9004,44 @@ function refreshPage(type, store2) {
         }
       }
     };
+    UiSchema.elements[0].elements[0].elements[10] = {
+      type: "Control",
+      scope: "#/properties/dateFormat",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Date Time Format"
+        }
+      }
+    };
+    UiSchema.elements[0].elements[0].elements[11] = {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout: { xs: 0, sm: 0, md: 0, lg: 6 }
+      }
+    };
+  }
+  if ((parentObj == null ? void 0 : parentObj.type) === "LeaderBoard") {
+    UiSchema.elements[0].elements[0].elements[4] = {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format"
+        }
+      }
+    };
   }
   if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
@@ -8558,13 +9104,19 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     editComponents: function() {
       var _a, _b, _c;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
       if (path) {
-        const path2 = (_c = store2.searchParams) == null ? void 0 : _c.get("path");
-        const finalPath = `${path2}.elements[${rowId}]`;
+        let finalPath = `${path}`;
+        if ((_c = dynamicData2 == null ? void 0 : dynamicData2.path) == null ? void 0 : _c.startsWith("tabLabel")) {
+          finalPath = `${finalPath}.tabLabelElements[${rowId}]`;
+        } else {
+          finalPath = `${finalPath}.elements[${rowId}]`;
+        }
         store2.searchParams.set("path", finalPath);
         store2.setSearchParams(store2.searchParams);
         this.setPage();
@@ -8576,7 +9128,12 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = sessionStorage.getItem("rowId");
-      store2.formData.elements.splice(rowId, 1);
+      const isTabLabelElements = sessionStorage.getItem("isTabLabelElements") === "true";
+      if (isTabLabelElements) {
+        store2.formData.tabLabelElements.splice(rowId, 1);
+      } else {
+        store2.formData.elements.splice(rowId, 1);
+      }
       const response = saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const data = path ? _.get(response, path) : response;
       store2.setFormdata(data);
@@ -8584,6 +9141,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.updateDialog("popUpComponentSection");
       }
       sessionStorage.removeItem("rowId");
+      sessionStorage.removeItem("isTabLabelElements");
     },
     deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
@@ -8599,18 +9157,30 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     widgetAddClickHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
+      if (!Array.isArray(store2.formData.tabLabelElements)) {
+        store2.formData.tabLabelElements = [];
+      }
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
-      const finalPath = `${path}.elements[${store2.formData.elements.length}]`;
+      let finalPath = `${path}`;
+      if (dynamicData2.path.startsWith("tabLabel")) {
+        finalPath = `${finalPath}.tabLabelElements[${store2.formData.tabLabelElements.length}]`;
+      } else {
+        finalPath = `${finalPath}.elements[${store2.formData.elements.length}]`;
+      }
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
     eventEditHandler: function() {
       var _a, _b;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
@@ -8620,6 +9190,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventAddHandler: function() {
       var _a, _b;
+      if (validateAndShowErrors(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       if (!Array.isArray(store2.formData.events)) {
@@ -8635,6 +9207,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     deletePopUpComponent: function() {
       const rowId = dynamicData2.path.split(".")[1];
       sessionStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("isTabLabelElements", dynamicData2.path.startsWith("tabLabel") ? "true" : "false");
       store2.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function() {
@@ -8681,9 +9254,17 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
+      if (!Array.isArray(store2.formData.tabLabelElements)) {
+        store2.formData.tabLabelElements = [];
+      }
       saveFormdataInSessionStorage(store2.ctx.core.data, pastedElementParentPath);
       const formData = getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
+      const currentLength = {
+        "TabsComponent": formData.tabLabelElements.length,
+        "Component": formData.elements.length,
+        "Events": formData.events.length
+      };
+      const insertElementIndex = currentLength[elementType] || 0;
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
       const notificationMessages = {
@@ -8718,6 +9299,9 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       if (elementType === "Component") {
         return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
       }
+      if (elementType === "TabsComponent") {
+        return `${parentPath}.tabLabelElements[${rowId}]`;
+      }
       return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
     ElementPathSetter: function(uiSchema, copiedFormData) {
@@ -8771,7 +9355,7 @@ var pageMaster = (funcParams) => {
         return formData;
       }
       saveFormdataInSessionStorage(config2);
-      return config2;
+      return { ...config2, type: "page" };
     },
     getUiSchema: function() {
       const UiSchema = _.cloneDeep(PageMasterUiSchema(store2.theme.myTheme));
@@ -8793,6 +9377,8 @@ var pageMaster = (funcParams) => {
     },
     onAddClickHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
@@ -8816,6 +9402,8 @@ var pageMaster = (funcParams) => {
     },
     eventAddHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -8826,6 +9414,8 @@ var pageMaster = (funcParams) => {
     },
     editEvent: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data);
@@ -8906,11 +9496,16 @@ const EventSchema = {
         { title: "Start", const: "onStart" },
         { title: "Cell Render", const: "onCellRenderer" },
         { title: "Upload", const: "onUpload" },
+        { title: "FileDelete", const: "onFileDelete" },
+        { title: "Download", const: "onDownload" },
         { title: "Back", const: "onBack" },
         { title: "Next", const: "onNext" },
         { title: "Row Movement", const: "onRowMovement" },
         { title: "Download", const: "onDownload" },
-        { title: "Fail", const: "Fail" }
+        { title: "Fail", const: "Fail" },
+        { title: "onClose", const: "onClose" },
+        { title: "Key Down", const: "onKeyDown" },
+        { title: "Set Style", const: "setStyle" }
       ]
     },
     Handler: {
@@ -8927,7 +9522,7 @@ const EventSchema = {
       oneOf: [
         { title: "RankProvider", const: "RankProvider" },
         { title: "Download File", const: "downloadFile" },
-        { title: "Download", const: "download" }
+        { title: "downloadFileFromUrl", const: "downloadFileFromUrl" }
       ]
     },
     body: {
@@ -9086,93 +9681,70 @@ const EventUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "eventType",
-                header: "Event's Type",
-                size: 300,
-                type: "string"
-              },
-              {
-                accessorKey: "Handler",
-                header: "Handler",
-                size: 200,
-                type: "string"
               },
-              {
-                accessorKey: "Edit_Approve_Records",
-                header: "Edit",
-                type: "action",
-                size: 150,
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
                       size: "small",
-                      icon: "TableEditIcon",
+                      startIcon: "EditIcon",
                       tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "editEvent",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                accessorKey: "Reject_Records",
-                header: "Delete",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      startIcon: "Bin",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deletePopUpEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "deletePopUpEvent",
+                      name: "Delete",
+                      size: "small"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Event",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: false,
+                      name: "Copy",
+                      size: "small"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "Handler",
+                header: "Handler",
+                size: 200,
+                type: "string"
               }
             ]
           }
@@ -9485,9 +10057,6 @@ const APISection = {
     {
       type: "Control",
       scope: "#/properties/headers",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -9547,9 +10116,6 @@ const APISection = {
     {
       type: "Control",
       scope: "#/properties/body",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -9615,9 +10181,6 @@ const refreshSectionUiSchema = {
     {
       type: "Control",
       scope: "#/properties/refreshElements",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -9834,6 +10397,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     addEvent: function() {
       var _a, _b, _c;
+      if (validateAndShowErrors(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -9846,6 +10411,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     editEvent: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
@@ -9896,22 +10463,33 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     }
   };
 };
-const downloadFile$1 = (obj) => {
-  const typeArr = obj.name.split(".");
-  const data = obj.data;
-  const finalData = window.atob(data);
-  let file;
-  file = new File([finalData], typeArr[typeArr.length - 1]);
-  const url = URL.createObjectURL(file);
-  const link = document.createElement("a");
-  link.href = typeArr[typeArr.length - 1] === "pdf" ? "data:application/octet-stream;base64," + data : url;
-  link.download = `${obj.name}`;
-  document.body.appendChild(link);
-  link.click();
+function downloadFile$1({ data, name }) {
+  var _a;
+  const binary = window.atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  const extension = (_a = name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+  const mimeMap = {
+    pdf: "application/pdf",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    csv: "text/csv"
+  };
+  const blob = new Blob([bytes], {
+    type: mimeMap[extension] || "application/octet-stream"
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
   URL.revokeObjectURL(url);
-  document.body.removeChild(link);
-};
-const doDownload = (response, service2) => {
+}
+const downloadFileFromUrl = (response, service2) => {
   let url = `${service2.defaults.baseURL}/${response.path}`;
   if (response == null ? void 0 : response.params) {
     const keysArray = Object.keys(response == null ? void 0 : response.params);
@@ -9990,7 +10568,6 @@ function executeEventsHandler(params2) {
       params2.componentName,
       params2.config,
       params2.store,
-      params2.service,
       params2.formDataHolder
     );
   } else if (params2.config.Handler === "onBackHandler") {
@@ -10062,7 +10639,7 @@ function executeCustomHandler(params) {
     return response;
   }
 }
-function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder) {
+function mergeFormdata(handlerResponse, componentName, eventConfig, store2, formDataHolder) {
   var _a, _b, _c;
   if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
     if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
@@ -10100,29 +10677,23 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
       });
     }
   } else if (eventConfig.type === "page") {
-    if (!(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
+    if (!(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data) && lodash.exports.isObject(handlerResponse.data))) {
       store2.newData = {
         ...store2.newData,
         ...handlerResponse == null ? void 0 : handlerResponse.data
       };
-      store2.setFormdata((pre) => {
-        return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
+      Object.keys(handlerResponse.data).forEach((e) => {
+        formDataHolder[e] = handlerResponse.data[e];
       });
     }
   } else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
     if (handlerResponse && (handlerResponse == null ? void 0 : handlerResponse.data)) {
       formDataHolder[componentName] = (_a = handlerResponse.data) == null ? void 0 : _a.data;
       formDataHolder[`${componentName}_RowCount`] = (_c = (_b = handlerResponse.data) == null ? void 0 : _b.meta) == null ? void 0 : _c.totalRowCount;
-      store2.setFormdata((pre) => {
-        return { ...pre, ...formDataHolder };
-      });
     }
   } else {
-    if (handlerResponse) {
+    if (handlerResponse == null ? void 0 : handlerResponse.data) {
       formDataHolder[componentName] = handlerResponse.data;
-      store2.setFormdata((pre) => {
-        return { ...pre, ...formDataHolder };
-      });
     }
   }
 }
@@ -10260,16 +10831,16 @@ var service = (funcParams) => {
     dynamicData: funcParams.dynamicData,
     userValue: funcParams.userValue,
     service: funcParams.service,
-    serviceHolder: { downloadFile: downloadFile$1, download: doDownload, ...funcParams.functionsProvider },
+    serviceHolder: { downloadFile: downloadFile$1, download: downloadFileFromUrl, ...funcParams.functionsProvider },
     eventGroups,
     functionsProvider: funcParams.functionsProvider,
     formDataHolder
   };
   return {
     setPage: async function() {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c;
       funcParams.store.setAdditionalErrors([]);
-      funcParams.store.setFormdata({});
+      funcParams.store.setFormdata((funcParams == null ? void 0 : funcParams.initFormData()) || {});
       funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
       eventGroups = {};
@@ -10277,119 +10848,12 @@ var service = (funcParams) => {
       const config2 = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
       const event2 = new CustomEvent("pageNameChanged", {
-        detail: { pageName: config2.label }
+        detail: { pageName: config2.label, pageIconUrl: config2.pageIconUrl, hasBackIcon: config2.hasBackIcon === "NO" ? false : true }
       });
       window.dispatchEvent(event2);
-      const theme = (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
-      uiSchema.elements.push(
-        {
-          type: "HorizontalLayout",
-          config: {
-            main: {
-              direction: "row"
-            },
-            style: {
-              flexDirection: "row",
-              position: "absolute",
-              bottom: 0,
-              height: "fit-content",
-              overflow: "hidden",
-              zIndex: 1e3,
-              width: "inherit"
-            }
-          },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/FooterText",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                main: {
-                  heading: "Copywriter@ACT21.IO"
-                },
-                style: {
-                  color: ((_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.text) == null ? void 0 : _d.disabled) || "#AFAFAF",
-                  fontSize: "11px",
-                  textAlign: "center",
-                  lineHeight: 2,
-                  width: "fit-content",
-                  left: "50%",
-                  position: "relative",
-                  margin: 0,
-                  flexGrow: 1,
-                  height: 0,
-                  transform: "translate(-50%, 0%)"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackIcon",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                main: {
-                  iconName: "PrevIcon",
-                  onClick: "backHandler",
-                  width: "fit-content"
-                },
-                style: {
-                  fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.main,
-                  width: 20,
-                  height: 0,
-                  top: 0,
-                  right: { xs: "12px", sm: "84px" },
-                  position: "absolute",
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  ":hover": {
-                    fill: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.dark
-                  },
-                  marginRight: "20px"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackHandlerText",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                main: {
-                  heading: "Previous Page",
-                  onClick: "backHandler"
-                },
-                style: {
-                  display: { xs: "none", sm: "flex" },
-                  textAlign: "left",
-                  lineHeight: 1,
-                  height: 0,
-                  width: "fit-content",
-                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main,
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  marginLeft: "2px",
-                  top: 3,
-                  right: "12px",
-                  position: "absolute",
-                  ":hover": {
-                    color: (_l = (_k = theme == null ? void 0 : theme.palette) == null ? void 0 : _k.primary) == null ? void 0 : _l.dark
-                  },
-                  marginRight: "4px"
-                }
-              }
-            }
-          ]
-        }
-      );
-      const schema2 = (_m = pageData == null ? void 0 : pageData.schema) != null ? _m : { type: "object", properties: {} };
-      const newEventGroups = extractEvents(config2);
-      console.log("newEventGroups", newEventGroups, eventGroups);
-      eventGroups = newEventGroups;
+      (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
+      const schema2 = (_c = pageData == null ? void 0 : pageData.schema) != null ? _c : { type: "object", properties: {} };
+      eventGroups = extractEvents(config2);
       executeEventsParameters = {
         config: {},
         componentName: "",
@@ -10399,20 +10863,9 @@ var service = (funcParams) => {
         service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
         serviceHolder: this,
-        eventGroups: newEventGroups,
+        eventGroups,
         formDataHolder
       };
-      await executeRefreshHandler({
-        config: {},
-        componentName: "",
-        store: funcParams.store,
-        dynamicData: funcParams.dynamicData,
-        userValue: funcParams.userValue,
-        service: funcParams.service,
-        serviceHolder: this,
-        eventGroups: newEventGroups,
-        formDataHolder: {}
-      });
       funcParams.store.setSchema(
         (pre) => {
           return {
@@ -10422,29 +10875,73 @@ var service = (funcParams) => {
           };
         }
       );
-      uiSchema.elements.push(notifyUiSchema);
-      funcParams.store.setUiSchema(uiSchema);
+      executeRefreshHandler({
+        config: {},
+        componentName: "",
+        store: funcParams.store,
+        dynamicData: funcParams.dynamicData,
+        userValue: funcParams.userValue,
+        service: funcParams.service,
+        serviceHolder: this,
+        eventGroups,
+        formDataHolder
+      }).then((e) => {
+        funcParams.store.setFormdata((pre) => ({ ...pre, ...formDataHolder }));
+        uiSchema.elements.push(notifyUiSchema);
+        funcParams.store.setUiSchema(uiSchema);
+      });
     },
-    onCellRenderer: (cellParams) => {
+    getStyle: () => {
       var _a, _b, _c, _d;
-      if (eventGroups.onCellRenderer) {
+      const cloneEventGroup = _.cloneDeep(eventGroups);
+      if (cloneEventGroup.setStyle) {
+        let finalResponse = {};
+        const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || ((_b = funcParams == null ? void 0 : funcParams.dynamicData.path) == null ? void 0 : _b.split(".").pop());
+        if ((_c = cloneEventGroup == null ? void 0 : cloneEventGroup.setStyle) == null ? void 0 : _c[path]) {
+          for (const eventConfig of (_d = cloneEventGroup == null ? void 0 : cloneEventGroup.setStyle) == null ? void 0 : _d[path]) {
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            });
+          }
+          return finalResponse;
+        }
+      }
+      return {};
+    },
+    onCellRenderer: (cellParams) => {
+      var _a, _b, _c, _d, _e;
+      const cloneEventGroup = _.cloneDeep(eventGroups);
+      if (cloneEventGroup.onCellRenderer) {
         let finalResponse = {};
         const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || ((_c = (_b = funcParams == null ? void 0 : funcParams.dynamicData) == null ? void 0 : _b.path) == null ? void 0 : _c.split(".")[0]);
-        for (const eventConfig of (_d = eventGroups == null ? void 0 : eventGroups.onCellRenderer) == null ? void 0 : _d[path]) {
-          executeEventsParameters.store.functionParameters = cellParams;
-          finalResponse = executeEvents({
-            ...executeEventsParameters,
-            config: eventConfig,
-            componentName: path
-          });
+        if ((_d = cloneEventGroup == null ? void 0 : cloneEventGroup.onCellRenderer) == null ? void 0 : _d[path]) {
+          for (const eventConfig of (_e = cloneEventGroup == null ? void 0 : cloneEventGroup.onCellRenderer) == null ? void 0 : _e[path]) {
+            executeEventsParameters.store.functionParameters = cellParams;
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            });
+          }
+          return finalResponse;
         }
-        return finalResponse;
       }
       return {};
     },
     onClick: function() {
       this.callHandler("onClick");
     },
+    onKeyDown: function() {
+      this.callHandler("onKeyDown");
+    },
+    onFileDelete: async function() {
+      this.callHandler("onFileDelete");
+    },
+    onClose: function() {
+      this.callHandler("onClose");
+    },
     onMount: function() {
       this.callHandler("onMount");
     },
@@ -10468,13 +10965,14 @@ var service = (funcParams) => {
       return response == null ? void 0 : response.data;
     },
     onPaginationChange: async function(paginationValues) {
-      var _a;
+      var _a, _b;
       const apiBody = [
         { key: "size", value: paginationValues.pagination.pageSize },
         { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.tableColumnConfig || [] },
-        { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" }
+        { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" },
+        { key: "expandedRowIds", value: (_b = paginationValues.expandedRowIds) != null ? _b : [] }
       ];
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response == null ? void 0 : response.data;
@@ -10489,27 +10987,40 @@ var service = (funcParams) => {
         return response == null ? void 0 : response.data;
       }
     },
-    onChange: async function() {
-      if (eventGroups.onChange) {
-        const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
-        Promise.all(ChangeEventsKeysArray.map(async (componentName) => {
-          var _a, _b;
-          if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) !== funcParams.store.newData[componentName] && ((_b = funcParams.store) == null ? void 0 : _b.newData[componentName]) !== void 0) {
-            for (const eventConfig of eventGroups.onChange[componentName]) {
-              await executeEvents({
-                ...executeEventsParameters,
-                config: eventConfig,
-                componentName
-              });
+    onChange: function() {
+      if (!eventGroups.onChange)
+        return;
+      const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
+      const promises = ChangeEventsKeysArray.flatMap((componentName) => {
+        var _a;
+        if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) === funcParams.store.newData[componentName]) {
+          return [];
+        }
+        return eventGroups.onChange[componentName].map(
+          (eventConfig) => Promise.resolve(
+            executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName,
+              formDataHolder
+            })
+          ).then(() => {
+            if (!lodash.exports.isEmpty(formDataHolder)) {
+              funcParams.store.setFormdata((pre) => ({
+                ...pre,
+                ...formDataHolder
+              }));
             }
-          }
-        }));
-      }
+          })
+        );
+      });
+      Promise.allSettled(promises);
     },
     callExecuteEvents: async function(paramValue, apiBody, eventType) {
       var _a, _b;
       let LastCallResponse = void 0;
-      for (const eventConfig of (_a = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _a[paramValue.path]) {
+      const cloneEventGroup = _.cloneDeep(eventGroups);
+      for (const eventConfig of (_a = cloneEventGroup == null ? void 0 : cloneEventGroup[eventType]) == null ? void 0 : _a[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -10533,7 +11044,7 @@ var service = (funcParams) => {
     onBack: async function(functionParameters) {
       var _a, _b;
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onBack", functionParameters);
+      this.callHandler("onBack", functionParameters);
       if (((_b = eventGroups == null ? void 0 : eventGroups["onBack"]) == null ? void 0 : _b[path]) === void 0) {
         functionParameters == null ? void 0 : functionParameters.handleBack();
       }
@@ -10541,7 +11052,7 @@ var service = (funcParams) => {
     onNext: async function(functionParameters) {
       var _a, _b;
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onNext", functionParameters);
+      this.callHandler("onNext", functionParameters);
       if (((_b = eventGroups == null ? void 0 : eventGroups["onNext"]) == null ? void 0 : _b[path]) === void 0) {
         functionParameters == null ? void 0 : functionParameters.handleNext();
       }
@@ -10549,27 +11060,38 @@ var service = (funcParams) => {
     onReset: async function(functionParameters) {
       var _a, _b;
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onReset", functionParameters);
+      this.callHandler("onReset", functionParameters);
       if (((_b = eventGroups == null ? void 0 : eventGroups["onReset"]) == null ? void 0 : _b[path]) === void 0) {
         functionParameters == null ? void 0 : functionParameters.handleReset();
       }
     },
-    callHandler: async function(eventType, functionParameters) {
-      var _a, _b, _c;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      if (((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) !== void 0) {
-        Promise.all((_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path].map((eventConfig) => {
-          executeEventsParameters.store.functionParameters = functionParameters;
+    callHandler: function(eventType, functionParameters) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".").pop();
+      if (!((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]))
+        return;
+      const promises = eventGroups[eventType][path].map((eventConfig) => {
+        executeEventsParameters.store.functionParameters = functionParameters;
+        return Promise.resolve(
           executeEvents({
             ...executeEventsParameters,
             config: eventConfig,
-            componentName: path
-          });
-        }));
-      }
+            componentName: path,
+            formDataHolder
+          })
+        ).then(() => {
+          if (!lodash.exports.isEmpty(formDataHolder)) {
+            funcParams.store.setFormdata((pre) => ({
+              ...pre,
+              ...formDataHolder
+            }));
+          }
+        });
+      });
+      Promise.allSettled(promises);
     },
     downloadFile: downloadFile$1,
-    download: doDownload,
+    downloadFileFromUrl,
     ...funcParams.functionsProvider
   };
 };
@@ -10618,8 +11140,11 @@ const buildLeaderBoard = (config2) => {
   if (config2.scoreKey) {
     LeaderBoard.config.main.scoreKey = config2.scoreKey;
   }
+  if (config2.isScoreAmount) {
+    LeaderBoard.config.main.isScoreAmount = config2.isScoreAmount === "YES" ? true : false;
+  }
   if (config2.layout) {
-    LeaderBoard.config.layout = createLayoutFormat(config2.layout);
+    LeaderBoard.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
     LeaderBoard.config.style = JSON.parse(config2.style);
@@ -10668,6 +11193,15 @@ const buildProgressBar = (config2, componentScope2) => {
     ProgressBar.config.layout = config2.layout;
   }
   ProgressBar.config.main.heading = config2.label;
+  if (config2.variant) {
+    ProgressBar.config.main.variant = config2.variant;
+  }
+  if (config2.pieArcColors) {
+    ProgressBar.config.main.colorRange = flatObjectValueInArray(config2.pieArcColors);
+  }
+  if (config2.size) {
+    ProgressBar.config.main.size = Number(config2.size);
+  }
   if (config2.bottomLabel_3) {
     ProgressBar.config.main.bottomLabel_3 = config2.bottomLabel_3;
   }
@@ -10694,7 +11228,7 @@ const BarGraph = {
       type: "BarGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const PieGraph = {
@@ -10709,7 +11243,7 @@ const PieGraph = {
       type: "PieGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, pieStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const LineGraph = {
@@ -10724,7 +11258,7 @@ const LineGraph = {
       type: "LineGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, lineStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const HorizontalBarGraph = {
@@ -10739,14 +11273,44 @@ const HorizontalBarGraph = {
       type: "HorizontalBarGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
+  }
+};
+const AreaBarGraph = {
+  type: "Control",
+  scope: "#/properties/graph",
+  options: {
+    widget: "Graph"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 12 },
+    main: {
+      type: "AreaGraph",
+      legendLabels: null
+    },
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
+  }
+};
+const StackBarLineG = {
+  type: "Control",
+  scope: "#/properties/graph",
+  options: {
+    widget: "Graph"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 12 },
+    main: {
+      type: "StackBarLineGraph",
+      legendLabels: null
+    },
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const buildHorizontalBarGraph = (config2, componentScope2) => {
   const horizontalBarGraph = _.cloneDeep(HorizontalBarGraph);
   horizontalBarGraph.scope = componentScope2;
   if (config2.layout) {
-    horizontalBarGraph.config.layout = createLayoutFormat(config2.layout);
+    horizontalBarGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   horizontalBarGraph.config.main.type = config2.graphType;
   horizontalBarGraph.scope = componentScope2;
@@ -10758,10 +11322,13 @@ const buildHorizontalBarGraph = (config2, componentScope2) => {
     horizontalBarGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
   if (config2.legendLabels) {
-    horizontalBarGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    horizontalBarGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
+  }
+  if (config2.legendDirection) {
+    horizontalBarGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
   }
   if (config2.pieArcColors) {
-    horizontalBarGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    horizontalBarGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   if (config2.xAxisValue) {
     horizontalBarGraph.config.main.xAxisValue = config2.xAxisValue;
@@ -10780,6 +11347,9 @@ const buildHorizontalBarGraph = (config2, componentScope2) => {
   if (config2.leftLabel) {
     horizontalBarGraph.config.main.leftLabel = config2.leftLabel;
   }
+  if (config2.disableLeftLabel) {
+    horizontalBarGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
   return horizontalBarGraph;
 };
 var SpeedoMeter = {
@@ -10878,7 +11448,7 @@ const buildSpeedoMeter = (config2, componentScope2) => {
 const buildPieGraph = (config2, componentScope2) => {
   const pieGraph = _.cloneDeep(PieGraph);
   if (config2.layout) {
-    pieGraph.config.layout = createLayoutFormat(config2.layout);
+    pieGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.height) {
     pieGraph.config.style.containerStyle.height = config2.height;
@@ -10886,16 +11456,19 @@ const buildPieGraph = (config2, componentScope2) => {
   if (config2.legendHide) {
     pieGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
+  if (config2.legendDirection) {
+    pieGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
   pieGraph.scope = componentScope2;
   pieGraph.config.main.header = config2.heading;
   if (config2.legendLabels) {
-    pieGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    pieGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.xAxisValue) {
     pieGraph.config.main.xAxisValue = config2.xAxisValue;
   }
   if (config2.pieArcColors) {
-    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    pieGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   return pieGraph;
 };
@@ -10903,22 +11476,25 @@ const buildStackbarGraph = (config2, componentScope2) => {
   var _a;
   const barGraph = _.cloneDeep(BarGraph);
   if (config2.layout) {
-    barGraph.config.layout = createLayoutFormat(config2.layout);
+    barGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.legendHide) {
     barGraph.config.main.legendAvailable = config2.legendHide;
     barGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
+  if (config2.legendDirection) {
+    barGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
   if (config2.bottomAxisAngle) {
     barGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
   barGraph.config.main.type = (_a = config2 == null ? void 0 : config2.graphType) != null ? _a : "BarGraph";
   barGraph.config.main.header = config2.heading;
   if (config2.legendLabels) {
-    barGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    barGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.pieArcColors) {
-    barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    barGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   if (config2.xAxisValue) {
     barGraph.config.main.xAxisValue = config2.xAxisValue;
@@ -10937,6 +11513,9 @@ const buildStackbarGraph = (config2, componentScope2) => {
   if (config2.leftLabel) {
     barGraph.config.main.leftLabel = config2.leftLabel;
   }
+  if (config2.disableLeftLabel) {
+    barGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
   barGraph.scope = componentScope2;
   return barGraph;
 };
@@ -10981,6 +11560,10 @@ const buildTabSection = (config2, componentScope2) => {
   }
   if (config2.sectionLabels) {
     tab.config.main.tabLabels = config2.sectionLabels.map((e) => e.label);
+    tab.config.main.tabIcons = config2.sectionLabels.map((e) => e.icon);
+  }
+  if (config2.style) {
+    tab.config.style = JSON.parse(config2.style);
   }
   tab.config.main.id = config2.name;
   return tab;
@@ -10988,10 +11571,13 @@ const buildTabSection = (config2, componentScope2) => {
 var WrapperSection = {
   type: "WrapperLayout",
   config: {
+    layout: 12,
     main: {
-      rowSpacing: 3,
       divider: true,
-      label: "Default Label"
+      label: "Default Label",
+      rowSpacing: 2,
+      columnSpacing: 2,
+      spacing: 2
     },
     defaultStyle: true
   },
@@ -11003,6 +11589,11 @@ const buildWrapperSection = (config2, componentScope2) => {
   wrapper.config.main.label = config2.label;
   wrapper.config.main.divider = config2.divider === "YES" ? true : false;
   wrapper.config.main.isAccordion = config2.isAccordion === "No" ? false : true;
+  wrapper.config.main.defaultClosed = config2.defaultClosed === "YES" ? true : false;
+  wrapper.config.main.icon = config2.iconUrl;
+  wrapper.config.main.rowSpacing = Number(config2.rowSpacing);
+  wrapper.config.main.columnSpacing = Number(config2.columnSpacing);
+  wrapper.config.main.spacing = Number(config2.spacing);
   if (config2.defaultStyle) {
     wrapper.config.defaultStyle = config2.defaultStyle === "YES" ? true : false;
   }
@@ -11010,7 +11601,7 @@ const buildWrapperSection = (config2, componentScope2) => {
     wrapper.config.style = JSON.parse(config2.style);
   }
   if (config2.layout) {
-    wrapper.config.layout = createLayoutFormat(config2.layout);
+    wrapper.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   return wrapper;
 };
@@ -11021,7 +11612,7 @@ var TextInputField = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: ""
     },
@@ -11037,15 +11628,30 @@ const buildTextField = (config2, componentScope2) => {
   if (config2.multiline) {
     inputField.config.main.multiline = config2.multiline === "YES" ? true : false;
   }
+  if (config2.keyName) {
+    inputField.config.main.keyName = config2.keyName;
+  }
   if (config2.InputFormatingAndMasking) {
     inputField.config.main.formatStrArray = config2.InputFormatingAndMasking.map((e) => e.formatElement);
   }
   if (config2.placeholder) {
     inputField.config.main.placeholder = config2.placeholder;
   }
+  if (config2.variant) {
+    inputField.config.main.variant = config2.variant;
+  }
   if (config2.layout) {
     inputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.toolTip) {
+    inputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    inputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.iconName) {
+    inputField.config.main.startIcon = config2.iconName;
+  }
   inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   inputField.scope = componentScope2;
   return inputField;
@@ -11057,12 +11663,13 @@ var SelectInputField = {
     widget: "SelectInputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",
       freeSole: false
-    }
+    },
+    style: {}
   }
 };
 const buildSelect = (config2, componentScope2) => {
@@ -11077,9 +11684,21 @@ const buildSelect = (config2, componentScope2) => {
   if (config2.lazyLoading) {
     selectInputField.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
+  if (config2.variant) {
+    selectInputField.config.main.variant = config2.variant;
+  }
   if (config2.layout) {
     selectInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.toolTip) {
+    selectInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    selectInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    selectInputField.config.style = JSON.parse(config2.style);
+  }
   selectInputField.scope = componentScope2;
   return selectInputField;
 };
@@ -11090,7 +11709,7 @@ var Button = {
     widget: "Button"
   },
   config: {
-    layout: 3,
+    layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
     main: {
       name: "Compare",
       variant: "contained",
@@ -11111,7 +11730,7 @@ const buildButton = (config2, componentScope2) => {
     config2.buttonType === "ButtonWithIconAndText" ? button.config.main.startIcon = config2.iconName : button.config.main.icon = config2.iconName;
   }
   if (config2.layout) {
-    button.config.layout = createLayoutFormat(config2.layout);
+    button.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.tooltipMessage) {
     button.config.main.tooltipMessage = config2.tooltipMessage;
@@ -11146,6 +11765,7 @@ var Table = {
   },
   elements: [],
   config: {
+    layout: 12,
     main: {
       onMount: "onMount",
       enableExpandAll: true,
@@ -11168,6 +11788,9 @@ const buildTable = (config2, componentScope2) => {
   if (config2.lazyLoading) {
     table.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
+  if (config2.defaultColumnSize) {
+    table.config.main.defaultColumnSize = config2.defaultColumnSize;
+  }
   if (config2.enableRowMovement) {
     table.config.main.enableRowMovement = config2.enableRowMovement === "YES" ? true : false;
   }
@@ -11177,6 +11800,9 @@ const buildTable = (config2, componentScope2) => {
   if (config2.enableExpandAll) {
     table.config.main.enableExpandAll = config2.enableExpandAll === "YES" ? true : false;
   }
+  if (config2.filterFromLeafRows) {
+    table.config.main.filterFromLeafRows = config2.filterFromLeafRows === "YES" ? true : false;
+  }
   if (config2.paginateExpandedRows) {
     table.config.main.paginateExpandedRows = config2.paginateExpandedRows === "YES" ? true : false;
   }
@@ -11225,6 +11851,15 @@ const buildTable = (config2, componentScope2) => {
   if (config2.selectKey) {
     table.config.main.selectKey = config2.selectKey;
   }
+  if (config2.maxPageSize) {
+    table.config.main.maxPageSize = config2.maxPageSize;
+  }
+  if (config2.initialDensity) {
+    table.config.main.initialDensity = config2.initialDensity;
+  }
+  if (config2.layout) {
+    table.config.layout = createLayoutFormat(config2.layout);
+  }
   return table;
 };
 const Box = {
@@ -11234,8 +11869,11 @@ const Box = {
     widget: "Box"
   },
   config: {
-    layout: 12,
-    main: {},
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+    main: {
+      iconName: "",
+      onClick: "onClick"
+    },
     style: {}
   }
 };
@@ -11246,6 +11884,9 @@ const buildLabel = (config2, componentScope2) => {
   if (config2.layout) {
     box.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.iconName) {
+    box.config.main.iconName = config2.iconName;
+  }
   if (config2.style) {
     box.config.style = JSON.parse(config2.style);
   }
@@ -11264,7 +11905,7 @@ const uploadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 }
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 }
   },
   "options": {
     "widget": "UploadFile"
@@ -11281,7 +11922,7 @@ const downloadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 }
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 }
   },
   "options": {
     "widget": "DownloadFile"
@@ -11300,12 +11941,19 @@ const buildUploadFile = (config2, componentScope2) => {
   if (config2.required) {
     UploadFile.config.main.required = true;
   }
+  if (config2.toolTip) {
+    UploadFile.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    UploadFile.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   UploadFile.config.main.errorMessage = config2.errorMessage;
   return UploadFile;
 };
 const buildDownloadFile = (config2, componentScope2) => {
   const DownloadFile = _.cloneDeep(downloadFile);
   DownloadFile.scope = componentScope2;
+  DownloadFile.config.main.label = config2.label;
   if (config2.layout) {
     DownloadFile.config.layout = config2.layout;
   }
@@ -11321,6 +11969,12 @@ const buildDownloadFile = (config2, componentScope2) => {
   if (config2.errorMessage) {
     DownloadFile.config.main.errorMessage = config2.errorMessage;
   }
+  if (config2.toolTip) {
+    DownloadFile.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    DownloadFile.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   return DownloadFile;
 };
 function Card(theme) {
@@ -11328,192 +11982,159 @@ function Card(theme) {
     type: "WrapperLayout",
     config: {
       main: {},
-      wrapperStyle: {
-        position: "relative",
-        top: "50%",
-        transform: "translateY(-50%)",
-        marginBottom: 0
-      },
-      componentsBoxStyle: {
-        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-        flexDirection: "row",
-        flexWrap: "nowrap",
-        width: "100% !important",
-        background: "transparent",
-        border: `1.5px solid ${theme.palette.primary.light}`,
-        borderRadius: "8px",
-        padding: "0px 4px",
-        height: "100%",
-        alignItems: "center",
-        marginLeft: "0px",
-        "&: hover": {
-          background: `${theme.palette.primary.main}`,
-          border: `1.5px solid black`,
-          "& p": {
-            color: "white"
+      style: {
+        wrapperStyle: {
+          position: "relative",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginBottom: 0,
+          borderRadius: "12px",
+          fontFamily: "poppins"
+        },
+        componentsBoxStyle: {
+          boxShadow: "0 0 6px 1px rgba(149, 147, 147, 0.25)",
+          flexDirection: "column",
+          overflow: "hidden",
+          flexWrap: "nowrap",
+          width: "100% !important",
+          background: "transparent",
+          borderRadius: "12px",
+          padding: "20px 20px 20px 14px",
+          height: "100%",
+          minHeight: "100px",
+          position: "relative",
+          marginLeft: "0px",
+          "&: hover": {
+            background: `${theme.palette.primary.main}`,
+            color: `${theme.palette.primary.contrastText}`
           }
         }
       },
-      layout: { xs: 12, sm: 12, md: 6, lg: 6 }
+      layout: { xs: 12, sm: 12, md: 3, lg: 3 }
     },
     elements: [
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 8
-        },
-        elements: [
-          {
-            type: "WrapperLayout",
-            config: {
-              main: {
-                columnSpacing: 0,
-                gap: 0
-              },
-              wrapperStyle: {
-                background: "transparent",
-                marginBottom: 0
-              },
-              componentsBoxStyle: {
-                flexDirection: "column",
-                flexWrap: "nowrap",
-                width: "100%",
-                height: "inherit",
-                background: "transparent",
-                borderRadius: "0px"
-              },
-              layout: 12
-            },
-            elements: [
-              {
-                type: "WrapperLayout",
-                config: {
-                  main: {
-                    columnSpacing: 0,
-                    gap: 0
-                  },
-                  wrapperStyle: {
-                    background: "transparent",
-                    marginBottom: 0
-                  },
-                  componentsBoxStyle: {
-                    flexDirection: "row",
-                    flexWrap: "nowrap",
-                    width: "100%",
-                    height: "0",
-                    background: "transparent",
-                    borderRadius: "0px",
-                    marginLeft: "-10px",
-                    marginTop: "-8px",
-                    justifyContent: "start",
-                    position: "relative"
-                  },
-                  layout: 12
-                },
-                elements: [
-                  {
-                    type: "Control",
-                    scope: "#/properties/programType",
-                    config: {
-                      main: {
-                        heading: ""
-                      },
-                      style: {
-                        color: "black",
-                        display: "flex",
-                        fontSize: { xs: "24px", md: "28px" },
-                        fontWeight: "bold",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "auto",
-                        margin: "-8px",
-                        marginLeft: "-24px",
-                        height: 0
-                      }
-                    },
-                    options: {
-                      widget: "Box"
-                    }
-                  },
-                  {
-                    type: "Control",
-                    scope: "#/properties/programType",
-                    config: {
-                      main: {
-                        heading: "5000.00"
-                      },
-                      style: {
-                        color: "black",
-                        display: "flex",
-                        fontSize: { xs: "24px", md: "28px" },
-                        fontWeight: "bold",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "auto",
-                        margin: "-8px",
-                        position: "absolute",
-                        left: "24px"
-                      }
-                    },
-                    options: {
-                      widget: "Box"
-                    }
-                  }
-                ]
-              },
-              {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                  main: {
-                    heading: "Total Earnings"
-                  },
-                  style: {
-                    color: "black",
-                    fontSize: "16px",
-                    justifyContent: "center",
-                    textWrap: "wrap",
-                    background: "inherit",
-                    width: "calc(100%+8px)",
-                    margin: "-8px",
-                    marginTop: { xs: "16px", md: "20px" }
-                  },
-                  layout: 12
-                },
-                options: {
-                  widget: "Box"
-                }
-              }
-            ]
-          }
-        ]
-      },
       {
         type: "Control",
-        scope: "#/properties/programType",
+        scope: "#/properties/initilCardScope",
         config: {
           main: {
             url: "https://www.svgrepo.com/show/500606/loading.svg"
           },
           style: {
             containerStyle: {
-              height: "100%",
+              position: "absolute",
+              color: "inherit",
+              top: "4px",
+              right: "4px",
               display: "flex",
-              justifyContent: "end"
+              justifyContent: "flex-end",
+              alignItems: "flex-start"
             },
             imageStyle: {
-              width: "unset",
-              fontSize: "none",
-              padding: "4px",
-              margin: "0px 0px 0px 8px",
-              height: "64px"
+              color: "inherit",
+              width: "32px",
+              height: "32px",
+              padding: "0px",
+              margin: "0px"
             }
-          },
-          layout: 4
+          }
         },
         options: {
           widget: "Image"
         }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "Total Earnings"
+          },
+          style: {
+            color: "inherit",
+            fontSize: "16px",
+            fontWeight: 300,
+            fontFamily: "Poppins",
+            justifyContent: "flex-start",
+            background: "inherit",
+            position: "absolute",
+            top: "8px",
+            left: "12px",
+            display: "flex",
+            maxWidth: "200px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "5000.00"
+          },
+          style: {
+            color: "inherit",
+            display: "flex",
+            fontSize: { xs: "22px", md: "40px" },
+            fontWeight: 600,
+            background: "inherit",
+            justifyContent: "flex-start",
+            width: "100%",
+            margin: "0px",
+            marginBottom: "4px",
+            marginTop: "8px",
+            lineHeight: "1",
+            maxWidth: "300px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            overflowY: "hidden",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "Increased from last month"
+          },
+          style: {
+            color: "inherit",
+            fontSize: "12px",
+            fontWeight: "400",
+            justifyContent: "flex-start",
+            background: "inherit",
+            margin: "0px",
+            paddingLeft: "2px",
+            marginBottom: "8px",
+            maxWidth: "200px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
       }
     ]
   };
@@ -11524,9 +12145,10 @@ const buildCard = (config, componentScope, store) => {
   if (config.style) {
     card.config.wrapperStyle = JSON.parse(config.style);
   }
-  card.elements[0].elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/value`;
-  card.elements[1].scope = `#/properties/${config.name}/properties/url`;
-  card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`;
+  card.elements[0].scope = `#/properties/${config.name}/properties/url`;
+  card.elements[1].scope = `#/properties/${config.name}/properties/label`;
+  card.elements[2].scope = `#/properties/${config.name}/properties/value`;
+  card.elements[3].scope = `#/properties/${config.name}/properties/description`;
   if (config.layout) {
     card.config.layout = createLayoutFormat(config.layout);
   }
@@ -11535,16 +12157,56 @@ const buildCard = (config, componentScope, store) => {
     card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px";
   }
   if (config.label) {
-    card.elements[0].elements[0].elements[0].elements[1].config.main.heading = config.label;
+    card.elements[1].config.main.heading = config.label;
   }
   if (config.url) {
-    card.elements[1].config.main.url = config.url;
+    card.elements[0].config.main.url = config.url;
   }
   if (config.description) {
-    card.elements[0].elements[0].elements[1].config.main.heading = config.description;
+    card.elements[3].config.main.heading = config.description;
   }
   return card;
 };
+var MetricCard = {
+  type: "Control",
+  scope: "#/properties/metricpath",
+  options: {
+    widget: "MetricCard"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+    main: {}
+  }
+};
+const buildMetricCard = (config2, componentScope2, store2) => {
+  const card2 = _.cloneDeep(MetricCard);
+  card2.scope = componentScope2;
+  if (config2.style) {
+    card2.config.style = JSON.parse(config2.style);
+  }
+  if (config2.layout) {
+    card2.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.label) {
+    card2.config.main.label = config2.label;
+  }
+  if (config2.url) {
+    card2.config.main.url = config2.url;
+  }
+  if (config2.description) {
+    card2.config.main.description = config2.description;
+  }
+  if (config2.cardValue) {
+    card2.config.main.cardValue = config2.cardValue;
+  }
+  if (config2.growthRate) {
+    card2.config.main.growthRate = config2.growthRate;
+  }
+  if (config2.color) {
+    card2.config.main.color = config2.color;
+  }
+  return card2;
+};
 var DateInputField = {
   type: "Control",
   scope: "#/properties/date",
@@ -11552,7 +12214,7 @@ var DateInputField = {
     widget: "DateInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "date"
@@ -11566,7 +12228,7 @@ const DateTime = {
     widget: "DateTimeInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "DateTime",
       type: "date"
@@ -11576,21 +12238,43 @@ const DateTime = {
 const buildDate = (config2, componentScope2) => {
   const dateInputField = _.cloneDeep(DateInputField);
   dateInputField.config.main.label = config2.label;
-  dateInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   dateInputField.scope = componentScope2;
   if (config2.layout) {
     dateInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.variant) {
+    dateInputField.config.main.variant = config2.variant;
+  }
+  if (config2.toolTip) {
+    dateInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    dateInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    dateInputField.config.style = JSON.parse(config2.style);
+  }
   return dateInputField;
 };
 const buildDateTime = (config2, componentScope2) => {
   const dateTimeInputField = _.cloneDeep(DateTime);
   dateTimeInputField.config.main.label = config2.label;
-  dateTimeInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   dateTimeInputField.scope = componentScope2;
   if (config2.layout) {
     dateTimeInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.variant) {
+    dateTimeInputField.config.main.variant = config2.variant;
+  }
+  if (config2.toolTip) {
+    dateTimeInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    dateTimeInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    dateTimeInputField.config.style = JSON.parse(config2.style);
+  }
   return dateTimeInputField;
 };
 var RankCard = {
@@ -11674,14 +12358,15 @@ var MultipleSelect = {
     widget: "MultipleSelect"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",
       multiple: true,
-      variant: "standard",
+      variant: "outlined",
       options: []
-    }
+    },
+    style: {}
   }
 };
 const buildMultiSelect = (config2, componentScope2) => {
@@ -11696,9 +12381,21 @@ const buildMultiSelect = (config2, componentScope2) => {
   if (config2.value) {
     multipleSelect.config.main.options = config2.value;
   }
+  if (config2.variant) {
+    multipleSelect.config.main.variant = config2.variant;
+  }
   if (config2.lazyLoading) {
     multipleSelect.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
+  if (config2.toolTip) {
+    multipleSelect.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    multipleSelect.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    multipleSelect.config.style = JSON.parse(config2.style);
+  }
   return multipleSelect;
 };
 const buildBasicUiSchema = (config2) => {
@@ -11718,7 +12415,7 @@ const TextArea = {
     widget: "TextArea"
   },
   config: {
-    layout: { xs: 12, sm: 12, md: 5.5, lg: 5.5 },
+    layout: 12,
     style: {
       containerStyle: {
         borderRadius: "20px"
@@ -11742,7 +12439,7 @@ const buildTextArea = (config2, componentScope2) => {
   const textArea = _.cloneDeep(TextArea);
   textArea.config.main.heading = config2.label;
   if (config2.layout) {
-    textArea.config.layout = createLayoutFormat(config2.layout);
+    textArea.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
     textArea.config.style = JSON.parse(config2.style);
@@ -11784,11 +12481,11 @@ const buildSlider = (config2, componentScope2) => {
 const Checkbox = {
   "type": "Control",
   "scope": "#/properties/username1",
-  "layout": 12,
   "options": {
     "widget": "CheckBox"
   },
   "config": {
+    "layout": { xs: 6, sm: 6, md: 4, lg: 3 },
     "main": {
       "label": "Welcome to Hyperform"
     }
@@ -11809,7 +12506,7 @@ const buildCheckbox = (config2, componentScope2) => {
 const buildLineGraph = (config2, componentScope2) => {
   const lineGraph = _.cloneDeep(LineGraph);
   if (config2.layout) {
-    lineGraph.config.layout = createLayoutFormat(config2.layout);
+    lineGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   lineGraph.config.main.header = config2.heading;
   if (config2.height) {
@@ -11832,17 +12529,23 @@ const buildLineGraph = (config2, componentScope2) => {
   if (config2.leftLabel) {
     lineGraph.config.main.leftLabel = config2.leftLabel;
   }
+  if (config2.disableLeftLabel) {
+    lineGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
   if (config2.legendHide) {
     lineGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
+  if (config2.legendDirection) {
+    lineGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
   if (config2.bottomAxisAngle) {
     lineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
   if (config2.legendLabels) {
-    lineGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    lineGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.pieArcColors) {
-    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    lineGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   lineGraph.scope = componentScope2;
   return lineGraph;
@@ -11854,11 +12557,10 @@ const RadioUiSchema = {
     widget: "RadioInputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Enabled",
-      options: ["YES", "NO"],
-      errorMessage: "Enabled is not marked as YES or NO"
+      options: ["YES", "NO"]
     }
   }
 };
@@ -11875,6 +12577,15 @@ const buildRadio = (config2, componentScope2) => {
   if (config2.style) {
     Radio.config.style = JSON.parse(config2.style);
   }
+  if (config2.errorMessage) {
+    Radio.config.main.errorMessage = config2.errorMessage;
+  }
+  if (config2.toolTip) {
+    Radio.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    Radio.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   return Radio;
 };
 var emptyBox = {
@@ -11884,13 +12595,14 @@ var emptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {},
     style: {}
   }
 };
 const buildEmptyBox = (config2, componentScope2) => {
   const EmptyBox = _.cloneDeep(emptyBox);
+  EmptyBox.scope = componentScope2;
   if (config2.layout) {
     EmptyBox.config.layout = createLayoutFormat(config2.layout);
   }
@@ -11899,16 +12611,35 @@ const buildEmptyBox = (config2, componentScope2) => {
 const ArrayUiSchema = {
   type: "Control",
   scope: "#/properties/adjustments",
-  layout: 11.5,
-  options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: []
-    }
+  layout: 12,
+  elements: [],
+  config: {
+    main: {}
   }
 };
 const buildArray = (config2, componentScope2) => {
   const array = _.cloneDeep(ArrayUiSchema);
+  if (config2.allExpanded) {
+    array.config.main.allExpanded = config2.allExpanded === "YES" ? true : false;
+  }
+  if (config2.disableAddButton) {
+    array.config.main.disableAddButton = config2.disableAddButton === "YES" ? true : false;
+  }
+  if (config2.disableExpandAllButton) {
+    array.config.main.disableExpandAllButton = config2.disableExpandAllButton === "YES" ? true : false;
+  }
+  if (config2.disableRowActions) {
+    array.config.main.disableRowActions = config2.disableRowActions === "YES" ? true : false;
+  }
+  if (config2.style) {
+    array.config.style = JSON.parse(config2.style);
+  }
+  array.config.main.rowSpacing = Number(config2.rowSpacing);
+  array.config.main.columnSpacing = Number(config2.columnSpacing);
+  array.config.main.spacing = Number(config2.spacing);
+  array.config.main.childElementLabel = config2.childElementLabel;
+  array.config.main.showKeyAsLabel = config2.showKeyAsLabel;
+  array.config.main.label = config2.label;
   array.scope = componentScope2;
   return array;
 };
@@ -11920,7 +12651,7 @@ const TextField = {
     "widget": "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Adhaar Card",
       formatStrArray: ["9", "9", "9", "9", " ", "9", "9", "9", "9", " ", "X9", "X9", "X9", "X9"],
@@ -11949,7 +12680,7 @@ const PanField = {
     "widget": "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Pan Card",
       placeholder: "AAAAA0000A",
@@ -11977,12 +12708,13 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       required: false,
       onUpload: "onFileUpload",
       onDownload: "onFileDownload",
-      label: "Aggrement Copy"
+      label: "Aggrement Copy",
+      "onClick": "onClick"
     },
     style: {
       backgroundColor: "none"
@@ -11999,6 +12731,19 @@ const buildFileInput = (config2, componentScope2) => {
   if (config2.style) {
     box.config.style = JSON.parse(config2.style);
   }
+  box.config.main.variant = config2.variant;
+  box.config.main.disableUpload = config2.disableUpload === "YES" ? true : false;
+  box.config.main.disableDownload = config2.disableDownload === "YES" ? true : false;
+  box.config.main.disableDelete = config2.disableDelete === "YES" ? true : false;
+  box.config.main.useLabel = config2.useLabel === "YES" ? true : false;
+  box.config.main.description = config2.description;
+  box.config.main.toolTip = config2.toolTip;
+  box.config.main.chooseButtonLabel = config2.chooseButtonLabel;
+  box.config.main.noFileAvailableMessage = config2.noFileAvailableMessage;
+  if (config2.toolTipPosition) {
+    box.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  box.config.main.externalUpload = config2.externalUpload === "YES" ? true : false;
   return box;
 };
 const Stepper = {
@@ -12055,6 +12800,7 @@ const PopUP = {
     },
     main: {
       label: "PopUp",
+      onClose: "onClose",
       fullScreen: false,
       fullWidth: false,
       maxWidth: false,
@@ -12072,10 +12818,10 @@ const buildPopUp = (config2, componentScope2) => {
   popup.config.main.fullWidth = config2.fullWidth === "YES" ? true : false;
   popup.config.main.maxWidth = config2.maxWidth || false;
   if (config2.layout) {
-    popup.config.layout = createLayoutFormat(config2.layout);
+    popup.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
-    PopUP.config.style = JSON.parse(config2.style);
+    popup.config.style = JSON.parse(config2.style);
   }
   return popup;
 };
@@ -12112,10 +12858,10 @@ const buildDataGrid = (config2, componentScope2) => {
     DataGrid.config.main.label = config2.label;
   }
   if (config2.layout) {
-    DataGrid.config.layout = createLayoutFormat(config2.layout);
+    DataGrid.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.cardLayout) {
-    DataGrid.config.cardLayout = createLayoutFormat(config2.cardLayout);
+    DataGrid.config.cardLayout = createLayoutFormat(config2.cardLayout, config2.type);
   }
   if (config2.style) {
     DataGrid.config.style = JSON.parse(config2.style);
@@ -12167,6 +12913,7 @@ const TreeMap = {
   "type": "Control",
   "scope": "#/properties/TreeMap2",
   "config": {
+    layout: 12,
     "main": {
       "layout": "cartsian",
       orientation: "vertical",
@@ -12192,7 +12939,7 @@ const buildTreeMap = (config2, componentScope2) => {
     treMap.config.main.header = config2.label;
   }
   if (config2.layout) {
-    treMap.config.layout = createLayoutFormat(config2.layout);
+    treMap.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.orientation) {
     treMap.config.main.orientation = config2.orientation;
@@ -12235,7 +12982,7 @@ const buildThoughtOfTheDay = (config2, componentScope2) => {
     thought.config.main.thought = `${config2.thought}`;
   }
   if (config2.layout) {
-    thought.config.layout = createLayoutFormat(config2.layout);
+    thought.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.label) {
     thought.config.main.label = config2.label;
@@ -12245,124 +12992,441 @@ const buildThoughtOfTheDay = (config2, componentScope2) => {
   }
   return thought;
 };
+var horizontalLayout = {
+  type: "HorizontalLayout",
+  config: {
+    layout: 12,
+    main: {
+      rowSpacing: 3,
+      divider: false
+    },
+    defaultStyle: true
+  },
+  elements: []
+};
+const buildHorizontalLayout = (config2, componentScope2) => {
+  const horizontal = _.cloneDeep(horizontalLayout);
+  horizontal.scope = componentScope2;
+  if (config2.style) {
+    horizontal.config.style = JSON.parse(config2.style);
+  }
+  if (config2.layout) {
+    horizontal.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  return horizontal;
+};
+const imageUiSchema = {
+  type: "Control",
+  scope: "#/properties/Logo",
+  options: {
+    widget: "Image"
+  },
+  config: {
+    layout: 3,
+    main: {
+      url: "",
+      onClick: "onClick"
+    },
+    style: {}
+  }
+};
+const buildImage = (config2, componentScope2) => {
+  const image = _.cloneDeep(imageUiSchema);
+  image.scope = componentScope2;
+  image.config.main.url = config2.imageUrl;
+  if (config2.layout) {
+    image.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    image.config.style = JSON.parse(config2.style);
+  }
+  if (config2.height) {
+    image.config.style.imageStyle = { ...image.config.style.imageStyle, height: config2.height };
+  }
+  image.config.main.toolTip = config2.toolTip;
+  image.config.main.toolTipPosition = config2.toolTipPosition;
+  return image;
+};
+const buildAreaGraph = (config2, componentScope2) => {
+  const AreaGraph = _.cloneDeep(AreaBarGraph);
+  AreaGraph.scope = componentScope2;
+  if (config2.layout) {
+    AreaGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  AreaGraph.config.main.type = config2.graphType;
+  AreaGraph.scope = componentScope2;
+  AreaGraph.config.main.header = config2.heading;
+  AreaGraph.config.main.subHeader = config2.subHeader;
+  if (config2.legendHide) {
+    AreaGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
+  }
+  if (config2.bottomAxisAngle) {
+    AreaGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
+  }
+  if (config2.legendLabels) {
+    AreaGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
+  }
+  if (config2.legendDirection) {
+    AreaGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
+  if (config2.height) {
+    AreaGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.pieArcColors) {
+    AreaGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
+  }
+  if (config2.xAxisFormatType) {
+    AreaGraph.config.main.xAxisFormatType = config2.xAxisFormatType;
+  }
+  if (config2.yAxisTickCount) {
+    AreaGraph.config.main.yAxisTickCount = config2.yAxisTickCount;
+  }
+  if (config2.xAxisTickCount) {
+    AreaGraph.config.main.xAxisTickCount = config2.xAxisTickCount;
+  }
+  if (config2.xAxisValue) {
+    AreaGraph.config.main.xAxisValue = config2.xAxisValue;
+  }
+  if (config2.xAxisType) {
+    AreaGraph.config.main.xAxisType = config2.xAxisType;
+  }
+  if (config2.bottomLabel) {
+    AreaGraph.config.main.bottomLabel = config2.bottomLabel;
+  }
+  if (config2.leftLabel) {
+    AreaGraph.config.main.leftLabel = config2.leftLabel;
+  }
+  if (config2.disableLeftLabel) {
+    AreaGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
+  if (config2.leftMargin) {
+    AreaGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
+  }
+  return AreaGraph;
+};
+const buildStackBarLineGraph = (config2, componentScope2) => {
+  const StackBarLineGraph = _.cloneDeep(StackBarLineG);
+  StackBarLineGraph.scope = componentScope2;
+  if (config2.layout) {
+    StackBarLineGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  StackBarLineGraph.config.main.type = config2.graphType;
+  StackBarLineGraph.scope = componentScope2;
+  StackBarLineGraph.config.main.header = config2.heading;
+  StackBarLineGraph.config.main.subHeader = config2.subHeader;
+  if (config2.legendHide) {
+    StackBarLineGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
+  }
+  if (config2.bottomAxisAngle) {
+    StackBarLineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
+  }
+  if (config2.legendLabels) {
+    StackBarLineGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
+  }
+  if (config2.legendDirection) {
+    StackBarLineGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
+  if (config2.height) {
+    StackBarLineGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.pieArcColors) {
+    StackBarLineGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
+  }
+  if (config2.yAxisTickCount) {
+    StackBarLineGraph.config.main.yAxisTickCount = config2.yAxisTickCount;
+  }
+  if (config2.xAxisTickCount) {
+    StackBarLineGraph.config.main.xAxisTickCount = config2.xAxisTickCount;
+  }
+  if (config2.xAxisValue) {
+    StackBarLineGraph.config.main.xAxisValue = config2.xAxisValue;
+  }
+  if (config2.xAxisType) {
+    StackBarLineGraph.config.main.xAxisType = config2.xAxisType;
+  }
+  if (config2.bottomLabel) {
+    StackBarLineGraph.config.main.bottomLabel = config2.bottomLabel;
+  }
+  if (config2.leftLabel) {
+    StackBarLineGraph.config.main.leftLabel = config2.leftLabel;
+  }
+  if (config2.rightLabel) {
+    StackBarLineGraph.config.main.rightLabel = config2.rightLabel;
+  }
+  if (config2.disableLeftLabel) {
+    StackBarLineGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
+  if (config2.growthRateKey) {
+    StackBarLineGraph.config.main.growthRateKey = config2.growthRateKey;
+  }
+  if (config2.tooltipUnit) {
+    StackBarLineGraph.config.main.tooltipUnit = config2.tooltipUnit;
+  }
+  if (config2.leftMargin) {
+    StackBarLineGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
+  }
+  return StackBarLineGraph;
+};
+const cameraUiSchema = {
+  type: "Control",
+  scope: "#/properties/camera",
+  options: {
+    widget: "Camera"
+  },
+  config: {
+    main: {
+      label: "Upload Photo",
+      multiUplaod: false,
+      onUpload: "onFileUpload"
+    }
+  }
+};
+const buildCamera = (config2, componentScope2) => {
+  const camera = _.cloneDeep(cameraUiSchema);
+  camera.scope = componentScope2;
+  if (config2.iconName) {
+    camera.config.main.startIcon = config2.iconName;
+  }
+  if (config2.layout) {
+    camera.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  if (config2.tooltipMessage) {
+    camera.config.main.tooltipMessage = config2.tooltipMessage;
+  }
+  camera.config.main.multiUplaod = config2.multiUplaod === "YES" ? true : false;
+  if (config2.style) {
+    camera.config.style = JSON.parse(config2.style);
+  }
+  if (config2.size) {
+    camera.config.main.size = config2.size;
+  }
+  if (config2.variant) {
+    camera.config.main.variant = config2.variant;
+  }
+  if (config2.color) {
+    camera.config.main.color = config2.color;
+  }
+  if (config2.label) {
+    camera.config.main.label = config2.label;
+  }
+  return camera;
+};
+var ButtonGroup = {
+  type: "Control",
+  scope: "#/properties/buttonGroup",
+  options: {
+    widget: "ButtonGroup"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+    main: {
+      variant: "contained",
+      styleDefault: false,
+      size: "small"
+    },
+    style: {}
+  }
+};
+const buildButtonGroup = (config2, componentScope2) => {
+  const buttonGroup = _.cloneDeep(ButtonGroup);
+  if (config2.layout) {
+    buttonGroup.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  buttonGroup.scope = componentScope2;
+  if (config2.multiSelect) {
+    buttonGroup.config.main.multiSelect = config2.multiSelect === "YES" ? true : false;
+  }
+  if (config2.style) {
+    buttonGroup.config.style = JSON.parse(config2.style);
+  }
+  if (config2.size) {
+    buttonGroup.config.main.size = config2.size;
+  }
+  if (config2.color) {
+    buttonGroup.config.main.color = config2.color;
+  }
+  return buttonGroup;
+};
+const PopOver = {
+  type: "Control",
+  scope: "#/properties/text",
+  options: {
+    widget: "Popover"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      label: "PopOver"
+    },
+    style: {}
+  }
+};
+const buildPopOver = (config2, componentScope2) => {
+  const popOver = _.cloneDeep(PopOver);
+  popOver.scope = componentScope2;
+  popOver.config.main.positionVertical = config2.positionVertical;
+  popOver.config.main.positionHorizontal = config2.positionHorizontal;
+  popOver.config.main.contentVertical = config2.contentVertical;
+  popOver.config.main.contentHorizontal = config2.contentHorizontal;
+  popOver.config.main.width = config2.width;
+  popOver.config.main.gap = config2.gap;
+  if (config2.layout) {
+    popOver.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  if (config2.style) {
+    popOver.config.style = JSON.parse(config2.style);
+  }
+  return popOver;
+};
+const OTPSchema = {
+  type: "Control",
+  scope: "#/properties/OTPInput",
+  options: {
+    widget: "OTPInput"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+    main: {
+      seperator: "",
+      length: 4,
+      type: "number",
+      masking: true
+    }
+  }
+};
+const buildOTP_Input = (config2, componentScope2) => {
+  const OTP = _.cloneDeep(OTPSchema);
+  OTP.scope = componentScope2;
+  if (config2.layout) {
+    OTP.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    OTP.config.style = JSON.parse(config2.style);
+  }
+  if (config2.errorMessage) {
+    OTP.config.main.errorMessage = config2.errorMessage;
+  }
+  if (config2.toolTip) {
+    OTP.config.main.toolTip = config2.toolTip;
+  }
+  OTP.config.main.masking = config2.masking === "YES" ? true : false;
+  OTP.config.main.type = config2.OTP_Format;
+  OTP.config.main.seperator = config2.seperator;
+  OTP.config.main.length = +config2.length;
+  return OTP;
+};
+var pdfViewer = {
+  type: "Control",
+  scope: "#/properties/pdfviewer",
+  options: {
+    widget: "PdfViewer"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      title: "PDF"
+    }
+  }
+};
+const buildPdfViewer = (config2, componentScope2) => {
+  const PdfViewer = _.cloneDeep(pdfViewer);
+  PdfViewer.scope = componentScope2;
+  PdfViewer.config.main.scale = config2.scale;
+  if (config2.layout) {
+    PdfViewer.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    PdfViewer.config.style = JSON.parse(config2.style);
+  }
+  return PdfViewer;
+};
 let schema = {
   type: "object",
   properties: {},
   required: []
 };
-function buildRule(configObj, tableName, arrayHolderName) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  if (arrayHolderName) {
-    if ((_c = (_b = (_a = schema.properties) == null ? void 0 : _a[tableName]) == null ? void 0 : _b.items) == null ? void 0 : _c.properties) {
-      if (!((_g = (_f = (_e = (_d = schema.properties) == null ? void 0 : _d[tableName]) == null ? void 0 : _e.items) == null ? void 0 : _f.properties) == null ? void 0 : _g[configObj.name])) {
-        schema.properties[tableName].items.properties[configObj.name] = {};
-        if (configObj.type === "Select" && ((_h = configObj.value) == null ? void 0 : _h.length) > 0) {
-          schema.properties[tableName].items.properties[configObj.name] = {
-            oneOf: configObj.value.map((e) => {
-              return { const: e.value, title: e.label };
-            })
-          };
-        } else if (configObj.type === "MultipleSelect" && ((_i = configObj.value) == null ? void 0 : _i.length) > 0) {
-          schema.properties[tableName].items.properties[configObj.name] = {
-            items: {
-              oneOf: configObj.value.map((e) => {
-                return { const: e.value, title: e.label };
-              })
-            }
-          };
-        }
-      }
-    }
-  } else if ((configObj.type === "Select" || configObj.type === "MultipleSelect") && ((_j = configObj.value) == null ? void 0 : _j.length) > 0) {
-    if (configObj.type === "Select") {
-      schema.properties[configObj.name] = {
-        oneOf: configObj.value.map((e) => {
-          return { const: e.value, title: e.label };
-        })
-      };
-    } else if (configObj.type === "MultipleSelect") {
-      schema.properties[configObj.name] = {
+function buildSchemaFromConfig(config2, parentSchema) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  if (config2.elements) {
+    if (config2.type === "Array") {
+      (_a = parentSchema.properties) != null ? _a : parentSchema.properties = {};
+      (_d = (_b = parentSchema.properties)[_c = config2.name]) != null ? _d : _b[_c] = {
+        type: "array",
         items: {
-          oneOf: configObj.value.map((e) => {
-            return { const: e.value, title: e.label };
-          })
+          type: "object",
+          properties: {},
+          required: []
         }
       };
+      const arrayItemSchema = parentSchema.properties[config2.name].items;
+      (_e = config2.elements) == null ? void 0 : _e.forEach(
+        (child) => buildSchemaFromConfig(child, arrayItemSchema)
+      );
+      return;
+    } else {
+      (_f = config2.elements) == null ? void 0 : _f.forEach(
+        (child) => buildSchemaFromConfig(child, parentSchema)
+      );
+      return;
     }
   }
-  if (configObj.validation) {
-    configObj.validation.forEach((rule) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l;
-      if (tableName) {
-        if ((_c2 = (_b2 = (_a2 = schema.properties) == null ? void 0 : _a2[tableName]) == null ? void 0 : _b2.items) == null ? void 0 : _c2.properties) {
-          if (!((_g2 = (_f2 = (_e2 = (_d2 = schema.properties) == null ? void 0 : _d2[tableName]) == null ? void 0 : _e2.items) == null ? void 0 : _f2.properties) == null ? void 0 : _g2[configObj.name])) {
-            schema.properties[tableName].items.properties[configObj.name] = {};
-            if (configObj.type === "Select" || ((_h2 = configObj.value) == null ? void 0 : _h2.length) > 0) {
-              schema.properties[tableName].items.properties[configObj.name] = {
-                oneOf: configObj.value.map((e) => {
-                  return { const: e.value, title: e.label };
-                })
-              };
-            } else if (configObj.type === "MultipleSelect" || ((_i2 = configObj.value) == null ? void 0 : _i2.length) > 0) {
-              schema.properties[tableName].items.properties[configObj.name] = {
-                items: {
-                  oneOf: configObj.value.map((e) => {
-                    return { const: e.value, title: e.label };
-                  })
-                }
-              };
-            }
-          }
-          if (rule.validationType === "required") {
-            (_l = (_k = (_j2 = schema.properties) == null ? void 0 : _j2[tableName]) == null ? void 0 : _k.items) == null ? void 0 : _l.required.push(configObj.name);
-          } else {
-            schema.properties[tableName].items.properties[configObj.name]["type"] = "string";
-            schema.properties[tableName].items.properties[configObj.name][rule.validationType] = isNaN(rule.validationValue) ? rule.validationValue : Number(rule.validationValue);
-          }
-        }
-      } else {
-        if (!schema.properties[configObj.name]) {
-          schema.properties[configObj.name] = {};
-        }
-        if (rule.validationType === "required") {
-          schema.required.push(configObj.name);
-        } else {
-          schema.properties[configObj.name]["type"] = "string";
-          schema.properties[configObj.name][rule.validationType] = isNaN(rule.validationValue) ? rule.validationValue : Number(rule.validationValue);
-        }
-      }
-    });
-  }
-}
-const buildSchema = (config2, tableName, isArrayType) => {
-  buildRule(config2, tableName, isArrayType);
-  if (config2 == null ? void 0 : config2.elements) {
-    if (config2.type == "Table" || config2.type == "Array") {
-      if (!schema.properties[config2.name]) {
-        schema.properties[config2.name] = {
-          type: "array",
-          items: {
-            type: "object",
-            properties: {},
-            required: []
-          }
-        };
-      }
-      config2.elements.map((e, elemInd) => {
-        buildSchema(e, config2.name, config2.type === "Array" ? true : false);
-      });
+  (_g = parentSchema.properties) != null ? _g : parentSchema.properties = {};
+  (_j = (_h = parentSchema.properties)[_i = config2.name]) != null ? _j : _h[_i] = {};
+  const fieldSchema = parentSchema.properties[config2.name];
+  (_k = config2.validation) == null ? void 0 : _k.forEach((v) => {
+    var _a2;
+    if (v.validationType === "required") {
+      (_a2 = parentSchema.required) != null ? _a2 : parentSchema.required = [];
+      parentSchema.required.push(config2.name);
+    } else if (v.validationType === "readOnly") {
+      fieldSchema.type = "string";
+      fieldSchema.disabled = true;
     } else {
-      config2.elements.map((e, elemInd) => {
-        buildSchema(e);
-      });
+      fieldSchema.type = "string";
+      fieldSchema[v.validationType] = isNaN(v.validationValue) ? v.validationValue : Number(v.validationValue);
     }
+  });
+  if (config2.type === "Select" && ((_l = config2.value) == null ? void 0 : _l.length)) {
+    fieldSchema.oneOf = config2.value.map((v) => ({
+      const: v.value,
+      title: v.label
+    }));
+  }
+  if (config2.type === "MultipleSelect" && ((_m = config2.value) == null ? void 0 : _m.length)) {
+    fieldSchema.type = "array";
+    fieldSchema.items = {
+      oneOf: config2.value.map((v) => ({
+        const: v.value,
+        title: v.label
+      }))
+    };
   }
+}
+const buildSchema = (config2) => {
+  buildSchemaFromConfig(config2, schema);
   return schema;
 };
 const buildUiSchema = (config2, store2) => {
   let elements = {};
   const componentScope2 = `#/properties/${config2.name}`;
   switch (config2.type) {
+    case "OTP_Input":
+      elements = buildOTP_Input(config2, componentScope2);
+      break;
     case "TreeMap":
       elements = buildTreeMap(config2, componentScope2);
       break;
@@ -12381,6 +13445,9 @@ const buildUiSchema = (config2, store2) => {
     case "PopUp":
       elements = buildPopUp(config2, componentScope2);
       break;
+    case "PopOver":
+      elements = buildPopOver(config2, componentScope2);
+      break;
     case "FileInput":
       elements = buildFileInput(config2, componentScope2);
       break;
@@ -12399,6 +13466,9 @@ const buildUiSchema = (config2, store2) => {
     case "WrapperSection":
       elements = buildWrapperSection(config2, componentScope2);
       break;
+    case "HorizontalLayout":
+      elements = buildHorizontalLayout(config2, componentScope2);
+      break;
     case "Text":
       elements = buildTextField(config2, componentScope2);
       break;
@@ -12417,6 +13487,9 @@ const buildUiSchema = (config2, store2) => {
     case "Button":
       elements = buildButton(config2, componentScope2);
       break;
+    case "ButtonGroup":
+      elements = buildButtonGroup(config2, componentScope2);
+      break;
     case "Table":
       elements = buildTable(config2, componentScope2);
       break;
@@ -12436,11 +13509,14 @@ const buildUiSchema = (config2, store2) => {
       elements = buildDownloadFile(config2, componentScope2);
       break;
     case "EmptyBox":
-      elements = buildEmptyBox(config2);
+      elements = buildEmptyBox(config2, componentScope2);
       break;
     case "card":
       elements = buildCard(config2, componentScope2, store2);
       break;
+    case "MetricCard":
+      elements = buildMetricCard(config2, componentScope2);
+      break;
     case "Graph":
       switch (config2.graphType) {
         case "BarGraph":
@@ -12457,6 +13533,12 @@ const buildUiSchema = (config2, store2) => {
         case "HorizontalStackBarGraph":
           elements = buildHorizontalBarGraph(config2, componentScope2);
           break;
+        case "AreaGraph":
+          elements = buildAreaGraph(config2, componentScope2);
+          break;
+        case "StackBarLineGraph":
+          elements = buildStackBarLineGraph(config2, componentScope2);
+          break;
         default:
           elements = buildStackbarGraph(config2, componentScope2);
           break;
@@ -12499,6 +13581,15 @@ const buildUiSchema = (config2, store2) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config2, componentScope2);
       break;
+    case "Image":
+      elements = buildImage(config2, componentScope2);
+      break;
+    case "Camera":
+      elements = buildCamera(config2, componentScope2);
+      break;
+    case "PdfViewer":
+      elements = buildPdfViewer(config2, componentScope2);
+      break;
     default:
       schema = {
         type: "object",
@@ -12509,7 +13600,17 @@ const buildUiSchema = (config2, store2) => {
   }
   if (config2 == null ? void 0 : config2.elements) {
     if ((config2 == null ? void 0 : config2.type) === "LeaderBoard") {
-      return elements;
+      const rowElements = [];
+      config2.elements.map((cellElem) => {
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          columnKey: cellElem.columnKey
+        };
+        rowElements.push({ ...commonProperties });
+      });
+      elements.elements = rowElements;
     } else if (config2.type == "ColumnGroup") {
       const sizeMap = {};
       if (config2.sizeHolder) {
@@ -12518,13 +13619,27 @@ const buildUiSchema = (config2, store2) => {
         });
       }
       elements.elements = config2.elements.map((cellElem, elemInd) => {
-        return {
+        const commonProperties = {
           accessorKey: cellElem.name,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
-          type: cellElem.columnFormat,
-          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : []
+          enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
+          columnFilterModeOptions: cellElem.filteringOptions,
+          enableSorting: cellElem.enableSorting === "No" ? false : true,
+          columnKey: cellElem.columnKey,
+          dateFormat: cellElem.dateFormat
         };
+        if (cellElem.type) {
+          const tableElem = {
+            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
+            ...commonProperties,
+            ...cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store2) : {}
+          };
+          return tableElem;
+        } else {
+          return { ...commonProperties };
+        }
       });
     } else if (config2.type == "Table") {
       const sizeMap = {};
@@ -12539,13 +13654,14 @@ const buildUiSchema = (config2, store2) => {
       config2.elements.filter((cellElem, elemInd) => {
         const commonProperties = {
           accessorKey: cellElem.name,
-          type: cellElem.columnFormat,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
           enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
           columnFilterModeOptions: cellElem.filteringOptions,
           enableSorting: cellElem.enableSorting === "No" ? false : true,
-          columnKey: cellElem.columnKey
+          columnKey: cellElem.columnKey,
+          dateFormat: cellElem.dateFormat
         };
         if (cellElem.type) {
           if (cellElem.elementType == "action") {
@@ -12560,8 +13676,8 @@ const buildUiSchema = (config2, store2) => {
           }
           const tableElem = {
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
-            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : [],
-            ...commonProperties
+            ...commonProperties,
+            ...cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store2) : {}
           };
           rowElements.push(tableElem);
         } else {
@@ -12571,17 +13687,18 @@ const buildUiSchema = (config2, store2) => {
       elements.elements = rowElements;
       elements.config.action = tableActionElement;
       elements.config.main.headerIcons.elements = tableHeaderElements;
-    } else if (config2.type == "Array") {
-      elements.options.detail.elements = config2.elements.map((e, elemInd) => {
-        return buildUiSchema(e, store2);
-      });
     } else {
       elements.elements = config2.elements.map((e, elemInd) => {
         return buildUiSchema(e, store2);
       });
     }
   }
+  if (config2.tabLabelElements) {
+    elements.tabLabelElements = config2.tabLabelElements.map((e, elemInd) => {
+      return buildUiSchema(e, store2);
+    });
+  }
   return elements;
 };
-export { buildConfig, buildSchema, buildUiSchema, clearFromSessionStorage, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
+export { buildConfig, buildSchema, buildUiSchema, clearFromSessionStorage, downloadFile$1 as downloadFile, downloadFileFromUrl, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
 //# sourceMappingURL=impaktapps-ui-builder.es.js.map