impaktapps-ui-builder 0.0.412 → 0.0.591

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

@@ -41,395 +41,602 @@ const PageMasterSchema = {
       }
     }
   },
-  required: ["template", "name"]
+  required: ["template", "name", "label"]
 };
-const PageMasterUiSchema = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          rowSpacing: 1,
-          header: true
-        },
-        defaultStyle: true
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/pageMaster",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: 8,
-            main: {
-              heading: "Page Master"
-            }
+const PageMasterUiSchema = (theme) => {
+  var _a;
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Page Master",
+    elements: [
+      {
+        type: "WrapperLayout",
+        config: {
+          main: {},
+          wrapperStyle: {
+            marginLeft: theme.spacing(2),
+            backgroundColor: theme.palette.background.default
           }
         },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
-          },
-          config: {
-            layout: 3,
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back"
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/name",
+            options: {
+              widget: "InputField"
             },
-            style: {
-              float: "right"
+            config: {
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              main: {
+                label: "Name",
+                options: [],
+                color: "secondary",
+                errorMessage: "Name should be start with 'page_'",
+                helperText: 'Name should be start with "page_"',
+                required: true
+              }
             }
-          }
-        }
-      ]
-    },
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          label: "Page Template",
-          divider: true
-        },
-        defaultStyle: true
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/name",
-          options: {
-            widget: "InputField"
           },
-          config: {
-            layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-            main: {
-              label: "Name",
-              options: [],
-              color: "secondary",
-              errorMessage: "Name should be start with 'page_'",
-              helperText: 'Name should be start with "page_"',
-              required: true
+          {
+            type: "Control",
+            scope: "#/properties/template",
+            options: {
+              widget: "SelectInputField"
+            },
+            config: {
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              main: {
+                label: "Template",
+                options: [
+                  { const: "template1", title: "template1" },
+                  { const: "template2", title: "template2" },
+                  { const: "template3", title: "template3" }
+                ],
+                color: "secondary",
+                required: true
+              }
             }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/template",
-          options: {
-            widget: "SelectInputField"
           },
-          config: {
-            layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-            main: {
-              label: "Template",
-              options: [
-                { const: "template1", title: "template1" },
-                { const: "template2", title: "template2" },
-                { const: "template3", title: "template3" }
-              ],
-              color: "secondary",
-              required: true
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "InputField"
+            },
+            config: {
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              main: {
+                label: "Label",
+                options: [],
+                color: "secondary",
+                required: true
+              }
             }
           }
-        }
-      ]
-    },
-    {
-      type: "TabLayout",
-      config: {
-        main: {
-          tabLabels: ["Components", "events"],
-          divider: true
-        },
-        defaultStyle: true
+        ]
       },
-      elements: [
-        {
-          type: "WrapperLayout",
-          config: {
-            main: {
-              divider: true
-            },
-            wrapperStyle: {
-              border: "1px solid gray"
-            }
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Components", "events"],
+            divider: true
           },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/heading",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                layout: 8,
-                main: {
-                  heading: "Components Table"
-                },
-                style: {
-                  fontFamily: "Roboto",
-                  fontWeight: "500",
-                  paddingLeft: "-10px",
-                  fontSize: "20px"
-                }
-              }
+          defaultStyle: true
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/elements",
+            options: {
+              widget: "Table"
             },
-            {
-              type: "Control",
-              scope: "#/properties/AddButton",
-              options: {
-                widget: "IconButton"
-              },
-              config: {
-                layout: 3,
-                main: {
-                  icon: "AddIcon",
-                  styleDefault: true,
-                  size: "small",
-                  onClick: "onAddClickHandler",
-                  tooltipMessage: "Add New"
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "onAddClickHandler",
+                            size: "small",
+                            icon: "AddIcon",
+                            iconLabel: "Add New",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px"
+                          }
+                        }
+                      }
+                    }
+                  ]
                 },
-                style: {
-                  float: "right"
-                }
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true
               }
             },
-            {
-              type: "Control",
-              scope: "#/properties/elements",
-              options: {
-                widget: "Table"
+            elements: [
+              {
+                accessorKey: "name",
+                header: "Name"
               },
-              config: {
-                main: {
-                  disableAction: true,
-                  disableSelection: true,
-                  enableDrag: true
-                }
+              {
+                accessorKey: "type",
+                header: "Type"
               },
-              elements: [
-                {
-                  accessorKey: "name",
-                  header: "Name"
-                },
-                {
-                  accessorKey: "type",
-                  header: "Type"
-                },
-                {
-                  header: "Edit",
-                  field: "Reject_Records",
-                  flex: 1,
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/RejectButton",
-                    options: {
-                      widget: "IconButton"
-                    },
-                    config: {
-                      main: {
-                        icon: "EditIcon",
-                        color: "primary",
-                        onClick: "Edit_Components",
-                        tooltipMessage: "Edit This Record"
-                      }
-                    }
-                  }
-                },
-                {
-                  header: "Delete",
-                  field: "Reject_Records",
-                  flex: 1,
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/RejectButton",
-                    options: {
-                      widget: "IconButton"
+              {
+                header: "Edit",
+                field: "Reject_Records",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "EditIcon",
+                      color: "primary",
+                      onClick: "Edit_Components",
+                      tooltipMessage: "Edit This Record"
                     },
-                    config: {
-                      main: {
-                        icon: "RejectIcon",
-                        color: "error",
-                        onClick: "Delete_Components",
-                        tooltipMessage: "Reject This Record"
-                      }
+                    style: {
+                      color: theme.palette.primary.main
                     }
                   }
                 }
-              ]
-            }
-          ]
-        },
-        {
-          type: "WrapperLayout",
-          config: {
-            main: {
-              divider: true
-            },
-            wrapperStyle: {
-              border: "1px solid gray"
-            }
-          },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/heading",
-              options: {
-                widget: "Box"
               },
-              config: {
-                layout: 8,
-                main: {
-                  heading: "Event Table"
-                },
-                style: {
-                  fontFamily: "Roboto",
-                  fontWeight: "500",
-                  paddingLeft: "-10px",
-                  fontSize: "20px"
+              {
+                header: "Delete",
+                field: "Reject_Records",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "RejectIcon",
+                      color: "error",
+                      onClick: "deletePopUpComponent",
+                      tooltipMessage: "Reject This Record"
+                    }
+                  }
                 }
               }
+            ]
+          },
+          {
+            type: "Control",
+            scope: "#/properties/events",
+            options: {
+              widget: "Table"
             },
-            {
-              type: "Control",
-              scope: "#/properties/AddButton",
-              options: {
-                widget: "IconButton"
-              },
-              config: {
-                layout: 3,
-                main: {
-                  icon: "AddIcon",
-                  styleDefault: true,
-                  size: "small",
-                  onClick: "eventAddHandler",
-                  tooltipMessage: "Back"
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "eventAddHandler",
+                            size: "small",
+                            icon: "AddIcon",
+                            iconLabel: "Add New",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px"
+                          }
+                        }
+                      }
+                    }
+                  ]
                 },
-                style: {
-                  float: "right"
-                }
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true
               }
             },
-            {
-              type: "Control",
-              scope: "#/properties/events",
-              options: {
-                widget: "Table"
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event Type"
               },
-              config: {
-                main: {
-                  disableAction: true,
-                  disableSelection: true,
-                  enableDrag: true
-                }
+              {
+                accessorKey: "Handler",
+                header: "Handler"
               },
-              elements: [
-                {
-                  accessorKey: "eventType",
-                  header: "Event Type"
-                },
-                {
-                  accessorKey: "Handler",
-                  header: "Handler"
-                },
-                {
-                  accessorKey: "Edit_Approve_Records",
-                  header: "Edit Widget",
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/Edit_Records",
-                    options: {
-                      widget: "IconButton"
+              {
+                accessorKey: "Edit_Approve_Records",
+                header: "Edit Widget",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Edit_Records",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      color: "info",
+                      size: "small",
+                      icon: "EditIcon",
+                      tooltipMessage: "Edit This Record",
+                      onClick: "editEvent"
                     },
-                    config: {
-                      main: {
-                        color: "info",
-                        size: "small",
-                        icon: "EditIcon",
-                        tooltipMessage: "Edit This Record",
-                        onClick: "editEvent"
-                      },
-                      style: {
-                        color: "#3949ab"
-                      }
+                    style: {
+                      color: theme.palette.primary.main
                     }
                   }
-                },
-                {
-                  accessorKey: "Reject_Records",
-                  header: "Delete",
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/RejectButton",
-                    options: {
-                      widget: "IconButton"
-                    },
-                    config: {
-                      main: {
-                        icon: "RejectIcon",
-                        color: "error",
-                        tooltipMessage: "Reject This Record",
-                        onClick: "deleteEvent"
-                      }
+                }
+              },
+              {
+                accessorKey: "Reject_Records",
+                header: "Delete",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "RejectIcon",
+                      color: "error",
+                      tooltipMessage: "Reject This Record",
+                      onClick: "deletePopUpEvent"
                     }
                   }
                 }
-              ]
-            }
-          ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "EmptyBox"
+        },
+        config: {
+          layout: { xs: 0, sm: 8, md: 8, lg: 8 }
         }
-      ]
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "EmptyBox"
       },
-      config: {
-        layout: { xs: 0, sm: 0, md: 8, lg: 7 }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "Button"
-      },
-      config: {
-        layout: 11.7,
-        main: {
-          name: "Save",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "small"
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "Button"
         },
-        style: {
-          marginBottom: "8px",
-          width: { xs: "100%", sm: "100%", md: "25%", lg: "20%" },
-          float: "right"
+        config: {
+          layout: 11.9,
+          main: {
+            name: "Save",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "saveHandler",
+            size: "medium"
+          },
+          style: {
+            width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
+            float: "right"
+          }
         }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/notify",
-      options: {
-        widget: "Notify"
       },
-      layout: 6
-    }
-  ]
+      {
+        type: "Control",
+        scope: "#/properties/popUpPageMasterComponent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "Delete_Components",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpComponent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpPageMasterEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/notify",
+        options: {
+          widget: "Notify"
+        },
+        layout: 6
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          main: {
+            direction: "row"
+          },
+          style: {
+            flexDirection: "row",
+            position: "absolute",
+            bottom: 0,
+            marginBottom: "-8px",
+            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: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
+                fontSize: "12px",
+                textAlign: "center",
+                lineHeight: 1,
+                width: "fit-content",
+                left: "50%",
+                position: "relative",
+                margin: 0,
+                flexGrow: 1,
+                height: 0
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/backIcon",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                iconName: "PrevIcon",
+                onClick: "backHandler",
+                width: "fit-content"
+              },
+              style: {
+                fill: theme.palette.primary.main,
+                width: 20,
+                height: 0,
+                margin: 0,
+                top: 0,
+                right: "82px",
+                position: "absolute",
+                fontSize: "12px",
+                cursor: "pointer",
+                ":hover": {
+                  fill: theme.palette.primary.dark
+                }
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/text",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                heading: "Previous Page",
+                onClick: "backHandler"
+              },
+              style: {
+                textAlign: "left",
+                lineHeight: 1,
+                height: 0,
+                width: "fit-content",
+                color: theme.palette.primary.main,
+                fontSize: "12px",
+                cursor: "pointer",
+                marginLeft: "2px",
+                marginRight: 0,
+                top: 3,
+                right: "12px",
+                position: "absolute",
+                ":hover": {
+                  color: theme.palette.primary.dark
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
@@ -5911,8 +6118,6 @@ const ComponentSchema = {
         { title: "Text Area", const: "TextArea" },
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },
-        { title: "Timer", const: "Timer" },
-        { title: "Upload File", const: "UploadFile" },
         { title: "TreeMap", const: "TreeMap" },
         { title: "ColumnGroup", const: "ColumnGroup" }
       ]
@@ -6176,303 +6381,534 @@ const ComponentSchema = {
   },
   required: ["name"]
 };
-const componentBasicUiSchema = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          rowSpacing: 1,
-          header: true
-        },
-        defaultStyle: true
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/Component",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: { xs: 12, sm: 12, md: 2 },
-            main: {
-              heading: "Component"
-            },
-            style: {
-              "float": "left"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/pageName",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: { xs: 7, sm: 7, md: 9 },
-            main: {
-              heading: " "
-            },
-            style: {
-              float: "right",
-              width: "auto",
-              fontSize: "12px",
-              color: "gray",
-              paddingTop: "10px"
-            }
-          }
+const componentBasicUiSchema = (theme) => {
+  var _a;
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Component",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
         },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
+        config: {
+          layout: 12,
+          main: {
+            heading: " "
           },
-          config: {
-            layout: { xs: 2, sm: 2, md: 0.5 },
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back"
-            },
-            style: {
-              float: "right"
-            }
+          style: {
+            marginLeft: theme.spacing(3),
+            width: "auto",
+            fontSize: "12px",
+            color: "gray"
           }
         }
-      ]
-    },
-    {
-      type: "TabLayout",
-      config: {
-        main: {
-          tabLabels: ["Core"],
-          defaultStyle: true,
-          id: `component`
-        }
       },
-      elements: [
-        {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/type",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 12, sm: 12, md: 6, lg: 6 },
-                main: {
-                  label: "Type"
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Core"],
+            defaultStyle: true,
+            id: `component`
+          }
+        },
+        elements: [
+          {
+            type: "HorizontalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/type",
+                options: {
+                  widget: "SelectInputField"
+                },
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Type"
+                  }
                 }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/name",
-              options: {
-                widget: "InputField"
               },
-              config: {
-                layout: {
-                  xs: 12,
-                  sm: 12,
-                  md: 6,
-                  lg: 6
+              {
+                type: "Control",
+                scope: "#/properties/name",
+                options: {
+                  widget: "InputField"
                 },
-                main: {
-                  label: "Name",
-                  options: [],
-                  color: "secondary",
-                  required: true
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Name",
+                    options: [],
+                    color: "secondary",
+                    required: true
+                  }
                 }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/label",
-              options: {
-                widget: "InputField"
               },
-              config: {
-                layout: {
-                  xs: 12,
-                  sm: 12,
-                  md: 6,
-                  lg: 6
+              {
+                type: "Control",
+                scope: "#/properties/label",
+                options: {
+                  widget: "InputField"
                 },
-                main: {
-                  label: "Label",
-                  options: [],
-                  color: "secondary",
-                  required: true
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Label",
+                    options: [],
+                    color: "secondary",
+                    required: true
+                  }
                 }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/columnFormat",
-              options: {
-                widget: "SelectInputField"
               },
-              config: {
-                layout: {
-                  xs: 12,
-                  sm: 12,
-                  md: 6,
-                  lg: 6
+              {
+                type: "Control",
+                scope: "#/properties/columnFormat",
+                options: {
+                  widget: "SelectInputField"
                 },
-                main: {
-                  label: "Column Format"
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Column Format"
+                  }
                 }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 11, sm: 11, md: 6, lg: 6 }
               },
-              options: {
-                widget: "EmptyBox"
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/layout",
-              layout: 11.5,
-              options: {
-                detail: {
-                  type: "HorizontalLayout",
-                  elements: [
-                    {
-                      type: "Control",
-                      scope: "#/properties/key",
-                      options: {
-                        widget: "SelectInputField"
+              {
+                type: "Control",
+                scope: "#/properties/proc",
+                config: {
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc",
+                config: {
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/layout",
+                layout: 12,
+                options: {
+                  detail: {
+                    type: "HorizontalLayout",
+                    elements: [
+                      {
+                        type: "Control",
+                        scope: "#/properties/key",
+                        options: {
+                          widget: "SelectInputField"
+                        },
+                        config: {
+                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                          main: {
+                            label: "Screen Size"
+                          }
+                        }
                       },
-                      config: {
-                        layout: {
-                          xs: 11,
-                          sm: 11,
-                          md: 5.5,
-                          lg: 5.5
+                      {
+                        type: "Control",
+                        scope: "#/properties/value",
+                        options: {
+                          widget: "InputField"
                         },
-                        main: {
-                          label: "Screen Size"
+                        config: {
+                          layout: { xs: 11, sm: 4, 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/value",
-                      options: {
-                        widget: "InputField"
                       },
-                      config: {
-                        layout: {
-                          xs: 11,
-                          sm: 11,
-                          md: 5.5,
-                          lg: 5.5
+                      {
+                        type: "Control",
+                        scope: "#/properties/proc",
+                        config: {
+                          layout: { xs: 0, sm: 4, 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."
+                        options: {
+                          widget: "EmptyBox"
                         }
                       }
-                    }
-                  ]
+                    ]
+                  }
                 }
               }
+            ]
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpComponentSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
             }
-          ]
-        }
-      ]
-    },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deleteComponents",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpComponent",
+                size: "small"
+              }
+            }
+          }
+        ]
       },
-      options: {
-        widget: "EmptyBox"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "Button"
+      {
+        type: "Control",
+        scope: "#/properties/popUpEventSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
       },
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
+      {
+        type: "Control",
+        scope: "#/properties/EmptyBox",
+        options: {
+          widget: "EmptyBox"
         },
-        main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "small"
+        config: {
+          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/EmptyBox",
+        options: {
+          widget: "EmptyBox"
         },
-        style: {
-          marginBottom: "8px",
-          float: "right"
+        config: {
+          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
         }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btnSubmit",
-      options: {
-        widget: "Button"
       },
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "Button"
         },
-        main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "small"
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Ok",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "okHandler",
+            size: "medium"
+          },
+          style: {
+            float: "right"
+          }
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btnSubmit",
+        options: {
+          widget: "Button"
         },
-        style: {
-          marginBottom: "8px",
-          float: "right"
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Save & Exit",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "saveHandler",
+            size: "medium"
+          },
+          style: {
+            float: "right"
+          }
         }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/notify",
-      options: {
-        widget: "Notify"
       },
-      layout: 6
-    }
-  ]
+      {
+        type: "Control",
+        scope: "#/properties/notify",
+        options: {
+          widget: "Notify"
+        },
+        layout: 6
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          main: {
+            direction: "row"
+          },
+          style: {
+            flexDirection: "row",
+            position: "absolute",
+            bottom: 0,
+            marginBottom: "-8px",
+            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: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
+                fontSize: "12px",
+                textAlign: "center",
+                lineHeight: 1,
+                width: "fit-content",
+                left: "50%",
+                position: "relative",
+                margin: 0,
+                flexGrow: 1,
+                height: 0
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/backIcon",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                iconName: "PrevIcon",
+                onClick: "backHandler",
+                width: "fit-content"
+              },
+              style: {
+                fill: theme.palette.primary.main,
+                width: 20,
+                height: 0,
+                margin: 0,
+                top: 0,
+                right: "90px",
+                position: "absolute",
+                fontSize: "12px",
+                cursor: "pointer",
+                ":hover": {
+                  fill: theme.palette.primary.dark
+                }
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/text",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                heading: "Previous Page",
+                onClick: "backHandler"
+              },
+              style: {
+                textAlign: "left",
+                lineHeight: 1,
+                height: 0,
+                width: "fit-content",
+                color: theme.palette.primary.main,
+                fontSize: "12px",
+                cursor: "pointer",
+                marginLeft: "2px",
+                marginRight: 0,
+                top: 3,
+                right: "20px",
+                position: "absolute",
+                ":hover": {
+                  color: theme.palette.primary.dark
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
 const CoreSection = {
   type: "HorizontalLayout",
@@ -6484,7 +6920,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Type",
           type: "text"
@@ -6498,12 +6934,7 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Name"
         }
@@ -6516,12 +6947,7 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Label"
         }
@@ -6534,12 +6960,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Column Format"
         }
@@ -6549,7 +6970,17 @@ const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
       },
       options: {
         widget: "EmptyBox"
@@ -6558,7 +6989,7 @@ const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 11.5,
+      layout: 12,
       options: {
         "elementLabelProp": "key",
         detail: {
@@ -6571,12 +7002,7 @@ const CoreSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Screen Size"
                 }
@@ -6589,12 +7015,7 @@ const CoreSection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                   type: "number",
@@ -6602,6 +7023,16 @@ const CoreSection = {
                   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: 4, md: 4, lg: 4 }
+              },
+              options: {
+                widget: "EmptyBox"
+              }
             }
           ]
         }
@@ -6609,144 +7040,117 @@ const CoreSection = {
     }
   ]
 };
-const EventSection = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          divider: true
+const EventSection = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/events",
+        options: {
+          widget: "Table"
         },
-        wrapperStyle: {
-          border: "1px solid gray"
-        }
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/programType",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: 8,
-            main: {
-              heading: "Event Table"
-            },
-            style: {
-              fontFamily: "Roboto",
-              fontWeight: "500",
-              paddingLeft: "-10px",
-              fontSize: "20px"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
-          },
-          config: {
-            layout: 3,
-            main: {
-              icon: "AddIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "eventAddHandler",
-              tooltipMessage: "Back"
+        config: {
+          main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        color: "info",
+                        onClick: "eventAddHandler",
+                        size: "small",
+                        icon: "AddIcon",
+                        iconLabel: "Add New",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
+                    }
+                  }
+                }
+              ]
             },
-            style: {
-              float: "right"
-            }
+            disableAction: true,
+            disableSelection: true,
+            enableDrag: true
           }
         },
-        {
-          type: "Control",
-          scope: "#/properties/events",
-          options: {
-            widget: "Table"
+        elements: [
+          {
+            accessorKey: "eventType",
+            header: "Event Type"
           },
-          config: {
-            main: {
-              disableAction: true,
-              disableSelection: true,
-              enableDrag: true
-            }
+          {
+            accessorKey: "Handler",
+            header: "Handler"
           },
-          elements: [
-            {
-              accessorKey: "eventType",
-              header: "Event Type"
-            },
-            {
-              accessorKey: "Handler",
-              header: "Handler"
-            },
-            {
-              accessorKey: "Edit_Approve_Records",
-              header: "Edit Widget",
-              widget: {
-                type: "Control",
-                scope: "#/properties/Edit_Records",
-                options: {
-                  widget: "IconButton"
+          {
+            accessorKey: "Edit_Approve_Records",
+            header: "Edit Widget",
+            widget: {
+              type: "Control",
+              scope: "#/properties/Edit_Records",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  color: "info",
+                  size: "small",
+                  icon: "EditIcon",
+                  tooltipMessage: "Edit This Record",
+                  onClick: "eventEditHandler"
                 },
-                config: {
-                  main: {
-                    color: "info",
-                    size: "small",
-                    icon: "EditIcon",
-                    tooltipMessage: "Edit This Record",
-                    onClick: "eventEditHandler"
-                  },
-                  style: {
-                    color: "#3949ab"
-                  }
+                style: {
+                  color: theme.palette.primary.main
                 }
               }
-            },
-            {
-              accessorKey: "Reject_Records",
-              header: "Delete",
-              widget: {
-                type: "Control",
-                scope: "#/properties/RejectButton",
-                accessorKeyName: "Reject_Records",
-                options: {
-                  widget: "IconButton"
-                },
-                config: {
-                  main: {
-                    icon: "RejectIcon",
-                    color: "error",
-                    tooltipMessage: "Reject This Record",
-                    onClick: "deleteEvent"
-                  }
+            }
+          },
+          {
+            accessorKey: "Reject_Records",
+            header: "Delete",
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              accessorKeyName: "Reject_Records",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "RejectIcon",
+                  color: "error",
+                  tooltipMessage: "Reject This Record",
+                  onClick: "deletePopUpEvent"
                 }
               }
             }
-          ]
-        }
-      ]
-    }
-  ]
+          }
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
-const EmptyBox = {
+var emptyBox = {
   type: "Control",
-  scope: `#/properties/empty`,
+  scope: "#/properties/emptyBox",
   options: {
     widget: "EmptyBox"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
-    main: {}
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    main: {},
+    style: {}
   }
 };
 const cardLayout = {
@@ -6764,12 +7168,7 @@ const cardLayout = {
             widget: "SelectInputField"
           },
           config: {
-            layout: {
-              xs: 11,
-              sm: 11,
-              md: 5.5,
-              lg: 5.5
-            },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Screen Size"
             }
@@ -6782,12 +7181,7 @@ const cardLayout = {
             widget: "InputField"
           },
           config: {
-            layout: {
-              xs: 11,
-              sm: 11,
-              md: 5.5,
-              lg: 5.5
-            },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Value",
               type: "number",
@@ -6795,7 +7189,8 @@ const cardLayout = {
               errorMessage: "Number Can't be greater than 12 and can't be less than 0."
             }
           }
-        }
+        },
+        emptyBox
       ]
     }
   }
@@ -6804,7 +7199,7 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 11.5,
+    layout: 12,
     options: {
       "elementLabelProp": childScope,
       detail: {
@@ -6817,18 +7212,14 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
               widget: "InputField"
             },
             config: {
-              layout: {
-                xs: 11,
-                sm: 11,
-                md: 5.5,
-                lg: 5.5
-              },
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
               main: {
                 label: childLabel || "Labels for Tab"
               }
             }
           },
-          EmptyBox
+          emptyBox,
+          emptyBox
         ]
       }
     }
@@ -6842,17 +7233,13 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "Size"
     }
   }
 };
+sizeHolder.options.detail.elements[2] = emptyBox;
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6861,12 +7248,7 @@ const getInputField = (scope, label) => {
       widget: "InputField"
     },
     config: {
-      layout: {
-        xs: 11,
-        sm: 11,
-        md: 5.5,
-        lg: 5.5
-      },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label
       }
@@ -6881,12 +7263,7 @@ const getRadioInputField = (scope, label, options) => {
       widget: "RadioInputField"
     },
     config: {
-      layout: {
-        xs: 11,
-        sm: 11,
-        md: 5.5,
-        lg: 5.5
-      },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label,
         options
@@ -6894,6 +7271,26 @@ const getRadioInputField = (scope, label, options) => {
     }
   };
 };
+const buildWrapper = (label, elements) => {
+  return {
+    type: "WrapperLayout",
+    config: {
+      main: {
+        label: label || "Details",
+        isAccordion: true
+      },
+      wrapperStyle: {
+        marginTop: "-6px",
+        marginBottom: "-8px"
+      },
+      componentsBoxStyle: {
+        marginLeft: "24px"
+      },
+      defaultStyle: true
+    },
+    elements: elements || []
+  };
+};
 const getTextArea = (scope, heading, hideButton, layout) => {
   return {
     type: "Control",
@@ -6929,7 +7326,7 @@ const getSelectField = (scope, label, options) => {
       widget: "SelectInputField"
     },
     config: {
-      layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label,
         type: "text"
@@ -6950,14 +7347,18 @@ const buildPropertiesSection = function(type) {
         getInputField("linkType", "linkType"),
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
-        getInputField("graphZoomHeight", "Zoom Height")
+        getInputField("graphZoomHeight", "Zoom Height"),
+        emptyBox
       ];
+      break;
     case "InputSlider":
       uiSchema.elements = [
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
-        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"])
+        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "DataGrid":
@@ -6966,6 +7367,8 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        emptyBox,
+        emptyBox,
         cardLayout
       ];
       break;
@@ -6976,6 +7379,7 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
+        emptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6983,21 +7387,22 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
-        getInputField("maxWidth", "Max. Width"),
-        EmptyBox
+        getInputField("maxWidth", "Max. Width")
       ];
       break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
     case "SpeedoMeter":
@@ -7006,7 +7411,8 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Container Heading"),
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
-        getInputField("width", "Speedometer Width")
+        getInputField("width", "Speedometer Width"),
+        emptyBox
       ];
       break;
     case "RankCard":
@@ -7014,7 +7420,9 @@ const buildPropertiesSection = function(type) {
         getInputField("rank", "Rank"),
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
-        getInputField("description", "Card Description")
+        getInputField("description", "Card Description"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "LeaderBoard":
@@ -7023,6 +7431,8 @@ const buildPropertiesSection = function(type) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
+        emptyBox,
+        emptyBox,
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -7038,7 +7448,9 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Heading"),
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
-        getInputField("bottomLabel_3", "Third BottomLabel")
+        getInputField("bottomLabel_3", "Third BottomLabel"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "card":
@@ -7046,7 +7458,7 @@ const buildPropertiesSection = function(type) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Button":
@@ -7056,7 +7468,7 @@ const buildPropertiesSection = function(type) {
         getSelectField("color", "Color"),
         getInputField("tooltipMessage", "Tooltip Message"),
         getSelectField("defaultStyle", "Default Style"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Graph":
@@ -7069,6 +7481,7 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
+        emptyBox,
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color")
       ];
@@ -7078,13 +7491,16 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("divider", "Divider", ["YES", "No"]),
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
-        getInputField("rowSpacing", "Row Spacing")
+        getInputField("rowSpacing", "Row Spacing"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "TabSection":
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
+        emptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -7092,11 +7508,20 @@ const buildPropertiesSection = function(type) {
     case "LazyLoadingTable":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("SelectionAvailable", "Selection Available", ["YES", "NO"]),
-        getRadioInputField("ColumnResizingAvailable", "ColumnResizing Available", ["YES", "NO"]),
-        getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
+        getRadioInputField("SelectionAvailable", "Row Selection", ["YES", "NO"]),
+        getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
+        getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
+        emptyBox,
+        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,
+          emptyBox
+        ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
         sizeHolder
       ];
@@ -7109,13 +7534,15 @@ const buildPropertiesSection = function(type) {
     case "Select":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"])
+        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+        emptyBox
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
   }
@@ -7156,124 +7583,106 @@ const StyleSection = {
     }
   ]
 };
-const TableSection = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {},
-        wrapperStyle: {
-          border: "1px solid gray"
-        }
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/programType",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: 8,
-            main: {
-              heading: "Components Table"
-            },
-            style: {
-              fontFamily: "Roboto",
-              fontWeight: "500",
-              paddingLeft: "-10px",
-              fontSize: "20px"
-            }
-          }
+const TableSection = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/elements",
+        options: {
+          widget: "Table"
         },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
-          },
-          config: {
-            layout: 3,
-            main: {
-              icon: "AddIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "widgetAddClickHandler",
-              tooltipMessage: "Add New"
+        config: {
+          main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        color: "info",
+                        onClick: "widgetAddClickHandler",
+                        size: "small",
+                        icon: "AddIcon",
+                        iconLabel: "Add New",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
+                    }
+                  }
+                }
+              ]
             },
-            style: {
-              float: "right"
-            }
+            disableAction: true,
+            disableSelection: true,
+            enableDrag: true
           }
         },
-        {
-          type: "Control",
-          scope: "#/properties/elements",
-          options: {
-            widget: "Table"
+        elements: [
+          {
+            accessorKey: "name",
+            header: "Name"
           },
-          config: {
-            main: {
-              disableAction: true,
-              disableSelection: true,
-              enableDrag: true
-            }
+          {
+            accessorKey: "type",
+            header: "Type"
           },
-          elements: [
-            {
-              accessorKey: "name",
-              header: "Name"
-            },
-            {
-              accessorKey: "type",
-              header: "Type"
-            },
-            {
-              header: "Edit Record",
-              field: "Reject_Records",
-              flex: 1,
-              widget: {
-                type: "Control",
-                scope: "#/properties/RejectButton",
-                options: {
-                  widget: "IconButton"
+          {
+            header: "Edit Record",
+            field: "Reject_Records",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "EditIcon",
+                  color: "primary",
+                  onClick: "editComponents",
+                  tooltipMessage: "Reject This Record"
                 },
-                config: {
-                  main: {
-                    icon: "EditIcon",
-                    color: "primary",
-                    onClick: "editComponents",
-                    tooltipMessage: "Reject This Record"
-                  }
+                style: {
+                  color: theme.palette.primary.main
                 }
               }
-            },
-            {
-              header: "Delete",
-              field: "Reject_Records",
-              flex: 1,
-              widget: {
-                type: "Control",
-                scope: "#/properties/RejectButton",
-                options: {
-                  widget: "IconButton"
-                },
-                config: {
-                  main: {
-                    icon: "RejectIcon",
-                    color: "error",
-                    onClick: "deleteComponents",
-                    tooltipMessage: "Reject This Record"
-                  }
+            }
+          },
+          {
+            header: "Delete",
+            field: "Reject_Records",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "RejectIcon",
+                  color: "error",
+                  onClick: "deletePopUpComponent",
+                  tooltipMessage: "Reject This Record"
                 }
               }
             }
-          ]
-        }
-      ]
-    }
-  ]
+          }
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
 const ValueTab = {
   type: "HorizontalLayout",
@@ -7281,7 +7690,7 @@ const ValueTab = {
     {
       type: "Control",
       scope: "#/properties/value",
-      layout: 11.5,
+      layout: 12,
       options: {
         detail: {
           type: "HorizontalLayout",
@@ -7293,12 +7702,7 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Label"
                 }
@@ -7311,16 +7715,21 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
               }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+              }
             }
           ]
         }
@@ -7347,12 +7756,7 @@ const ValidationSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Validation Type"
                 }
@@ -7365,16 +7769,21 @@ const ValidationSection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Validation Value"
                 }
               }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4 }
+              }
             }
           ]
         }
@@ -7407,10 +7816,10 @@ var buildConfig = (FormData) => {
 const createLayoutFormat = (config) => {
   if (_.isEmpty(config)) {
     return {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
     };
   }
   let data = {};
@@ -7419,7 +7828,7 @@ const createLayoutFormat = (config) => {
   });
   return data;
 };
-const flatObjectValueInArray = (config) => {
+const flatObjectValueInArray = (config = []) => {
   if (config[0].length < 1) {
     return;
   }
@@ -7513,7 +7922,6 @@ const navigateHandler = (store2, isSubmitted, pageName) => {
 function okHandler(store2) {
   var _a;
   const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-  console.log(store2.ctx.core.errors);
   if (_.isEmpty(store2.ctx.core.errors)) {
     saveFormdataInLocalStorage(store2.ctx.core.data, path);
     store2.navigate(-1);
@@ -7562,20 +7970,20 @@ const sectionLabels = {
 };
 const refreshPage = (type, store2) => {
   var _a;
-  const UiSchema = _.cloneDeep(componentBasicUiSchema);
+  const UiSchema = _.cloneDeep(componentBasicUiSchema(store2.theme.myTheme));
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection,
-      Components: TableSection,
+      Event: EventSection(store2.theme.myTheme),
+      Components: TableSection(store2.theme.myTheme),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
     UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
-    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store2.theme.myTheme), ValidationSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7621,22 +8029,30 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`);
       }
     },
-    deleteComponents: function() {
+    deleteComponents: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.elements.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const data = path ? _.get(response, path) : response;
       store2.setFormdata(data);
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpComponentSection");
+      }
+      localStorage.removeItem("rowId");
     },
-    deleteEvent: function() {
+    deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       store2.setFormdata(_.get(response, path));
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpEventSection");
+      }
+      localStorage.removeItem("rowId");
     },
     widgetAddClickHandler: function() {
       var _a;
@@ -7672,6 +8088,16 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpComponentSection");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEventSection");
     }
   };
 };
@@ -7698,7 +8124,7 @@ var pageMaster = (funcParams) => {
       return config;
     },
     getUiSchema: function() {
-      return PageMasterUiSchema;
+      return PageMasterUiSchema(store2.theme.myTheme);
     },
     getSchema: () => {
       return PageMasterSchema;
@@ -7726,7 +8152,10 @@ var pageMaster = (funcParams) => {
     },
     saveHandler: async () => await saveHandler(store2, service2, submitHandler),
     Edit_Components: Component(store2, dynamicData2, submitHandler, service2).editComponents,
-    Delete_Components: Component(store2, dynamicData2, submitHandler, service2).deleteComponents,
+    Delete_Components: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteComponents(false);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
     eventAddHandler: function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
@@ -7746,10 +8175,22 @@ var pageMaster = (funcParams) => {
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
     deleteEvent: function() {
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data);
       store2.setFormdata(response);
+      store2.updateDialog("popUpPageMasterEvent");
+      localStorage.removeItem("rowId");
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterEvent");
     }
   };
 };
@@ -7803,6 +8244,7 @@ const EventSchema = {
         { title: "File Upload Event", const: "onUpload" },
         { title: "Back Event", const: "onBack" },
         { title: "Next Event", const: "onNext" },
+        { title: "onRowMovement", const: "onRowMovement" },
         { title: "File Download Event", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
@@ -7841,302 +8283,433 @@ const EventSchema = {
   },
   required: ["eventType", "Handler"]
 };
-const EventUiSchema = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          rowSpacing: 1,
-          header: true
-        },
-        defaultStyle: true
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/Component",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: { xs: 12, sm: 12, md: 2 },
-            main: {
-              heading: "Component"
-            },
-            style: {
-              "float": "left"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/pageName",
-          options: {
-            widget: "Box"
-          },
-          config: {
-            layout: { xs: 7, sm: 7, md: 9 },
-            main: {
-              heading: " "
-            },
-            style: {
-              float: "right",
-              width: "auto",
-              fontSize: "12px",
-              color: "gray",
-              paddingTop: "10px"
-            }
-          }
+const EventUiSchema = (theme) => {
+  var _a;
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Component",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
         },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
+        config: {
+          layout: 12,
+          main: {
+            heading: " "
           },
-          config: {
-            layout: { xs: 2, sm: 2, md: 0.5 },
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back"
-            },
-            style: {
-              float: "right"
-            }
+          style: {
+            marginLeft: theme.spacing(3),
+            width: "auto",
+            fontSize: "12px",
+            color: "gray"
           }
         }
-      ]
-    },
-    {
-      type: "TabLayout",
-      config: {
-        main: {
-          tabLabels: ["Core", "Response Event"],
-          defaultStyle: true,
-          id: "event"
-        }
       },
-      elements: [
-        {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: `#/properties/eventType`,
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-                main: {
-                  label: "Event Type",
-                  type: "text"
-                }
-              }
-            },
-            getSelectField("Handler", "Handler")
-          ]
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Core", "Response Event"],
+            defaultStyle: true,
+            id: "event"
+          }
         },
-        {
-          type: "WrapperLayout",
-          config: {
-            main: {
-              divider: true
-            },
-            wrapperStyle: {
-              border: "1px solid gray"
-            }
-          },
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/heading",
-              options: {
-                widget: "Box"
+        elements: [
+          {
+            type: "HorizontalLayout",
+            elements: [
+              {
+                type: "Control",
+                scope: `#/properties/eventType`,
+                options: {
+                  widget: "SelectInputField"
+                },
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Event Type",
+                    type: "text"
+                  }
+                }
               },
-              config: {
-                layout: 8,
-                main: {
-                  heading: "Response Event"
+              getSelectField("Handler", "Handler"),
+              {
+                type: "Control",
+                scope: "#/properties/EmptyBox",
+                options: {
+                  widget: "EmptyBox"
                 },
-                style: {
-                  fontFamily: "Roboto",
-                  fontWeight: "500",
-                  paddingLeft: "-10px",
-                  fontSize: "20px"
+                config: {
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
                 }
               }
+            ]
+          },
+          {
+            type: "Control",
+            scope: "#/properties/events",
+            options: {
+              widget: "Table"
             },
-            {
-              type: "Control",
-              scope: "#/properties/AddButton",
-              options: {
-                widget: "IconButton"
-              },
-              config: {
-                layout: 3,
-                main: {
-                  icon: "AddIcon",
-                  styleDefault: true,
-                  size: "small",
-                  onClick: "addEvent",
-                  tooltipMessage: "Back"
+            config: {
+              main: {
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "addEvent",
+                            size: "small",
+                            icon: "AddIcon",
+                            iconLabel: "Add New",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px"
+                          }
+                        }
+                      }
+                    }
+                  ]
                 },
-                style: {
-                  float: "right"
-                }
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true
               }
             },
-            {
-              type: "Control",
-              scope: "#/properties/events",
-              options: {
-                widget: "Table"
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event Type"
               },
-              config: {
-                main: {
-                  disableAction: true,
-                  disableSelection: true,
-                  enableDrag: true
-                }
+              {
+                accessorKey: "Handler",
+                header: "Handler"
               },
-              elements: [
-                {
-                  accessorKey: "eventType",
-                  header: "Event Type"
-                },
-                {
-                  accessorKey: "Handler",
-                  header: "Handler"
-                },
-                {
-                  accessorKey: "Edit_Approve_Records",
-                  header: "Edit Widget",
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/Edit_Records",
-                    options: {
-                      widget: "IconButton"
+              {
+                accessorKey: "Edit_Approve_Records",
+                header: "Edit Widget",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Edit_Records",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      color: "info",
+                      size: "small",
+                      icon: "EditIcon",
+                      tooltipMessage: "Edit This Record",
+                      onClick: "editEvent"
                     },
-                    config: {
-                      main: {
-                        color: "info",
-                        size: "small",
-                        icon: "EditIcon",
-                        tooltipMessage: "Edit This Record",
-                        onClick: "editEvent"
-                      },
-                      style: {
-                        color: "#3949ab"
-                      }
+                    style: {
+                      color: theme.palette.primary.main
                     }
                   }
-                },
-                {
-                  accessorKey: "Reject_Records",
-                  header: "Delete",
-                  widget: {
-                    type: "Control",
-                    scope: "#/properties/RejectButton",
-                    options: {
-                      widget: "IconButton"
-                    },
-                    config: {
-                      main: {
-                        icon: "RejectIcon",
-                        color: "error",
-                        tooltipMessage: "Reject This Record",
-                        onClick: "deleteEvent"
-                      }
+                }
+              },
+              {
+                accessorKey: "Reject_Records",
+                header: "Delete",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "RejectIcon",
+                      color: "error",
+                      tooltipMessage: "Reject This Record",
+                      onClick: "deletePopUpEvent"
                     }
                   }
                 }
-              ]
-            }
-          ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/EmptyBox",
+        options: {
+          widget: "EmptyBox"
+        },
+        config: {
+          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
         }
-      ]
-    },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
       },
-      options: {
-        widget: "EmptyBox"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "Button"
+      {
+        type: "Control",
+        scope: "#/properties/EmptyBox",
+        options: {
+          widget: "EmptyBox"
+        },
+        config: {
+          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        }
       },
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "Button"
         },
-        main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "small"
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Ok",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "okHandler",
+            size: "medium"
+          },
+          style: {
+            float: "right"
+          }
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btnSubmit",
+        options: {
+          widget: "Button"
         },
-        style: {
-          marginBottom: "8px",
-          float: "right"
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Save & Exit",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "saveHandler",
+            size: "medium"
+          },
+          style: {
+            float: "right"
+          }
         }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btnSubmit",
-      options: {
-        widget: "Button"
       },
-      config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
+      {
+        type: "Control",
+        scope: "#/properties/popUpEvent",
+        options: {
+          widget: "PopUp"
         },
-        main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "small"
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            },
+            wrapperStyle: {
+              width: { xs: "100%", sm: "100%", md: "98%" }
+            }
+          }
         },
-        style: {
-          marginBottom: "8px",
-          float: "right"
-        }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/notify",
-      options: {
-        widget: "Notify"
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
       },
-      layout: 6
-    }
-  ]
+      {
+        type: "Control",
+        scope: "#/properties/notify",
+        options: {
+          widget: "Notify"
+        },
+        layout: 6
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          main: {
+            direction: "row"
+          },
+          style: {
+            flexDirection: "row",
+            position: "absolute",
+            bottom: 0,
+            marginBottom: "-8px",
+            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: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
+                fontSize: "12px",
+                textAlign: "center",
+                lineHeight: 1,
+                width: "fit-content",
+                left: "50%",
+                position: "relative",
+                margin: 0,
+                flexGrow: 1,
+                height: 0
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/backIcon",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                iconName: "PrevIcon",
+                onClick: "backHandler",
+                width: "fit-content"
+              },
+              style: {
+                fill: theme.palette.primary.main,
+                width: 20,
+                height: 0,
+                margin: 0,
+                top: 0,
+                right: "82px",
+                position: "absolute",
+                fontSize: "12px",
+                cursor: "pointer",
+                ":hover": {
+                  fill: theme.palette.primary.dark
+                }
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/text",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              main: {
+                heading: "Previous Page",
+                onClick: "backHandler"
+              },
+              style: {
+                textAlign: "left",
+                lineHeight: 1,
+                height: 0,
+                width: "fit-content",
+                color: theme.palette.primary.main,
+                fontSize: "12px",
+                cursor: "pointer",
+                marginLeft: "2px",
+                marginRight: 0,
+                top: 3,
+                right: "12px",
+                position: "absolute",
+                ":hover": {
+                  color: theme.palette.primary.dark
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
 const APISection = {
   type: "HorizontalLayout",
@@ -8148,7 +8721,7 @@ const APISection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Method",
           type: "text"
@@ -8162,7 +8735,7 @@ const APISection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Path",
           type: "text",
@@ -8171,6 +8744,26 @@ const APISection = {
         }
       }
     },
+    {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+      }
+    },
     {
       type: "Control",
       scope: "#/properties/headers",
@@ -8187,12 +8780,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Key"
                 }
@@ -8205,16 +8793,21 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
               }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+              }
             }
           ]
         }
@@ -8236,12 +8829,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Key"
                 }
@@ -8254,16 +8842,21 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
               }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+              }
             }
           ]
         }
@@ -8290,12 +8883,7 @@ const refreshSectionUiSchema = {
                 widget: "InputField"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
@@ -8308,12 +8896,18 @@ const refreshSectionUiSchema = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5
-                },
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                main: {}
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
                 main: {}
               }
             }
@@ -8323,18 +8917,6 @@ const refreshSectionUiSchema = {
     }
   ]
 };
-var emptyBox = {
-  type: "Control",
-  scope: "#/properties/emptyBox",
-  options: {
-    widget: "EmptyBox"
-  },
-  config: {
-    layout: { xs: 12, sm: 12, md: 5.5, lg: 5.5 },
-    main: {},
-    style: {}
-  }
-};
 var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
   return {
     setPage: async function() {
@@ -8345,23 +8927,24 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       this.refreshPage(formdata.Handler, store2);
     },
     refreshPage: (handlerType, store22) => {
-      const uiSchema = _.cloneDeep(EventUiSchema);
+      const uiSchema = _.cloneDeep(EventUiSchema(store22.theme.myTheme));
       const schema2 = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
           uiSchema.elements[1].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
-          uiSchema.elements[1].elements[0].elements[3] = emptyBox;
-          uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false);
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[1].elements[0].elements[2] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = APISection;
           schema2.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
           uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
-          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, { xs: 12, sm: 12, md: 6 });
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
           schema2.required = ["eventType", "Handler", "refreshElements"];
@@ -8413,9 +8996,17 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    deleteEvent: Component(store2, dynamicData2, submitHandler, service2).deleteEvent,
+    deleteEvent: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteEvent(false);
+      store2.updateDialog("popUpEvent");
+    },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEvent");
     }
   };
 };
@@ -8513,7 +9104,8 @@ function executeEventsHandler(params2) {
       params2.componentName,
       params2.config,
       params2.store,
-      params2.service
+      params2.service,
+      params2.formDataHolder
     );
   } else if (params2.config.Handler === "onBackHandler") {
     return (_a = params2.store.functionParameters) == null ? void 0 : _a.handleBack();
@@ -8536,13 +9128,16 @@ function getRefreshElements(eventConfig, eventGropus) {
       result.push(result[0]);
     }
   }
-  console.log(result);
   return result;
 }
-function executeRefreshHandler(params2) {
+async function executeRefreshHandler(params2) {
   const compToRefresh = getRefreshElements(params2.config, params2.eventGroups);
-  return Promise.all(compToRefresh.map((componentName) => {
-    return Promise.all(params2.eventGroups.onLoad[componentName].map((compEventConfig) => {
+  return Promise.allSettled(compToRefresh.map((componentName) => {
+    const eventConfigs = params2.eventGroups.onLoad[componentName];
+    if (!eventConfigs) {
+      return Promise.resolve();
+    }
+    return Promise.allSettled(eventConfigs.map((compEventConfig) => {
       return executeEvents({ ...params2, config: compEventConfig, componentName });
     }));
   }));
@@ -8582,7 +9177,7 @@ function executeCustomHandler(params) {
     return response;
   }
 }
-function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2) {
+function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder2) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
     store2.setSchema((pre) => {
       var _a;
@@ -8616,30 +9211,42 @@ 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))) {
+      store2.newData = {
+        ...store2.newData,
+        ...handlerResponse == null ? void 0 : handlerResponse.data
+      };
       store2.setFormdata((pre) => {
         return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
       });
     }
   } else {
     if (handlerResponse) {
+      formDataHolder2[componentName] = handlerResponse.data;
       store2.setFormdata((pre) => {
-        var _a;
-        return { ...pre, [componentName]: eventConfig.lazyLoading ? (_a = handlerResponse == null ? void 0 : handlerResponse.data) == null ? void 0 : _a.data : handlerResponse.data };
+        return { ...pre, ...formDataHolder2 };
       });
     }
   }
 }
-const buildBodyFormat = (body2, formData, userValue2) => {
+const buildBodyFormat = (body2, formData, userValue2, store2) => {
   let finalBody = { ...userValue2 == null ? void 0 : userValue2.payload };
   body2.map((elem) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     if (typeof (elem == null ? void 0 : elem.value) !== "string") {
       finalBody[elem.key] = elem.value;
     } else {
       if ((_a = elem == null ? void 0 : elem.value) == null ? void 0 : _a.startsWith("$userValue")) {
         const finalpath = elem.value.substring(11);
         finalBody[elem.key] = _.get(userValue2, finalpath);
-      } else if ((_b = elem == null ? void 0 : elem.value) == null ? void 0 : _b.startsWith("$")) {
+      } else if ((_b = elem == null ? void 0 : elem.value) == null ? void 0 : _b.startsWith("$urlParams")) {
+        const finalpath = elem.value.substring(11);
+        const value = (_c = store2 == null ? void 0 : store2.searchParams) == null ? void 0 : _c.get(finalpath);
+        finalBody[elem.key] = value;
+      } else if ((_d = elem == null ? void 0 : elem.value) == null ? void 0 : _d.startsWith("$local")) {
+        const finalpath = elem.value.substring(7);
+        const value = JSON.parse(localStorage.getItem(finalpath) || '""');
+        finalBody[elem.key] = value;
+      } else if ((_e = elem == null ? void 0 : elem.value) == null ? void 0 : _e.startsWith("$")) {
         const finalpath = elem.value.substring(1);
         finalBody[elem.key] = _.get(formData, finalpath);
       } else if ((elem == null ? void 0 : elem.value) === "*" && (elem == null ? void 0 : elem.key) === "*") {
@@ -8687,7 +9294,7 @@ function buildApiPayload(compConfig, body, headers, store, dynamicData, userValu
     headers = buildHeadersFormat(compConfig.headers);
   }
   if (compConfig.body) {
-    body = { ...buildBodyFormat(compConfig.body, store.newData || ((_b = (_a = store == null ? void 0 : store.ctx) == null ? void 0 : _a.core) == null ? void 0 : _b.data) || store.formData, userValue) };
+    body = { ...buildBodyFormat(compConfig.body, store.newData || ((_b = (_a = store == null ? void 0 : store.ctx) == null ? void 0 : _a.core) == null ? void 0 : _b.data) || store.formData, userValue, store) };
   }
   const promiseChain = { body, headers };
   if (compConfig.apiBody) {
@@ -8706,6 +9313,7 @@ const notifyUiSchema = {
   },
   layout: 6
 };
+let formDataHolder = {};
 let pageData = false;
 const extractEvents = (eventConfig) => {
   function extractsConfigEvents(eventConfigObj) {
@@ -8762,12 +9370,14 @@ var service = (funcParams) => {
     service: funcParams.service,
     serviceHolder: { downloadFile: downloadFile$1, download: doDownload, ...funcParams.functionsProvider },
     eventGroups,
-    functionsProvider: funcParams.functionsProvider
+    functionsProvider: funcParams.functionsProvider,
+    formDataHolder
   };
   return {
     setPage: async function() {
-      var _a;
+      var _a, _b, _c, _d;
       funcParams.store.setFormdata({});
+      funcParams.store.newData = {};
       const pageBasicDetailString = localStorage.getItem("pagemasterMetaData");
       if (pageBasicDetailString) {
         pageData = JSON.parse(pageBasicDetailString);
@@ -8781,7 +9391,116 @@ var service = (funcParams) => {
       }
       const config = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
-      const schema2 = (_a = pageData == null ? void 0 : pageData.schema) != null ? _a : { type: "object", properties: {} };
+      const event2 = new CustomEvent("pageNameChanged", {
+        detail: { pageName: config.label }
+      });
+      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,
+              marginBottom: "-8px",
+              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: ((_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.text.disabled) || "#AFAFAF",
+                  fontSize: "12px",
+                  textAlign: "center",
+                  lineHeight: 1,
+                  width: "fit-content",
+                  left: "50%",
+                  position: "relative",
+                  margin: 0,
+                  flexGrow: 1,
+                  height: 0
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/backIcon",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                main: {
+                  iconName: "PrevIcon",
+                  onClick: "backHandler",
+                  width: "fit-content"
+                },
+                style: {
+                  fill: theme.palette.primary.main,
+                  width: 20,
+                  height: 0,
+                  margin: 0,
+                  top: 0,
+                  right: "82px",
+                  position: "absolute",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  ":hover": {
+                    fill: theme.palette.primary.dark
+                  }
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/text",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                main: {
+                  heading: "Previous Page",
+                  onClick: "backHandler"
+                },
+                style: {
+                  textAlign: "left",
+                  lineHeight: 1,
+                  height: 0,
+                  width: "fit-content",
+                  color: theme.palette.primary.main,
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  marginLeft: "2px",
+                  marginRight: 0,
+                  top: 3,
+                  right: "12px",
+                  position: "absolute",
+                  ":hover": {
+                    color: theme.palette.primary.dark
+                  }
+                }
+              }
+            }
+          ]
+        }
+      );
+      const schema2 = (_d = pageData == null ? void 0 : pageData.schema) != null ? _d : { type: "object", properties: {} };
       eventGroups = {};
       eventGroups = extractEvents(config);
       executeEventsParameters = {
@@ -8793,7 +9512,8 @@ var service = (funcParams) => {
         service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
         serviceHolder: this,
-        eventGroups
+        eventGroups,
+        formDataHolder
       };
       await executeRefreshHandler({
         config: {},
@@ -8803,7 +9523,8 @@ var service = (funcParams) => {
         userValue: funcParams.userValue,
         service: funcParams.service,
         serviceHolder: this,
-        eventGroups
+        eventGroups,
+        formDataHolder
       });
       funcParams.store.setSchema(
         (pre) => {
@@ -8848,6 +9569,16 @@ var service = (funcParams) => {
     backHandler: function() {
       funcParams.store.navigate(-1);
     },
+    onRowMovement: async function(paginationValues) {
+      const apiBody = [
+        { key: "direction", value: paginationValues.rowMovement.direction },
+        { key: "movedRowId", value: paginationValues.rowMovement.movedRowId },
+        { key: "targetRowId", value: paginationValues.rowMovement.targetRowId || [] }
+      ];
+      await this.callExecuteEvents({ path: paginationValues == null ? void 0 : paginationValues.path }, apiBody, "onRowMovement");
+      const response = await this.callExecuteEvents({ path: paginationValues == null ? void 0 : paginationValues.path }, apiBody, "onLoad");
+      return response == null ? void 0 : response.data;
+    },
     onPaginationChange: async function(paginationValues) {
       var _a;
       const apiBody = [
@@ -8857,7 +9588,7 @@ var service = (funcParams) => {
         { key: "filters", value: paginationValues.columnFilters || [] },
         { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" }
       ];
-      const response = await this.updateConfigApiBody(paginationValues, apiBody);
+      const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response == null ? void 0 : response.data;
     },
     getSelectOptions: async function(param) {
@@ -8866,7 +9597,7 @@ var service = (funcParams) => {
           { key: "searchValue", value: param.serachValue },
           { key: "currentValue", value: param.currentValue }
         ];
-        const response = await this.updateConfigApiBody(param, apiBody);
+        const response = await this.callExecuteEvents(param, apiBody);
         return response == null ? void 0 : response.data;
       }
     },
@@ -8887,10 +9618,10 @@ var service = (funcParams) => {
         }));
       }
     },
-    updateConfigApiBody: async function(paramValue, apiBody) {
-      var _a;
+    callExecuteEvents: async function(paramValue, apiBody, eventType) {
+      var _a, _b;
       let LastCallResponse = void 0;
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onLoad[paramValue.path]) {
+      for (const eventConfig of (_a = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _a[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -8899,7 +9630,7 @@ var service = (funcParams) => {
         } else {
           eventConfig.body = apiBody;
         }
-        const responseEvent = (_a = eventConfig == null ? void 0 : eventConfig.events) == null ? void 0 : _a.filter((elem) => {
+        const responseEvent = (_b = eventConfig == null ? void 0 : eventConfig.events) == null ? void 0 : _b.filter((elem) => {
           return elem.Handler !== "mergeFormdata";
         });
         eventConfig.events = responseEvent != null ? responseEvent : [];
@@ -8939,14 +9670,14 @@ var service = (funcParams) => {
       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) {
-        for (const eventConfig of (_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path]) {
+        Promise.all((_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path].map((eventConfig) => {
           executeEventsParameters.store.functionParameters = functionParameters;
           executeEvents({
             ...executeEventsParameters,
             config: eventConfig,
             componentName: path
           });
-        }
+        }));
       }
     },
     downloadFile: downloadFile$1,
@@ -8963,12 +9694,15 @@ var leaderBoard = {
       label: "LeaderBoard",
       divider: true
     },
-    style: { wrapperStyle: {
-      height: { xs: 850, sm: 1e3 }
-    } },
+    style: {},
     wrapperStyle: {
       position: "relative",
       width: "100%"
+    },
+    componentsBoxStyle: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "20px"
     }
   },
   elements: [
@@ -8979,21 +9713,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "90px", "md": "60px" },
-          left: { "xs": "calc(50% - 50px)", "sm": "calc(50% - 50px)", "md": "calc(50% - 100px)" },
-          width: { "xs": "100px", "sm": "100px", "md": "200px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "100px", "sm": "100px", "md": "200px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "90px", "md": "60px" },
+            left: { "xs": "calc(50% - 50px)", "sm": "calc(50% - 50px)", "md": "calc(50% - 100px)" },
+            width: { "xs": "100px", "sm": "100px", "md": "200px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "100px", "sm": "100px", "md": "200px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9008,21 +9744,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "160px", "md": "130px" },
-          left: { "xs": "calc(25% - 45px)", "sm": "calc(25% - 45px)", "md": "calc(25% - 90px)" },
-          width: { "xs": "80px", "sm": "80px", "md": "180px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "80px", "sm": "80px", "md": "180px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "160px", "md": "130px" },
+            left: { "xs": "calc(25% - 45px)", "sm": "calc(25% - 45px)", "md": "calc(25% - 90px)" },
+            width: { "xs": "80px", "sm": "80px", "md": "180px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "80px", "sm": "80px", "md": "180px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9037,21 +9775,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "160px", "md": "130px" },
-          left: { "xs": "calc(75% - 42.5px)", "sm": "calc(75% - 42.5px)", "md": "calc(75% - 85px)" },
-          width: { "xs": "80px", "sm": "80px", "md": "180px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "80px", "sm": "80px", "md": "180px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "160px", "md": "130px" },
+            left: { "xs": "calc(75% - 42.5px)", "sm": "calc(75% - 42.5px)", "md": "calc(75% - 85px)" },
+            width: { "xs": "80px", "sm": "80px", "md": "180px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "80px", "sm": "80px", "md": "180px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9274,11 +10014,11 @@ var leaderBoard = {
             fontWeight: 900,
             background: "rgb(179, 198, 255)"
           },
-          position: "absolute",
           top: { xs: "300px", sm: "300px", md: "390px", lg: "390px" },
           border: "2px solid rgb(179, 198, 255)",
           width: "95%",
-          left: "2.5%"
+          left: "2.5%",
+          margin: "auto"
         },
         main: {
           disableAction: true,
@@ -9387,62 +10127,8 @@ const BarGraph = {
     widget: "Graph"
   },
   config: {
-    main: {
-      header: "Bar Graph",
-      bottomLabel: "Name of Employe",
-      numTicks: 6,
-      leftLabel: "Value in lakhs",
-      axisLeft: true,
-      axisBottom: true,
-      hideTicks: false,
-      hideLeftAxisLine: false,
-      hideBottomAxisLine: false,
-      bottomAxisWidth: "10px",
-      legend: {
-        labelColor: "green",
-        legendTitle: "",
-        direction: "row",
-        align: "none"
-      }
-    },
-    style: {
-      containerStyle: {
-        width: "100%",
-        height: 300
-      },
-      headerStyle: {},
-      tooltipStyle: {},
-      labelStyle: {
-        margin: { left: 80, bottom: 20 },
-        leftLabelOffset: 50,
-        bottomLabelOffset: 10
-      },
-      barStyle: {
-        color: {
-          firstBarColor: "#6c5efb",
-          secondBarColor: "#3f51b5"
-        }
-      },
-      legendStyle: {
-        legend: {
-          lineHeight: "0.9em",
-          fontSize: "8px",
-          fontFamily: "arial",
-          padding: "10px 10px",
-          width: "30%",
-          display: "flex",
-          justifyContent: "center",
-          border: "1px solid rgba(255, 255, 255, 0.3)",
-          borderRadius: " 8px",
-          marginRight: "auto"
-        },
-        legendTitle: {
-          fontSize: "10px",
-          marginBottom: "10px",
-          fontWeight: "100"
-        }
-      }
-    }
+    main: {},
+    style: { containerStyle: {} }
   }
 };
 const PieGraph = {
@@ -9453,36 +10139,9 @@ const PieGraph = {
   },
   config: {
     main: {
-      header: "Incentive Branch category wise",
-      type: "PieGraph",
-      bottomLabel: "Name of Employe",
-      leftLabel: "Value",
-      axisLeft: true,
-      axisBottom: true,
-      legendAvailable: true,
-      legend: {
-        labelColor: "green",
-        legendTitle: "Branches",
-        direction: "row",
-        align: "right"
-      }
+      type: "PieGraph"
     },
-    style: {
-      containerStyle: {
-        height: "340"
-      },
-      headerStyle: {},
-      tooltipStyle: {
-        backgroundColor: "black",
-        width: "80px"
-      },
-      labelStyle: {},
-      legendStyle: {
-        legend: {},
-        legendTitle: {}
-      },
-      pieStyle: {}
-    }
+    style: {}
   }
 };
 const LineGraph = {
@@ -9500,7 +10159,7 @@ const LineGraph = {
       leftLabel: "Incentive",
       gridHidden: true,
       numHidden: false,
-      tooltipDataKey: ["First", "Second", "Third"],
+      tooltipDataKey: ["MAMA New Project", "Second", "Third"],
       axisLeft: true,
       axisBottom: true,
       hideLeftAxisLine: false,
@@ -9529,29 +10188,9 @@ const HorizontalBarGraph = {
   },
   config: {
     main: {
-      header: " ",
-      type: "HorizontalBarGraph",
-      bottomLabel: " ",
-      leftLabel: "Value",
-      axisLeft: false,
-      axisBottom: true,
-      hideBottomTicks: false,
-      hideLeftTicks: false,
-      hideLeftAxisLine: true,
-      hideBottomAxisLine: false,
-      bottomAxisWidth: "10px"
+      type: "HorizontalBarGraph"
     },
-    style: {
-      containerStyle: {
-        width: "100%"
-      },
-      headerStyle: {},
-      tooltipStyle: {},
-      labelStyle: {},
-      barStyle: {
-        color: "#6c5efb"
-      }
-    }
+    style: {}
   }
 };
 const buildHorizontalBarGraph = (config, componentScope) => {
@@ -9569,7 +10208,11 @@ const buildHorizontalBarGraph = (config, componentScope) => {
     horizontalBarGraph.config.containerStyle.background = config.containerBackground;
   }
   if (config.height) {
-    horizontalBarGraph.config.style.containerStyle.height = config.height;
+    horizontalBarGraph.config.style = {
+      containerStyle: {
+        height: config.height
+      }
+    };
   }
   if (config.bottomLabel) {
     horizontalBarGraph.config.main.bottomLabel = config.bottomLabel;
@@ -9678,7 +10321,11 @@ const buildPieGraph = (config, componentScope) => {
     pieGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.height) {
-    pieGraph.config.style.containerStyle.height = config.height;
+    pieGraph.config.style = {
+      containerStyle: {
+        height: config.height
+      }
+    };
   }
   if (config.legendHide) {
     pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
@@ -9689,7 +10336,11 @@ const buildPieGraph = (config, componentScope) => {
     pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
   }
   if (config.pieArcColors) {
-    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+    pieGraph.config.style = {
+      pieStyle: {
+        colorRange: flatObjectValueInArray(config.pieArcColors)
+      }
+    };
   }
   return pieGraph;
 };
@@ -9699,16 +10350,13 @@ const buildStackbarGraph = (config, componentScope) => {
     barGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.legendHide) {
-    barGraph.config.main.legendAvailable = false;
+    barGraph.config.main.legendAvailable = config.legendHide;
   }
   barGraph.config.main.type = config.graphType;
   barGraph.config.main.header = config.heading;
   if (config.barColor) {
     barGraph.config.barStyle.color = config.barColor;
   }
-  if (config.containerBackground) {
-    barGraph.config.containerStyle.background = config.containerBackground;
-  }
   if (config.height) {
     barGraph.config.style.containerStyle.height = config.height;
   }
@@ -9771,7 +10419,8 @@ var WrapperSection = {
   config: {
     main: {
       rowSpacing: 3,
-      divider: true
+      divider: true,
+      label: "Default Label"
     },
     defaultStyle: true
   },
@@ -9782,7 +10431,7 @@ const buildWrapperSection = (config, componentScope) => {
   wrapper.scope = componentScope;
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
-  wrapper.config.main.isAccordion = config.isAccordion === "YES" ? true : false;
+  wrapper.config.main.isAccordion = config.isAccordion === "No" ? false : true;
   if (config.defaultStyle) {
     wrapper.config.defaultStyle = config.defaultStyle === "YES" ? true : false;
   }
@@ -9801,12 +10450,7 @@ var TextInputField = {
     widget: "InputField"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: ""
     },
@@ -9839,12 +10483,7 @@ var SelectInputField = {
     widget: "SelectInputField"
   },
   config: {
-    "layout": {
-      "xs": 11,
-      "sm": 11,
-      "md": 5.5,
-      "lg": 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "",
       type: "text",
@@ -9877,12 +10516,7 @@ var Button = {
     widget: "Button"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: 3,
     main: {
       name: "Compare",
       variant: "contained",
@@ -9892,7 +10526,7 @@ var Button = {
       styleDefault: false,
       icon: "",
       onClick: "onClick",
-      size: "small"
+      size: "medium"
     },
     style: {}
   }
@@ -9941,6 +10575,7 @@ var Table = {
   config: {
     main: {
       onMount: "onMount",
+      enableExpandAll: true,
       allRowData: [],
       downloadAllData: false,
       columns: {
@@ -9973,6 +10608,21 @@ const buildTable = (config, componentScope) => {
   if (config.lazyLoading) {
     table.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.enableRowMovement) {
+    table.config.main.enableRowMovement = config.enableRowMovement === "YES" ? true : false;
+  }
+  if (config.enableExpanding) {
+    table.config.main.enableExpanding = config.enableExpanding === "YES" ? true : false;
+  }
+  if (config.enableExpandAll) {
+    table.config.main.enableExpandAll = config.enableExpandAll === "YES" ? true : false;
+  }
+  if (config.paginateExpandedRows) {
+    table.config.main.paginateExpandedRows = config.paginateExpandedRows === "YES" ? true : false;
+  }
+  if (config.treeStructure) {
+    table.config.main.treeStructure = config.treeStructure === "YES" ? "flatTreeMap" : false;
+  }
   if (config.SelectionAvailable) {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
   }
@@ -10020,7 +10670,7 @@ const buildLazyLoadingTable = (config, componentScope) => {
   table.config.main.label = config.label;
   return table;
 };
-var Box = {
+const Box = {
   type: "Control",
   scope: "#/properties/emptyBox",
   options: {
@@ -10057,12 +10707,7 @@ const uploadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    "layout": {
-      "lg": 5.5,
-      "md": 5.5,
-      "sm": 11,
-      "xs": 11
-    }
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
   },
   "options": {
     "widget": "UploadFile"
@@ -10079,12 +10724,7 @@ const downloadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    "layout": {
-      "lg": 5.5,
-      "md": 5.5,
-      "sm": 11,
-      "xs": 11
-    }
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
   },
   "options": {
     "widget": "DownloadFile"
@@ -10135,16 +10775,14 @@ var Card = {
     main: {
       rowSpacing: 0.5
     },
-    style: {
-      wrapperStyle: {
-        position: "relative",
-        color: "white",
-        height: { xs: "120px", md: "160px" },
-        width: "100%",
-        textAlign: "left",
-        background: "#3f51b5",
-        borderRadius: "20px"
-      }
+    componentsBoxStyle: {
+      position: "relative",
+      color: "white",
+      height: { xs: "120px", md: "160px" },
+      width: "100%",
+      textAlign: "left",
+      background: "#3f51b5",
+      borderRadius: "20px"
     },
     layout: { xs: 12, sm: 12, md: 6, lg: 6 }
   },
@@ -10256,12 +10894,7 @@ var DateInputField = {
     widget: "DateInputField"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "",
       type: "date"
@@ -10275,12 +10908,7 @@ const DateTime = {
     widget: "DateTimeInputField"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "DateTime",
       type: "date"
@@ -10407,7 +11035,7 @@ var MultipleSelect = {
     widget: "MultipleSelect"
   },
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "",
       type: "text",
@@ -10440,7 +11068,7 @@ const buildBasicUiSchema = (config) => {
     pageName: config.name,
     name: config.name,
     accessorKey: config.name,
-    header: config.label || config.name,
+    heading: config.label || config.name,
     "elements": []
   };
 };
@@ -10573,7 +11201,7 @@ const RadioUiSchema = {
     widget: "RadioInputField"
   },
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "Enabled",
       options: ["YES", "NO"],
@@ -10597,11 +11225,11 @@ const buildRadio = (config, componentScope) => {
   return Radio;
 };
 const buildEmptyBox = (config, componentScope) => {
-  const EmptyBox2 = _.cloneDeep(emptyBox);
+  const EmptyBox = _.cloneDeep(emptyBox);
   if (config.layout) {
-    EmptyBox2.config.layout = createLayoutFormat(config.layout);
+    EmptyBox.config.layout = createLayoutFormat(config.layout);
   }
-  return EmptyBox2;
+  return EmptyBox;
 };
 const ArrayUiSchema = {
   type: "Control",
@@ -10682,7 +11310,7 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: 11.5,
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       required: false,
       onUpload: "onFileUpload",
@@ -10917,6 +11545,9 @@ const buildTreeMap = (config, componentScope) => {
   if (config.graphZoomWidth) {
     treMap.config.main.graphZoomWidth = config.graphZoomWidth;
   }
+  if (config.style) {
+    treMap.config.style = JSON.parse(config.style);
+  }
   return treMap;
 };
 let schema = {