impaktapps-ui-builder 0.0.382-alpha.6 → 0.0.382-alpha.61

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

@@ -45,16 +45,9 @@ const PageMasterUiSchema = (theme) => {
       {
         type: "WrapperLayout",
         config: {
-          main: {
-            label: "Page Template",
-            isAccordion: true
-          },
+          main: {},
           wrapperStyle: {
-            marginTop: "-6px",
-            marginBottom: "-8px"
-          },
-          componentsBoxStyle: {
-            marginLeft: "24px"
+            backgroundColor: theme.palette.background.default
           },
           defaultStyle: true
         },
@@ -102,226 +95,221 @@ const PageMasterUiSchema = (theme) => {
             config: {
               layout: { xs: 0, sm: 4 }
             }
-          }
-        ]
-      },
-      {
-        type: "TabLayout",
-        config: {
-          main: {
-            tabLabels: ["Components", "events"],
-            divider: true
           },
-          defaultStyle: true
-        },
-        elements: [
           {
-            type: "Control",
-            scope: "#/properties/elements",
-            options: {
-              widget: "Table"
-            },
+            type: "TabLayout",
             config: {
               main: {
-                headerIcons: {
-                  elements: [
-                    {
-                      widget: {
-                        type: "Control",
-                        scope: "#/properties/New_Record",
-                        options: {
-                          widget: "IconButton"
-                        },
-                        config: {
-                          main: {
-                            color: "info",
-                            onClick: "onAddClickHandler",
-                            size: "small",
-                            icon: "AddIcon",
-                            iconLabel: "Add New",
-                            styleDefault: true
-                          },
-                          style: {
-                            mt: "6px"
+                tabLabels: ["Components", "events"],
+                divider: true
+              },
+              defaultStyle: true
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/elements",
+                options: {
+                  widget: "Table"
+                },
+                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"
+                              }
+                            }
                           }
                         }
+                      ]
+                    },
+                    disableAction: true,
+                    disableSelection: true,
+                    enableDrag: true
+                  }
+                },
+                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",
+                          onClick: "Edit_Components",
+                          tooltipMessage: "Edit This Record"
+                        }
                       }
                     }
-                  ]
-                },
-                disableAction: true,
-                disableSelection: true,
-                enableDrag: true
-              }
-            },
-            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"
+                      },
+                      config: {
+                        main: {
+                          icon: "RejectIcon",
+                          color: "error",
+                          onClick: "Delete_Components",
+                          tooltipMessage: "Reject This Record"
+                        }
+                      }
                     }
                   }
-                }
+                ]
               },
               {
-                header: "Delete",
-                field: "Reject_Records",
-                flex: 1,
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/RejectButton",
-                  options: {
-                    widget: "IconButton"
+                type: "Control",
+                scope: "#/properties/events",
+                options: {
+                  widget: "Table"
+                },
+                config: {
+                  main: {
+                    headerIcons: {
+                      elements: [
+                        {
+                          widget: {
+                            type: "Control",
+                            scope: "#/properties/New_Record",
+                            options: {
+                              widget: "IconButton"
+                            },
+                            config: {
+                              main: {
+                                onClick: "eventAddHandler",
+                                size: "small",
+                                icon: "AddIcon",
+                                iconLabel: "Add New",
+                                styleDefault: true
+                              },
+                              style: {
+                                mt: "6px"
+                              }
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    disableAction: true,
+                    disableSelection: true,
+                    enableDrag: true
+                  }
+                },
+                elements: [
+                  {
+                    accessorKey: "eventType",
+                    header: "Event Type"
                   },
-                  config: {
-                    main: {
-                      icon: "RejectIcon",
-                      color: "error",
-                      onClick: "Delete_Components",
-                      tooltipMessage: "Reject This Record"
+                  {
+                    accessorKey: "Handler",
+                    header: "Handler"
+                  },
+                  {
+                    accessorKey: "Edit_Approve_Records",
+                    header: "Edit Widget",
+                    widget: {
+                      type: "Control",
+                      scope: "#/properties/Edit_Records",
+                      options: {
+                        widget: "IconButton"
+                      },
+                      config: {
+                        main: {
+                          size: "small",
+                          icon: "EditIcon",
+                          tooltipMessage: "Edit This Record",
+                          onClick: "editEvent"
+                        },
+                        style: {
+                          color: "#3949ab"
+                        }
+                      }
+                    }
+                  },
+                  {
+                    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"
+                        }
+                      }
                     }
                   }
-                }
+                ]
               }
             ]
           },
           {
             type: "Control",
-            scope: "#/properties/events",
+            scope: "#/properties/btn",
             options: {
-              widget: "Table"
+              widget: "Button"
             },
             config: {
+              layout: 11.9,
               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"
-                          }
-                        }
-                      }
-                    }
-                  ]
-                },
-                disableAction: true,
-                disableSelection: true,
-                enableDrag: true
-              }
-            },
-            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"
-                  },
-                  config: {
-                    main: {
-                      color: "info",
-                      size: "small",
-                      icon: "EditIcon",
-                      tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
-                    },
-                    style: {
-                      color: "#3949ab"
-                    }
-                  }
-                }
+                name: "Save",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium"
               },
-              {
-                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"
-                    }
-                  }
-                }
+              style: {
+                width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
+                float: "right"
               }
-            ]
+            }
           }
         ]
       },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
-        },
-        config: {
-          layout: 11.9,
-          main: {
-            name: "Save",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            color: "info",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
-          },
-          style: {
-            width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
-            float: "right"
-          }
-        }
-      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -333,25 +321,14 @@ const PageMasterUiSchema = (theme) => {
       {
         type: "HorizontalLayout",
         config: {
+          layout: 12,
           style: {
-            position: "fixed",
+            position: "absolute",
             bottom: 5,
-            overflow: "visible",
-            margin: "0",
-            width: "100vw"
+            overflow: "hidden"
           }
         },
         elements: [
-          {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
-            config: {
-              layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-            }
-          },
           {
             type: "Control",
             scope: "#/properties/FooterText",
@@ -359,20 +336,22 @@ const PageMasterUiSchema = (theme) => {
               widget: "Box"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: 9.5,
               main: {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
                 color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px"
+                fontSize: "12px",
+                textAlign: "center"
               }
             }
           },
           {
             type: "HorizontalLayout",
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 }
+              layout: 2.5,
+              style: {}
             },
             elements: [
               {
@@ -382,7 +361,10 @@ const PageMasterUiSchema = (theme) => {
                   widget: "EmptyBox"
                 },
                 config: {
-                  layout: 2
+                  layout: 6,
+                  style: {
+                    flexGrow: 1
+                  }
                 }
               },
               {
@@ -398,14 +380,17 @@ const PageMasterUiSchema = (theme) => {
                     onClick: "backHandler"
                   },
                   style: {
-                    fill: theme.palette.primary.dark,
+                    fill: theme.palette.primary.main,
                     width: 20,
                     height: 20,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     marginRight: "-8px",
-                    cursor: "pointer"
+                    cursor: "pointer",
+                    ":hover": {
+                      fill: theme.palette.primary.dark
+                    }
                   }
                 }
               },
@@ -416,16 +401,21 @@ const PageMasterUiSchema = (theme) => {
                   widget: "Box"
                 },
                 config: {
-                  layout: 9,
+                  layout: 5,
                   main: {
                     heading: "Previous Page",
                     onClick: "backHandler"
                   },
                   style: {
-                    color: theme.palette.primary.dark,
+                    width: "fit-content",
+                    color: theme.palette.primary.main,
                     fontSize: "12px",
                     cursor: "pointer",
-                    marginLeft: "-6px"
+                    marginLeft: "2px",
+                    marginRight: 0,
+                    ":hover": {
+                      color: theme.palette.primary.dark
+                    }
                   }
                 }
               }
@@ -6288,6 +6278,26 @@ const componentBasicUiSchema = (theme) => {
           }
         ]
       },
+      {
+        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/btn",
@@ -6295,23 +6305,16 @@ const componentBasicUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: {
-            xs: 11,
-            sm: 11,
-            md: 2.5,
-            lg: 2.5
-          },
+          layout: 1.8,
           main: {
             name: "Ok",
             startIcon: "ApproveIcon",
             variant: "contained",
-            color: "info",
             type: "text",
             onClick: "okHandler",
-            size: "small"
+            size: "medium"
           },
           style: {
-            marginBottom: "8px",
             float: "right"
           }
         }
@@ -6323,23 +6326,16 @@ const componentBasicUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: {
-            xs: 11,
-            sm: 11,
-            md: 2.5,
-            lg: 2.5
-          },
+          layout: 1.8,
           main: {
             name: "Save & Exit",
             startIcon: "ApproveIcon",
             variant: "contained",
-            color: "info",
             type: "text",
             onClick: "saveHandler",
-            size: "small"
+            size: "medium"
           },
           style: {
-            marginBottom: "8px",
             float: "right"
           }
         }
@@ -6355,25 +6351,14 @@ const componentBasicUiSchema = (theme) => {
       {
         type: "HorizontalLayout",
         config: {
+          layout: 12,
           style: {
-            position: "fixed",
+            position: "absolute",
             bottom: 5,
-            overflow: "visible",
-            margin: "0",
-            width: "100vw"
+            overflow: "hidden"
           }
         },
         elements: [
-          {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
-            config: {
-              layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-            }
-          },
           {
             type: "Control",
             scope: "#/properties/FooterText",
@@ -6381,20 +6366,22 @@ const componentBasicUiSchema = (theme) => {
               widget: "Box"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: 9.5,
               main: {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
                 color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px"
+                fontSize: "12px",
+                textAlign: "center"
               }
             }
           },
           {
             type: "HorizontalLayout",
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 }
+              layout: 2.5,
+              style: {}
             },
             elements: [
               {
@@ -6404,7 +6391,10 @@ const componentBasicUiSchema = (theme) => {
                   widget: "EmptyBox"
                 },
                 config: {
-                  layout: 2
+                  layout: 6,
+                  style: {
+                    flexGrow: 1
+                  }
                 }
               },
               {
@@ -6420,14 +6410,17 @@ const componentBasicUiSchema = (theme) => {
                     onClick: "backHandler"
                   },
                   style: {
-                    fill: theme.palette.primary.dark,
+                    fill: theme.palette.primary.main,
                     width: 20,
                     height: 20,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     marginRight: "-8px",
-                    cursor: "pointer"
+                    cursor: "pointer",
+                    ":hover": {
+                      fill: theme.palette.primary.dark
+                    }
                   }
                 }
               },
@@ -6438,16 +6431,21 @@ const componentBasicUiSchema = (theme) => {
                   widget: "Box"
                 },
                 config: {
-                  layout: 9,
+                  layout: 5,
                   main: {
                     heading: "Previous Page",
                     onClick: "backHandler"
                   },
                   style: {
-                    color: theme.palette.primary.dark,
+                    width: "fit-content",
+                    color: theme.palette.primary.main,
                     fontSize: "12px",
                     cursor: "pointer",
-                    marginLeft: "-6px"
+                    marginLeft: "2px",
+                    marginRight: 0,
+                    ":hover": {
+                      color: theme.palette.primary.dark
+                    }
                   }
                 }
               }
@@ -6469,7 +6467,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"
@@ -6483,12 +6481,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"
         }
@@ -6501,31 +6494,16 @@ 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"
         }
       }
     },
-    {
-      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,
+      layout: 12,
       options: {
         "elementLabelProp": "key",
         detail: {
@@ -6538,12 +6516,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"
                 }
@@ -6556,12 +6529,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",
@@ -6569,6 +6537,16 @@ const CoreSection = {
                   errorMessage: "Number Can't be greater than 12 and can't be less than 0."
                 }
               }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4 }
+              }
             }
           ]
         }
@@ -6580,121 +6558,95 @@ const EventSection = {
   type: "HorizontalLayout",
   elements: [
     {
-      type: "WrapperLayout",
+      type: "Control",
+      scope: "#/properties/events",
+      options: {
+        widget: "Table"
+      },
       config: {
         main: {
-          divider: true
-        },
-        wrapperStyle: {
-          border: "1px solid gray"
+          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"
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          disableAction: true,
+          disableSelection: true,
+          enableDrag: true
         }
       },
       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"
-            }
-          }
+          accessorKey: "eventType",
+          header: "Event Type"
         },
         {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
-          },
-          config: {
-            layout: 3,
-            main: {
-              icon: "AddIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "eventAddHandler",
-              tooltipMessage: "Back"
+          accessorKey: "Handler",
+          header: "Handler"
+        },
+        {
+          accessorKey: "Edit_Approve_Records",
+          header: "Edit Widget",
+          widget: {
+            type: "Control",
+            scope: "#/properties/Edit_Records",
+            options: {
+              widget: "IconButton"
             },
-            style: {
-              float: "right"
+            config: {
+              main: {
+                color: "info",
+                size: "small",
+                icon: "EditIcon",
+                tooltipMessage: "Edit This Record",
+                onClick: "eventEditHandler"
+              },
+              style: {
+                color: "#3949ab"
+              }
             }
           }
         },
         {
-          type: "Control",
-          scope: "#/properties/events",
-          options: {
-            widget: "Table"
-          },
-          config: {
-            main: {
-              disableAction: true,
-              disableSelection: true,
-              enableDrag: true
-            }
-          },
-          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"
-                },
-                config: {
-                  main: {
-                    color: "info",
-                    size: "small",
-                    icon: "EditIcon",
-                    tooltipMessage: "Edit This Record",
-                    onClick: "eventEditHandler"
-                  },
-                  style: {
-                    color: "#3949ab"
-                  }
-                }
-              }
+          accessorKey: "Reject_Records",
+          header: "Delete",
+          widget: {
+            type: "Control",
+            scope: "#/properties/RejectButton",
+            accessorKeyName: "Reject_Records",
+            options: {
+              widget: "IconButton"
             },
-            {
-              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"
-                  }
-                }
+            config: {
+              main: {
+                icon: "RejectIcon",
+                color: "error",
+                tooltipMessage: "Reject This Record",
+                onClick: "deleteEvent"
               }
             }
-          ]
+          }
         }
       ]
     }
@@ -6707,12 +6659,7 @@ const EmptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
     main: {}
   }
 };
@@ -6731,12 +6678,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"
             }
@@ -6749,12 +6691,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",
@@ -6762,7 +6699,8 @@ const cardLayout = {
               errorMessage: "Number Can't be greater than 12 and can't be less than 0."
             }
           }
-        }
+        },
+        EmptyBox
       ]
     }
   }
@@ -6784,17 +6722,13 @@ 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
         ]
       }
@@ -6809,12 +6743,7 @@ 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"
     }
@@ -6828,12 +6757,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
       }
@@ -6848,12 +6772,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
@@ -6896,7 +6815,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"
@@ -6917,6 +6836,8 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        EmptyBox,
+        EmptyBox,
         cardLayout
       ];
       break;
@@ -6927,6 +6848,7 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
+        EmptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6942,12 +6864,14 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         EmptyBox,
+        EmptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
+        EmptyBox,
         EmptyBox
       ];
       break;
@@ -6957,7 +6881,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":
@@ -6965,7 +6890,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":
@@ -6974,6 +6901,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;
@@ -6989,7 +6918,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":
@@ -7023,7 +6954,7 @@ const buildPropertiesSection = function(type) {
       ];
       break;
     case "WrapperSection":
-      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox];
+      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), getRadioInputField("isAccordion", "Accordion", ["YES", "No"]), EmptyBox];
       break;
     case "TabSection":
       uiSchema.elements = [
@@ -7051,12 +6982,14 @@ 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
       ];
       break;
@@ -7102,116 +7035,92 @@ const TableSection = {
   type: "HorizontalLayout",
   elements: [
     {
-      type: "WrapperLayout",
+      type: "Control",
+      scope: "#/properties/elements",
+      options: {
+        widget: "Table"
+      },
       config: {
-        main: {},
-        wrapperStyle: {
-          border: "1px solid gray"
+        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"
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          disableAction: true,
+          disableSelection: true,
+          enableDrag: true
         }
       },
       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"
-            }
-          }
+          accessorKey: "name",
+          header: "Name"
         },
         {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
-          },
-          config: {
-            layout: 3,
-            main: {
-              icon: "AddIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "widgetAddClickHandler",
-              tooltipMessage: "Add New"
+          accessorKey: "type",
+          header: "Type"
+        },
+        {
+          header: "Edit Record",
+          field: "Reject_Records",
+          flex: 1,
+          widget: {
+            type: "Control",
+            scope: "#/properties/RejectButton",
+            options: {
+              widget: "IconButton"
             },
-            style: {
-              float: "right"
+            config: {
+              main: {
+                icon: "EditIcon",
+                color: "primary",
+                onClick: "editComponents",
+                tooltipMessage: "Reject This Record"
+              }
             }
           }
         },
         {
-          type: "Control",
-          scope: "#/properties/elements",
-          options: {
-            widget: "Table"
-          },
-          config: {
-            main: {
-              disableAction: true,
-              disableSelection: true,
-              enableDrag: true
-            }
-          },
-          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"
-                },
-                config: {
-                  main: {
-                    icon: "EditIcon",
-                    color: "primary",
-                    onClick: "editComponents",
-                    tooltipMessage: "Reject This Record"
-                  }
-                }
-              }
+          header: "Delete",
+          field: "Reject_Records",
+          flex: 1,
+          widget: {
+            type: "Control",
+            scope: "#/properties/RejectButton",
+            options: {
+              widget: "IconButton"
             },
-            {
-              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"
-                  }
-                }
+            config: {
+              main: {
+                icon: "RejectIcon",
+                color: "error",
+                onClick: "deleteComponents",
+                tooltipMessage: "Reject This Record"
               }
             }
-          ]
+          }
         }
       ]
     }
@@ -7235,12 +7144,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"
                 }
@@ -7253,16 +7157,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 }
+              }
             }
           ]
         }
@@ -7289,12 +7198,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"
                 }
@@ -7307,16 +7211,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 }
+              }
             }
           ]
         }
@@ -7510,8 +7419,8 @@ const refreshPage = (type, store2) => {
       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[0].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
+    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7768,334 +7677,387 @@ const EventSchema = {
   },
   required: ["eventType", "Handler"]
 };
-const EventUiSchema = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "WrapperLayout",
-      config: {
-        main: {
-          rowSpacing: 1,
-          header: true
+const EventUiSchema = (theme) => {
+  var _a;
+  const uiSchema = {
+    type: "HorizontalLayout",
+    heading: "Component",
+    elements: [
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Core", "Response Event"],
+            defaultStyle: true,
+            id: "event"
+          }
         },
-        defaultStyle: true
-      },
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/Component",
-          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"
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: `#/properties/Handler`,
+                options: {
+                  widget: "SelectInputField"
+                },
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Handler",
+                    type: "text"
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/emptyBox",
+                options: {
+                  widget: "EmptyBox"
+                },
+                config: {
+                  layout: { xs: 0, sm: 4 }
+                }
+              }
+            ]
           },
-          config: {
-            layout: { xs: 12, sm: 12, md: 2 },
-            main: {
-              heading: "Component"
+          {
+            type: "Control",
+            scope: "#/properties/events",
+            options: {
+              widget: "Table"
             },
-            style: {
-              "float": "left"
-            }
+            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"
+                          }
+                        }
+                      }
+                    }
+                  ]
+                },
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true
+              }
+            },
+            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"
+                  },
+                  config: {
+                    main: {
+                      size: "small",
+                      icon: "EditIcon",
+                      tooltipMessage: "Edit This Record",
+                      onClick: "editEvent"
+                    },
+                    style: {
+                      color: "#3949ab"
+                    }
+                  }
+                }
+              },
+              {
+                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"
+                    }
+                  }
+                }
+              }
+            ]
           }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/EmptyBox",
+        options: {
+          widget: "EmptyBox"
         },
-        {
-          type: "Control",
-          scope: "#/properties/pageName",
-          options: {
-            widget: "Box"
+        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/btn",
+        options: {
+          widget: "Button"
+        },
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Ok",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "okHandler",
+            size: "medium"
           },
-          config: {
-            layout: { xs: 7, sm: 7, md: 9 },
-            main: {
-              heading: " "
-            },
-            style: {
-              float: "right",
-              width: "auto",
-              fontSize: "12px",
-              color: "gray",
-              paddingTop: "10px"
-            }
+          style: {
+            float: "right"
           }
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btnSubmit",
+        options: {
+          widget: "Button"
         },
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-          options: {
-            widget: "IconButton"
+        config: {
+          layout: 1.8,
+          main: {
+            name: "Save & Exit",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "saveHandler",
+            size: "medium"
           },
-          config: {
-            layout: { xs: 2, sm: 2, md: 0.5 },
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back"
-            },
-            style: {
-              float: "right"
-            }
+          style: {
+            float: "right"
           }
         }
-      ]
-    },
-    {
-      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: "Control",
+        scope: "#/properties/notify",
+        options: {
+          widget: "Notify"
         },
-        {
-          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: "Response Event"
-                },
-                style: {
-                  fontFamily: "Roboto",
-                  fontWeight: "500",
-                  paddingLeft: "-10px",
-                  fontSize: "20px"
-                }
-              }
+        layout: 6
+      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout: 12,
+          style: {
+            position: "absolute",
+            bottom: 5,
+            overflow: "hidden"
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/FooterText",
+            options: {
+              widget: "Box"
             },
-            {
-              type: "Control",
-              scope: "#/properties/AddButton",
-              options: {
-                widget: "IconButton"
+            config: {
+              layout: 9.5,
+              main: {
+                heading: "Copywriter@ACT21.IO"
               },
-              config: {
-                layout: 3,
-                main: {
-                  icon: "AddIcon",
-                  styleDefault: true,
-                  size: "small",
-                  onClick: "addEvent",
-                  tooltipMessage: "Back"
-                },
-                style: {
-                  float: "right"
-                }
+              style: {
+                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
+                fontSize: "12px",
+                textAlign: "center"
               }
+            }
+          },
+          {
+            type: "HorizontalLayout",
+            config: {
+              layout: 2.5,
+              style: {}
             },
-            {
-              type: "Control",
-              scope: "#/properties/events",
-              options: {
-                widget: "Table"
-              },
-              config: {
-                main: {
-                  disableAction: true,
-                  disableSelection: true,
-                  enableDrag: true
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/EmptyBox",
+                options: {
+                  widget: "EmptyBox"
+                },
+                config: {
+                  layout: 6,
+                  style: {
+                    flexGrow: 1
+                  }
                 }
               },
-              elements: [
-                {
-                  accessorKey: "eventType",
-                  header: "Event Type"
-                },
-                {
-                  accessorKey: "Handler",
-                  header: "Handler"
+              {
+                type: "Control",
+                scope: "#/properties/backIcon",
+                options: {
+                  widget: "Box"
                 },
-                {
-                  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"
-                      },
-                      style: {
-                        color: "#3949ab"
-                      }
+                config: {
+                  layout: 1,
+                  main: {
+                    iconName: "PrevIcon",
+                    onClick: "backHandler"
+                  },
+                  style: {
+                    fill: theme.palette.primary.main,
+                    width: 20,
+                    height: 20,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginRight: "-8px",
+                    cursor: "pointer",
+                    ":hover": {
+                      fill: theme.palette.primary.dark
                     }
                   }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/text",
+                options: {
+                  widget: "Box"
                 },
-                {
-                  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"
-                      }
+                config: {
+                  layout: 5,
+                  main: {
+                    heading: "Previous Page",
+                    onClick: "backHandler"
+                  },
+                  style: {
+                    width: "fit-content",
+                    color: theme.palette.primary.main,
+                    fontSize: "12px",
+                    cursor: "pointer",
+                    marginLeft: "2px",
+                    marginRight: 0,
+                    ":hover": {
+                      color: theme.palette.primary.dark
                     }
                   }
                 }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
-      },
-      options: {
-        widget: "EmptyBox"
+              }
+            ]
+          }
+        ]
       }
-    },
+    ]
+  };
+  return uiSchema;
+};
+const APISection = {
+  type: "HorizontalLayout",
+  elements: [
     {
       type: "Control",
-      scope: "#/properties/btn",
+      scope: "#/properties/method",
       options: {
-        widget: "Button"
+        widget: "SelectInputField"
       },
       config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "small"
-        },
-        style: {
-          marginBottom: "8px",
-          float: "right"
+          label: "Method",
+          type: "text"
         }
       }
     },
     {
       type: "Control",
-      scope: "#/properties/btnSubmit",
+      scope: "#/properties/path",
       options: {
-        widget: "Button"
+        widget: "InputField"
       },
       config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          color: "info",
+          label: "Path",
           type: "text",
-          onClick: "saveHandler",
-          size: "small"
-        },
-        style: {
-          marginBottom: "8px",
-          float: "right"
+          multiple: false,
+          options: []
         }
       }
     },
     {
       type: "Control",
-      scope: "#/properties/notify",
-      options: {
-        widget: "Notify"
-      },
-      layout: 6
-    }
-  ]
-};
-const APISection = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/method",
+      scope: "#/properties/emptyBox",
       options: {
-        widget: "SelectInputField"
+        widget: "EmptyBox"
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-        main: {
-          label: "Method",
-          type: "text"
-        }
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
       }
     },
     {
       type: "Control",
-      scope: "#/properties/path",
+      scope: "#/properties/emptyBox",
       options: {
-        widget: "InputField"
+        widget: "EmptyBox"
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
-        main: {
-          label: "Path",
-          type: "text",
-          multiple: false,
-          options: []
-        }
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
       }
     },
     {
@@ -8114,12 +8076,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"
                 }
@@ -8132,16 +8089,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 }
+              }
             }
           ]
         }
@@ -8163,12 +8125,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"
                 }
@@ -8181,16 +8138,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 }
+              }
             }
           ]
         }
@@ -8217,12 +8179,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"
                 }
@@ -8235,12 +8192,7 @@ 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: {}
               }
             }
@@ -8260,21 +8212,21 @@ var event = (store2, dynamicData2, submitHandler, service2) => {
       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] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[0].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[0].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[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
+          uiSchema.elements[0].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, 12);
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
+          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
           schema2.required = ["eventType", "Handler", "refreshElements"];
@@ -8284,8 +8236,8 @@ var event = (store2, dynamicData2, submitHandler, service2) => {
       store22.setUiSchema(uiSchema);
     },
     getFormData: Component(store2, dynamicData2, submitHandler, service2).getFormdata,
-    getUiSchema: function() {
-      return EventUiSchema;
+    getUiSchema: async function() {
+      return await EventUiSchema(store2.theme.myTheme);
     },
     getSchema: () => {
       return EventSchema;
@@ -8691,11 +8643,13 @@ var service = (funcParams) => {
       }
     },
     onChange: async function() {
+      var _a, _b;
       if (eventGroups.onChange) {
+        (_a = funcParams.dynamicData) == null ? void 0 : _a.setLoading(true);
         const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
         Promise.all(ChangeEventsKeysArray.map(async (componentName) => {
-          var _a, _b;
-          if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) !== funcParams.store.newData[componentName] && ((_b = funcParams.store) == null ? void 0 : _b.newData[componentName]) !== void 0) {
+          var _a2, _b2;
+          if (((_a2 = funcParams.store) == null ? void 0 : _a2.formData[componentName]) !== funcParams.store.newData[componentName] && ((_b2 = funcParams.store) == null ? void 0 : _b2.newData[componentName]) !== void 0) {
             for (const eventConfig of eventGroups.onChange[componentName]) {
               await executeEvents({
                 ...executeEventsParameters,
@@ -8705,6 +8659,7 @@ var service = (funcParams) => {
             }
           }
         }));
+        (_b = funcParams.dynamicData) == null ? void 0 : _b.setLoading(false);
       }
     },
     updateConfigApiBody: async function(paramValue, apiBody) {
@@ -8747,6 +8702,9 @@ var service = (funcParams) => {
         functionParameters == null ? void 0 : functionParameters.handleNext();
       }
     },
+    backHandler: () => {
+      funcParams.store.navigate(-1);
+    },
     onReset: async function(functionParameters) {
       var _a, _b;
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
@@ -9205,62 +9163,7 @@ 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: {}
   }
 };
 const PieGraph = {
@@ -9271,35 +9174,7 @@ 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"
-      }
-    },
-    style: {
-      containerStyle: {
-        height: "340"
-      },
-      headerStyle: {},
-      tooltipStyle: {
-        backgroundColor: "black",
-        width: "80px"
-      },
-      labelStyle: {},
-      legendStyle: {
-        legend: {},
-        legendTitle: {}
-      },
-      pieStyle: {}
+      type: "PieGraph"
     }
   }
 };
@@ -9347,28 +9222,7 @@ const HorizontalBarGraph = {
   },
   config: {
     main: {
-      header: " ",
-      type: "HorizontalBarGraph",
-      bottomLabel: " ",
-      leftLabel: "Value",
-      axisLeft: false,
-      axisBottom: true,
-      hideBottomTicks: false,
-      hideLeftTicks: false,
-      hideLeftAxisLine: true,
-      hideBottomAxisLine: false,
-      bottomAxisWidth: "10px"
-    },
-    style: {
-      containerStyle: {
-        width: "100%"
-      },
-      headerStyle: {},
-      tooltipStyle: {},
-      labelStyle: {},
-      barStyle: {
-        color: "#6c5efb"
-      }
+      type: "HorizontalBarGraph"
     }
   }
 };
@@ -9387,7 +9241,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;
@@ -9496,7 +9354,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;
@@ -9507,7 +9369,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;
 };
@@ -9517,16 +9383,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;
   }
@@ -9536,7 +9399,6 @@ const buildStackbarGraph = (config, componentScope) => {
   if (config.leftLabel) {
     barGraph.config.main.leftLabel = config.leftLabel;
   }
-  barGraph.scope = componentScope;
   return barGraph;
 };
 var RunnerBoyProgressBar = {
@@ -9590,8 +9452,10 @@ var WrapperSection = {
 };
 const buildWrapperSection = (config, componentScope) => {
   const wrapper = _.cloneDeep(WrapperSection);
+  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;
   if (config.style) {
     wrapper.config.style = JSON.parse(config.style);
   }
@@ -9607,12 +9471,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: ""
     },
@@ -9645,12 +9504,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",
@@ -9939,16 +9793,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 }
   },
@@ -10060,12 +9912,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"
@@ -10182,7 +10029,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",
@@ -10213,6 +10060,7 @@ const buildBasicUiSchema = (config) => {
   return {
     "type": "HorizontalLayout",
     pageName: `${config.name}`,
+    heading: `${config.label}`,
     "elements": []
   };
 };
@@ -10369,7 +10217,7 @@ var emptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: { xs: 12, sm: 12, md: 5.5, lg: 5.5 },
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
     main: {},
     style: {}
   }
@@ -10748,7 +10596,7 @@ const buildUiSchema = (config) => {
       elements = RunnerBoyProgressbar(config, componentScope);
       break;
     case "WrapperSection":
-      elements = buildWrapperSection(config);
+      elements = buildWrapperSection(config, componentScope);
       break;
     case "Text":
       elements = buildTextField(config, componentScope);
@@ -10799,7 +10647,7 @@ const buildUiSchema = (config) => {
       switch (config.graphType) {
         case "BarGraph":
         case "StackBarGraph":
-          elements = buildStackbarGraph(config, componentScope);
+          elements = buildStackbarGraph(config);
           break;
         case "LineGraph":
           elements = buildLineGraph(config, componentScope);