impaktapps-ui-builder 0.0.101-alpha.3 → 0.0.101-alpha.31

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

@@ -116,7 +116,6 @@ const PageMasterUiSchema = (theme) => {
             tabLabels: ["Page Components", "Page Events"]
           },
           style: {
-            marginTop: "-16px",
             TabPanelStyle: {
               padding: 0
             }
@@ -129,6 +128,9 @@ const PageMasterUiSchema = (theme) => {
             "& .MuiTabs-indicator": {
               bottom: "6px"
             }
+          },
+          TabContainerStyle: {
+            marginTop: "-16px"
           }
         },
         elements: [
@@ -180,7 +182,7 @@ const PageMasterUiSchema = (theme) => {
                           main: {
                             onClick: "copyPasteElement",
                             size: "small",
-                            icon: "TablePasteIcon",
+                            icon: "TablePaste",
                             iconLabel: "Paste",
                             styleDefault: true
                           },
@@ -337,7 +339,7 @@ const PageMasterUiSchema = (theme) => {
                           main: {
                             onClick: "copyPasteElement",
                             size: "small",
-                            icon: "TablePasteIcon",
+                            icon: "TablePaste",
                             iconLabel: "Paste",
                             styleDefault: true
                           },
@@ -363,19 +365,19 @@ const PageMasterUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "eventType",
-                header: "Event Type",
+                header: "Event's Type",
                 size: 300,
                 type: "string"
               },
               {
                 accessorKey: "Handler",
                 header: "Handler",
-                size: 300,
+                size: 200,
                 type: "string"
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
                 type: "action",
                 size: 150,
                 widget: {
@@ -403,6 +405,8 @@ const PageMasterUiSchema = (theme) => {
               {
                 accessorKey: "Reject_Records",
                 header: "Delete",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/RejectButton",
@@ -427,7 +431,8 @@ const PageMasterUiSchema = (theme) => {
               {
                 header: "Copy",
                 field: "Copy_Event",
-                flex: 1,
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
@@ -448,32 +453,48 @@ const PageMasterUiSchema = (theme) => {
         ]
       },
       {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
-        },
+        scope: "#/properties/Remarks Container",
+        type: "WrapperLayout",
         config: {
-          layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+          layout: 12,
           main: {
-            name: "Save",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
+            divider: false,
+            rowSpacing: 0,
+            gap: 0
+          },
+          componentsBoxStyle: {
+            padding: "8px 8px 8px 24px"
           }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        config: {
-          layout: { xs: 8, sm: 9.5, md: 10, lg: 10.5 }
         },
-        options: {
-          widget: "EmptyBox"
-        }
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/btn",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+              main: {
+                name: "Save",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 8, sm: 9.5, md: 10, lg: 10.5 }
+            },
+            options: {
+              widget: "EmptyBox"
+            }
+          }
+        ]
       },
       {
         type: "Control",
@@ -6222,44 +6243,44 @@ const ComponentSchema = {
   properties: {
     type: {
       oneOf: [
-        { title: "AadharcardText", const: "AadharcardText" },
+        { title: "Masked Aadhaar", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
-        { title: "Card", const: "card" },
-        { title: "CheckBox", const: "CheckBox" },
+        { title: "Data Card", const: "card" },
+        { title: "Check Box", const: "CheckBox" },
         { title: "Container", const: "WrapperSection" },
-        { title: "DataGrid", const: "DataGrid" },
+        { title: "Data Grid", const: "DataGrid" },
         { title: "Date", const: "Date" },
-        { title: "DateTime", const: "DateTime" },
-        { title: "Download File", const: "DownloadFile" },
+        { title: "Time Stamp", const: "DateTime" },
+        { title: "Download", const: "DownloadFile" },
         { title: "Empty Box", const: "EmptyBox" },
-        { title: "File", const: "FileInput" },
+        { title: "File Handler", const: "FileInput" },
         { title: "Graph", const: "Graph" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
-        { title: "LeaderBoard", const: "LeaderBoard" },
-        { title: "MultipleSelect", const: "MultipleSelect" },
-        { title: "PanCardText", const: "PanCardText" },
-        { title: "Popup Container", const: "PopUp" },
-        { title: "ProgressBar", const: "ProgressBar" },
-        { title: "ProgressBar Card", const: "ProgressBarCard" },
-        { title: "Select", const: "Select" },
+        { title: "Leaderboard", const: "LeaderBoard" },
+        { title: "Multi-Select Dropdown", const: "MultipleSelect" },
+        { title: "Pan Card Masked", const: "PanCardText" },
+        { title: "Pop Up", const: "PopUp" },
+        { title: "Progress Bar", const: "ProgressBar" },
+        { title: "Progress Bar Card", const: "ProgressBarCard" },
+        { title: "Dropdown", const: "Select" },
         { title: "Slider", const: "Slider" },
-        { title: "SpeedoMeter", const: "SpeedoMeter" },
+        { title: "Speedometer", const: "SpeedoMeter" },
         { title: "Stepper Container", const: "Stepper" },
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
-        { title: "Runner Boy Progress Bar", const: "RunnerBoyProgressBar" },
+        { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
         { title: "Text", const: "Text" },
         { title: "Text Area", const: "TextArea" },
         { title: "Timer", const: "Timer" },
-        { title: "Upload File", const: "UploadFile" },
-        { title: "TreeMap", const: "TreeMap" },
-        { title: "ColumnGroup", const: "ColumnGroup" },
-        { title: "Thought of the Day", const: "Thought" },
+        { title: "Upload", const: "UploadFile" },
+        { title: "Tree ", const: "TreeMap" },
+        { title: "Column Group", const: "ColumnGroup" },
+        { title: "Thought of the day", const: "Thought" },
         { title: "Pdf Viewer", const: "PdfViewer" }
       ]
     },
@@ -6557,42 +6578,41 @@ const ComponentSchema = {
   required: ["name"]
 };
 const componentBasicUiSchema = (theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a;
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Component",
+    heading: "Page-Component",
     elements: [
-      {
-        type: "Control",
-        scope: "#/properties/pageName",
-        options: {
-          widget: "Box"
-        },
-        config: {
-          layout: 12,
-          main: {
-            heading: " "
-          },
-          style: {
-            marginLeft: theme.spacing(3),
-            width: "auto",
-            fontSize: "12px",
-            color: "gray"
-          }
-        }
-      },
       {
         type: "TabLayout",
         config: {
           main: {
             tabLabels: ["Core"],
-            defaultStyle: true,
             id: `component`
+          },
+          style: {
+            TabPanelStyle: {
+              padding: 0
+            }
+          },
+          TabsStyle: {
+            marginBottom: "3px",
+            paddingBottom: "4px",
+            boxShadow: "0px 3px 4px #afafaf80",
+            "& .MuiTabs-indicator": {
+              bottom: "6px"
+            }
           }
         },
         elements: [
           {
-            type: "HorizontalLayout",
+            type: "WrapperLayout",
+            config: {
+              main: {
+                label: " ",
+                gap: "8px"
+              }
+            },
             elements: [
               {
                 type: "Control",
@@ -6601,12 +6621,22 @@ const componentBasicUiSchema = (theme) => {
                   widget: "SelectInputField"
                 },
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 3 },
                   main: {
                     label: "Type"
                   }
                 }
               },
+              {
+                type: "Control",
+                scope: "#/properties/proc",
+                config: {
+                  layout: { xs: 6, sm: 0, md: 0, lg: 0 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
               {
                 type: "Control",
                 scope: "#/properties/name",
@@ -6614,11 +6644,9 @@ const componentBasicUiSchema = (theme) => {
                   widget: "InputField"
                 },
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  layout: { xs: 12, sm: 6, md: 4, lg: 3 },
                   main: {
-                    label: "Name",
-                    options: [],
-                    color: "secondary",
+                    label: "Component ID",
                     required: true
                   }
                 }
@@ -6630,7 +6658,7 @@ const componentBasicUiSchema = (theme) => {
                   widget: "InputField"
                 },
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 3 },
                   main: {
                     label: "Label",
                     options: [],
@@ -6639,34 +6667,11 @@ const componentBasicUiSchema = (theme) => {
                   }
                 }
               },
-              {
-                type: "Control",
-                scope: "#/properties/columnFormat",
-                options: {
-                  widget: "SelectInputField"
-                },
-                config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                  main: {
-                    label: "Column Format"
-                  }
-                }
-              },
               {
                 type: "Control",
                 scope: "#/properties/proc",
                 config: {
-                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-                },
-                options: {
-                  widget: "EmptyBox"
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/proc",
-                config: {
-                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                  layout: { xs: 6, sm: 6, md: 0, lg: 3 }
                 },
                 options: {
                   widget: "EmptyBox"
@@ -6675,150 +6680,126 @@ const componentBasicUiSchema = (theme) => {
               {
                 type: "Control",
                 scope: "#/properties/layout",
-                layout: 12,
                 options: {
-                  detail: {
-                    type: "HorizontalLayout",
-                    elements: [
-                      {
-                        type: "Control",
-                        scope: "#/properties/key",
-                        options: {
-                          widget: "SelectInputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Screen Size"
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/value",
-                        options: {
-                          widget: "InputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Value",
-                            type: "number",
-                            helperText: "Number should be in range of 0 to 12",
-                            errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/proc",
-                        config: {
-                          layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-                        },
-                        options: {
-                          widget: "EmptyBox"
-                        }
+                  widget: "Array"
+                },
+                config: {
+                  layout: 12,
+                  main: {
+                    label: "Layout",
+                    childElementLabel: "Layout"
+                  },
+                  style: {
+                    marginLeft: "-24px",
+                    marginBottom: "24px !important",
+                    labelStyle: {
+                      marginLeft: "24px"
+                    },
+                    detailsStyle: {
+                      marginLeft: "24px"
+                    }
+                  }
+                },
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/key",
+                    options: {
+                      widget: "SelectInputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Screen Size"
+                      }
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/value",
+                    options: {
+                      widget: "InputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Value",
+                        type: "number",
+                        helperText: "Number should be in range of 0 to 12",
+                        errorMessage: "Number Can't be greater than 12 and can't be less than 0."
                       }
-                    ]
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/proc",
+                    config: {
+                      layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                    },
+                    options: {
+                      widget: "EmptyBox"
+                    }
                   }
-                }
+                ]
               }
             ]
           }
         ]
       },
       {
-        type: "HorizontalLayout",
+        type: "WrapperLayout",
         config: {
-          layout: { xs: 12, sm: 6 }
+          main: {
+            gap: "8px"
+          }
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/RemoveItemButton",
+            scope: "#/properties/btn",
             options: {
-              widget: "IconButton"
+              widget: "Button"
             },
             config: {
-              layout: { xs: 1, sm: 1 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                onClick: "RemoveItemButton",
-                size: "large",
-                icon: "RejectIcon",
-                styleDefault: true
-              },
-              style: {
-                marginLeft: "-10px"
+                name: "Ok",
+                variant: "contained",
+                type: "text",
+                onClick: "okHandler",
+                size: "medium"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/copiedElementDetails",
+            scope: "#/properties/btnSubmit",
             options: {
-              widget: "Box"
+              widget: "Button"
             },
             config: {
-              layout: { xs: 6, sm: 6 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                heading: "No element copied"
-              },
-              style: {
-                color: "#535557",
-                marginLeft: "-10px",
-                fontSize: "12px",
-                marginTop: "4px"
+                name: "Save & Exit",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium"
               }
             }
           },
           {
             type: "Control",
             scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 4, sm: 7, md: 8, lg: 9 }
+            },
             options: {
               widget: "EmptyBox"
-            },
-            config: {
-              layout: { xs: 1, sm: 5 }
             }
           }
         ]
       },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
-        },
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Ok",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "okHandler",
-            size: "medium"
-          }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btnSubmit",
-        options: {
-          widget: "Button"
-        },
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Save & Exit",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
-          }
-        }
-      },
       {
         type: "Control",
         scope: "#/properties/popUpComponentSection",
@@ -6877,9 +6858,7 @@ const componentBasicUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "No",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
-                    color: "info",
                     type: "text",
                     onClick: "deletePopUpComponent",
                     size: "large"
@@ -6913,7 +6892,6 @@ const componentBasicUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "Yes",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
                     color: "error",
                     type: "text",
@@ -7000,9 +6978,7 @@ const componentBasicUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "No",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
-                    color: "info",
                     type: "text",
                     onClick: "deletePopUpEvent",
                     size: "large"
@@ -7036,7 +7012,6 @@ const componentBasicUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "Yes",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
                     color: "error",
                     type: "text",
@@ -7065,6 +7040,30 @@ const componentBasicUiSchema = (theme) => {
           }
         ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: ""
+          },
+          style: {
+            paddingLeft: theme.spacing(3),
+            width: "100%",
+            fontSize: "10px",
+            color: theme.palette.grey[600],
+            position: "fixed",
+            bottom: "24px",
+            backgroundColor: theme.palette.background.default,
+            borderBottom: `1px solid ${theme.palette.common.black}29`,
+            borderTop: `1px solid ${theme.palette.common.black}29`
+          }
+        }
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -7082,7 +7081,7 @@ const componentBasicUiSchema = (theme) => {
           style: {
             flexDirection: "row",
             position: "absolute",
-            bottom: 0,
+            bottom: 10,
             height: "fit-content",
             overflow: "hidden",
             zIndex: 1e3,
@@ -7101,78 +7100,19 @@ const componentBasicUiSchema = (theme) => {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
-                color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
+                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
                 fontSize: "11px",
                 textAlign: "center",
-                lineHeight: 2,
+                lineHeight: 0,
                 width: "fit-content",
                 left: "50%",
                 position: "relative",
-                margin: 0,
+                margin: "revert",
                 flexGrow: 1,
                 height: 0,
                 transform: "translate(-50%, 0%)"
               }
             }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/FooterBackIcon",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              main: {
-                iconName: "PrevIcon",
-                onClick: "backHandler",
-                width: "fit-content"
-              },
-              style: {
-                fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
-                width: 20,
-                height: 0,
-                top: 0,
-                right: { xs: "12px", sm: "84px" },
-                position: "absolute",
-                fontSize: "12px",
-                cursor: "pointer",
-                ":hover": {
-                  fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.dark
-                },
-                marginRight: "20px"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/FooterBackHandlerText",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              main: {
-                heading: "Previous Page",
-                onClick: "backHandler"
-              },
-              style: {
-                display: { xs: "none", sm: "flex" },
-                textAlign: "left",
-                lineHeight: 1,
-                height: 0,
-                width: "fit-content",
-                color: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main,
-                fontSize: "12px",
-                cursor: "pointer",
-                marginLeft: "2px",
-                top: 3,
-                right: "12px",
-                position: "absolute",
-                ":hover": {
-                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
-                },
-                marginRight: "4px"
-              }
-            }
           }
         ]
       }
@@ -7181,7 +7121,13 @@ const componentBasicUiSchema = (theme) => {
   return uiSchema;
 };
 const CoreSection = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [
     {
       type: "Control",
@@ -7190,7 +7136,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Type",
           type: "text"
@@ -7199,40 +7145,39 @@ const CoreSection = {
     },
     {
       type: "Control",
-      scope: "#/properties/name",
-      options: {
-        widget: "InputField"
-      },
+      scope: "#/properties/proc",
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-        main: {
-          label: "Name"
-        }
+        layout: { xs: 6, sm: 0, md: 0, lg: 0 }
+      },
+      options: {
+        widget: "EmptyBox"
       }
     },
     {
       type: "Control",
-      scope: "#/properties/label",
+      scope: "#/properties/name",
       options: {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 12, sm: 6, md: 4, lg: 3 },
         main: {
-          label: "Label"
+          label: "Component ID",
+          required: true
         }
       }
     },
     {
       type: "Control",
-      scope: "#/properties/columnFormat",
+      scope: "#/properties/label",
       options: {
-        widget: "SelectInputField"
+        widget: "InputField"
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
-          label: "Column Format"
+          label: "Label",
+          required: true
         }
       }
     },
@@ -7240,17 +7185,7 @@ const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-      },
-      options: {
-        widget: "EmptyBox"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 }
       },
       options: {
         widget: "EmptyBox"
@@ -7259,54 +7194,67 @@ const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
       options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Screen Size"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value",
-                  type: "number",
-                  helperText: "Number should be in range of 0 to 12",
-                  errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              },
-              options: {
-                widget: "EmptyBox"
-              }
+        widget: "Array"
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Layout",
+          childElementLabel: "Layout"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Screen Size"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+              type: "number",
+              helperText: "Number should be in range of 0 to 12",
+              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/proc",
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          },
+          options: {
+            widget: "EmptyBox"
+          }
         }
-      }
+      ]
     }
   ]
 };
@@ -7333,15 +7281,20 @@ const EventSection = (theme) => {
                     },
                     config: {
                       main: {
-                        color: "info",
                         onClick: "eventAddHandler",
                         size: "small",
-                        icon: "AddIcon",
-                        iconLabel: "Add New",
+                        icon: "TableAddIcon",
+                        iconLabel: "Add",
                         styleDefault: true
                       },
                       style: {
-                        mt: "6px"
+                        mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit"
+                        }
                       }
                     }
                   }
@@ -7357,12 +7310,18 @@ const EventSection = (theme) => {
                       main: {
                         onClick: "copyPasteElement",
                         size: "small",
-                        icon: "PasteIcon",
+                        icon: "TablePaste",
                         iconLabel: "Paste",
                         styleDefault: true
                       },
                       style: {
-                        mt: "6px"
+                        mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit"
+                        }
                       }
                     }
                   }
@@ -7377,15 +7336,21 @@ const EventSection = (theme) => {
         elements: [
           {
             accessorKey: "eventType",
-            header: "Event Type"
+            header: "Event's Type",
+            type: "string",
+            size: 300
           },
           {
             accessorKey: "Handler",
-            header: "Handler"
+            header: "Handler",
+            type: "string",
+            size: 200
           },
           {
             accessorKey: "Edit_Approve_Records",
-            header: "Edit Widget",
+            header: "Edit",
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/Edit_Records",
@@ -7394,14 +7359,16 @@ const EventSection = (theme) => {
               },
               config: {
                 main: {
-                  color: "info",
                   size: "small",
-                  icon: "EditIcon",
+                  icon: "TableEditIcon",
                   tooltipMessage: "Edit This Record",
                   onClick: "eventEditHandler"
                 },
                 style: {
-                  color: theme.palette.primary.main
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark
+                  }
                 }
               }
             }
@@ -7409,6 +7376,8 @@ const EventSection = (theme) => {
           {
             accessorKey: "Reject_Records",
             header: "Delete",
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/RejectButton",
@@ -7418,10 +7387,15 @@ const EventSection = (theme) => {
               },
               config: {
                 main: {
-                  icon: "RejectIcon",
-                  color: "error",
+                  icon: "Bin",
                   tooltipMessage: "Reject This Record",
                   onClick: "deletePopUpEvent"
+                },
+                style: {
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark
+                  }
                 }
               }
             }
@@ -7429,7 +7403,8 @@ const EventSection = (theme) => {
           {
             header: "Copy",
             field: "Copy_Event",
-            flex: 1,
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/Copy_Event",
@@ -7479,77 +7454,103 @@ const emptyBox$1 = (scope, layout) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 11.5,
   options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/value",
-          options: {
-            widget: "InputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              helperText: "Number should be in range of 0 to 12",
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-            }
-          }
-        },
-        emptyBox$1("cardEmpty")
-      ]
+    widget: "Array"
+  },
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout"
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px"
+      },
+      detailsStyle: {
+        marginLeft: "24px"
+      }
     }
-  }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Screen Size"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
+      options: {
+        widget: "InputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          helperText: "Number should be in range of 0 to 12",
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+        }
+      }
+    },
+    emptyBox$1("cardEmpty")
+  ]
 };
 const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 12,
     options: {
-      "elementLabelProp": childScope,
-      detail: {
-        type: "HorizontalLayout",
-        elements: [
-          {
-            type: "Control",
-            scope: `#/properties/${childScope}`,
-            options: {
-              widget: "InputField"
-            },
-            config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-              main: {
-                label: childLabel || "Labels for Tab"
-              }
-            }
-          },
-          emptyBox$1("ArrayControlEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 }),
-          emptyBox$1("ArrayControlEmpty2", { xs: 0, sm: 0, md: 4, lg: 4 })
-        ]
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: childLabel,
+        childElementLabel: childLabel
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px"
+        },
+        detailsStyle: {
+          marginLeft: "24px"
+        }
       }
-    }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${childScope}`,
+        options: {
+          widget: "InputField"
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: childLabel || "Labels for Tab"
+          }
+        }
+      },
+      emptyBox$1("ArrayControlEmpty1", { xs: 6, sm: 6, md: 8, lg: 8 })
+    ]
   };
 };
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
-sizeHolder.options.detail.elements[1] = {
+sizeHolder.elements[1] = {
   type: "Control",
   scope: `#/properties/value`,
   options: {
@@ -7562,7 +7563,7 @@ sizeHolder.options.detail.elements[1] = {
     }
   }
 };
-sizeHolder.options.detail.elements[2] = emptyBox$1("sizeHolderempty");
+sizeHolder.elements[2] = emptyBox$1("sizeHolderempty");
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -7571,7 +7572,7 @@ const getInputField = (scope, label) => {
       widget: "InputField"
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label
       }
@@ -7586,7 +7587,7 @@ const getRadioInputField = (scope, label, options) => {
       widget: "RadioInputField"
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         label,
         options
@@ -7601,17 +7602,7 @@ const buildWrapper = (label, elements) => {
       main: {
         label: label || "Details",
         isAccordion: true
-      },
-      wrapperStyle: {
-        marginTop: "-6px",
-        marginBottom: "-8px",
-        marginLeft: "-34px",
-        width: "108%"
-      },
-      componentsBoxStyle: {
-        marginLeft: "12px"
-      },
-      defaultStyle: true
+      }
     },
     elements: elements || []
   };
@@ -7625,18 +7616,8 @@ const getTextArea = (scope, heading, hideButton, layout) => {
     },
     config: {
       layout: layout || 12,
-      style: {
-        containerStyle: {
-          borderRadius: "20px"
-        },
-        headerContainerStyle: {},
-        textAreaStyle: {
-          borderRadius: "20px",
-          padding: "20px"
-        }
-      },
       main: {
-        heading,
+        label: heading,
         minRows: 8,
         hideButton,
         enableCodeEditor: true
@@ -7652,7 +7633,7 @@ const getSelectField = (scope, label, options) => {
       widget: "SelectInputField"
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label,
         type: "text"
@@ -7668,7 +7649,7 @@ const getMultiSelectField = (scope, label) => {
       widget: "MultipleSelect"
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         multiple: true,
         label,
@@ -7677,12 +7658,18 @@ const getMultiSelectField = (scope, label) => {
     }
   };
 };
-const GraphSection = {
+const BaseSection = {
   type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: []
 };
 const buildPropertiesSection = function(type) {
-  let uiSchema = _.cloneDeep(GraphSection);
+  let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
     case "TreeMap":
       uiSchema.elements = [
@@ -7746,7 +7733,8 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("enableCodeEditor", "Enable Code Editor", ["YES", "NO"]),
-        getInputField("codeEditorLanguage", "Enter Code Language")
+        getInputField("codeEditorLanguage", "Enter Code Language"),
+        emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 0, lg: 3 })
       ];
       break;
     case "SpeedoMeter":
@@ -7826,7 +7814,7 @@ const buildPropertiesSection = function(type) {
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 8 }),
+        emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color")
       ];
@@ -7907,7 +7895,13 @@ const buildPropertiesSection = function(type) {
   return uiSchema;
 };
 const StyleSection = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [
     {
       type: "Control",
@@ -7923,14 +7917,7 @@ const StyleSection = {
           lg: 12
         },
         style: {
-          containerStyle: {
-            borderRadius: "20px"
-          },
-          headerContainerStyle: {},
-          textAreaStyle: {
-            borderRadius: "20px",
-            padding: "20px"
-          }
+          "& .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {}
         },
         main: {
           heading: "JSON Style",
@@ -7964,15 +7951,20 @@ const TableSection = (theme) => {
                     },
                     config: {
                       main: {
-                        color: "info",
                         onClick: "widgetAddClickHandler",
                         size: "small",
-                        icon: "AddIcon",
-                        iconLabel: "Add New",
+                        icon: "TableAddIcon",
+                        iconLabel: "Add",
                         styleDefault: true
                       },
                       style: {
-                        mt: "6px"
+                        mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit"
+                        }
                       }
                     }
                   }
@@ -7988,12 +7980,18 @@ const TableSection = (theme) => {
                       main: {
                         onClick: "copyPasteElement",
                         size: "small",
-                        icon: "PasteIcon",
+                        icon: "TablePaste",
                         iconLabel: "Paste",
                         styleDefault: true
                       },
                       style: {
-                        mt: "6px"
+                        mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit"
+                        }
                       }
                     }
                   }
@@ -8008,16 +8006,21 @@ const TableSection = (theme) => {
         elements: [
           {
             accessorKey: "name",
-            header: "Name"
+            header: "Name",
+            type: "string",
+            size: 300
           },
           {
             accessorKey: "type",
-            header: "Type"
+            header: "Type",
+            type: "string",
+            size: 200
           },
           {
             header: "Edit Record",
             field: "Reject_Records",
-            flex: 1,
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/RejectButton",
@@ -8026,13 +8029,16 @@ const TableSection = (theme) => {
               },
               config: {
                 main: {
-                  icon: "EditIcon",
-                  color: "primary",
+                  icon: "TableEditIcon",
+                  size: "small",
                   onClick: "editComponents",
                   tooltipMessage: "Reject This Record"
                 },
                 style: {
-                  color: theme.palette.primary.main
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark
+                  }
                 }
               }
             }
@@ -8040,7 +8046,8 @@ const TableSection = (theme) => {
           {
             header: "Delete",
             field: "Reject_Records",
-            flex: 1,
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/RejectButton",
@@ -8049,10 +8056,15 @@ const TableSection = (theme) => {
               },
               config: {
                 main: {
-                  icon: "RejectIcon",
-                  color: "error",
+                  icon: "Bin",
                   onClick: "deletePopUpComponent",
                   tooltipMessage: "Reject This Record"
+                },
+                style: {
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark
+                  }
                 }
               }
             }
@@ -8060,7 +8072,8 @@ const TableSection = (theme) => {
           {
             header: "Copy",
             field: "Copy_Component",
-            flex: 1,
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/Copy_Component",
@@ -8084,109 +8097,148 @@ const TableSection = (theme) => {
   return uiSchema;
 };
 const ValueTab = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [
     {
       type: "Control",
       scope: "#/properties/value",
-      layout: 12,
       options: {
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/label",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Label"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              }
+        widget: "Array"
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Value",
+          childElementLabel: "Value"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Label"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     }
   ]
 };
 const ValidationSection = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [
     {
       type: "Control",
       scope: "#/properties/validation",
-      layout: 11.5,
       options: {
-        "elementLabelProp": "validationType",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/validationType",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Type"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/validationValue",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4 }
-              }
+        widget: "Array"
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Validation",
+          childElementLabel: "Validation"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/validationType",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Type"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/validationValue",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     }
   ]
 };
@@ -8342,36 +8394,36 @@ function okHandler(store2) {
   }
 }
 const sectionLabels = {
-  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
-  card: ["Core", "Properties", "Event", "Style", "Validation"],
-  UploadFile: ["Core", "Event", "Style", "Validation"],
-  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
-  DownloadFile: ["Core", "Event", "Style", "Validation"],
-  Box: ["Core", "Event", "Style", "Validation"],
-  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  Slider: ["Core", "Components", "Event", "Style", "Validation"],
-  Timer: ["Core", "Event", "Style", "Validation"],
-  Rank: ["Core", "Event", "Style", "Validation"],
-  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  card: ["Core", "Properties", "Events", "Style", "Validation"],
+  UploadFile: ["Core", "Events", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Events", "Style", "Validation"],
+  DownloadFile: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Events", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  Slider: ["Core", "Components", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style", "Validation"],
+  Rank: ["Core", "Events", "Style", "Validation"],
+  Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Validation"],
-  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
-  Text: ["Core", "Properties", "Event", "Style", "Validation"],
-  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  Radio: ["Core", "Properties", "Events", "Style", "Validation"],
+  Text: ["Core", "Properties", "Events", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
   PopUp: ["Core", "Components", "Properties", "Style"],
-  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
-  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
-  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
-  TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Events", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
+  InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a;
@@ -8381,14 +8433,14 @@ function refreshPage(type, store2) {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection(store2.theme.myTheme),
+      Events: 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(store2.theme.myTheme), ValidationSection];
+    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Events", "Validation"];
+    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection(store2.theme.myTheme), ValidationSection];
   }
   if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
@@ -8552,15 +8604,15 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
       const notificationMessages = {
-        Event: " The event cannot be integrated into the component section.",
-        Component: "The component cannot be integrated into the event section."
+        Events: " The Events cannot be integrated into the component section.",
+        Component: "The component cannot be integrated into the Events section."
       };
       if (copiedConfig.Handler && elementType === "Component") {
         store2.setNotify({
-          FailMessage: notificationMessages.Event,
+          FailMessage: notificationMessages.Events,
           Fail: true
         });
-      } else if (copiedConfig.name && elementType === "Event") {
+      } else if (copiedConfig.name && elementType === "Events") {
         store2.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true
@@ -8738,18 +8790,18 @@ const EventSchema = {
     eventType: {
       type: "string",
       oneOf: [
-        { title: "Click Event", const: "onClick" },
-        { title: "Load Event", const: "onLoad" },
-        { title: "Change Event", const: "onChange" },
-        { title: "Mount Event", const: "onMount" },
+        { title: "Click", const: "onClick" },
+        { title: "Load", const: "onLoad" },
+        { title: "Change", const: "onChange" },
+        { title: "Mount", const: "onMount" },
         { title: "Success", const: "Success" },
-        { title: "onStart", const: "onStart" },
-        { title: "Cell Renderer", const: "onCellRenderer" },
-        { 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: "Start", const: "onStart" },
+        { title: "Cell Render", const: "onCellRenderer" },
+        { title: "Upload", const: "onUpload" },
+        { title: "Back", const: "onBack" },
+        { title: "Next", const: "onNext" },
+        { title: "Row Movement", const: "onRowMovement" },
+        { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -8757,7 +8809,7 @@ const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Custom", const: "custom" },
-        { title: "Api", const: "api" },
+        { title: "API", const: "api" },
         { title: "Inbuilt Function", const: "inBuiltFunction" },
         { title: "Refresh", const: "refresh" }
       ]
@@ -8791,42 +8843,41 @@ const EventSchema = {
   required: ["eventType", "Handler"]
 };
 const EventUiSchema = (theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a;
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Component",
+    heading: "Page-Events",
     elements: [
-      {
-        type: "Control",
-        scope: "#/properties/pageName",
-        options: {
-          widget: "Box"
-        },
-        config: {
-          layout: 12,
-          main: {
-            heading: " "
-          },
-          style: {
-            marginLeft: theme.spacing(3),
-            width: "auto",
-            fontSize: "12px",
-            color: "gray"
-          }
-        }
-      },
       {
         type: "TabLayout",
         config: {
           main: {
-            tabLabels: ["Core", "Response Event"],
-            defaultStyle: true,
+            tabLabels: ["Core", "Response Events"],
             id: "event"
+          },
+          style: {
+            TabPanelStyle: {
+              padding: 0
+            }
+          },
+          TabsStyle: {
+            marginBottom: "3px",
+            paddingBottom: "4px",
+            boxShadow: "0px 3px 4px #afafaf80",
+            "& .MuiTabs-indicator": {
+              bottom: "6px"
+            }
           }
         },
         elements: [
           {
-            type: "HorizontalLayout",
+            type: "WrapperLayout",
+            config: {
+              main: {
+                label: " ",
+                gap: "8px"
+              }
+            },
             elements: [
               {
                 type: "Control",
@@ -8835,9 +8886,9 @@ const EventUiSchema = (theme) => {
                   widget: "SelectInputField"
                 },
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 3 },
                   main: {
-                    label: "Event Type",
+                    label: "Event's Type",
                     type: "text"
                   }
                 }
@@ -8850,7 +8901,7 @@ const EventUiSchema = (theme) => {
                   widget: "EmptyBox"
                 },
                 config: {
-                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                  layout: { xs: 0, sm: 0, md: 4, lg: 6 }
                 }
               }
             ]
@@ -8876,12 +8927,18 @@ const EventUiSchema = (theme) => {
                           main: {
                             onClick: "addEvent",
                             size: "small",
-                            icon: "AddIcon",
-                            iconLabel: "Add New",
+                            icon: "TableAddIcon",
+                            iconLabel: "Add",
                             styleDefault: true
                           },
                           style: {
-                            mt: "6px"
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit"
+                            }
                           }
                         }
                       }
@@ -8897,12 +8954,18 @@ const EventUiSchema = (theme) => {
                           main: {
                             onClick: "copyPasteElement",
                             size: "small",
-                            icon: "PasteIcon",
+                            icon: "TablePaste",
                             iconLabel: "Paste",
                             styleDefault: true
                           },
                           style: {
-                            mt: "6px"
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit"
+                            }
                           }
                         }
                       }
@@ -8917,15 +8980,21 @@ const EventUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "eventType",
-                header: "Event Type"
+                header: "Event's Type",
+                size: 300,
+                type: "string"
               },
               {
                 accessorKey: "Handler",
-                header: "Handler"
+                header: "Handler",
+                size: 200,
+                type: "string"
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
@@ -8934,14 +9003,16 @@ const EventUiSchema = (theme) => {
                   },
                   config: {
                     main: {
-                      color: "info",
                       size: "small",
-                      icon: "EditIcon",
+                      icon: "TableEditIcon",
                       tooltipMessage: "Edit This Record",
                       onClick: "editEvent"
                     },
                     style: {
-                      color: theme.palette.primary.main
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark
+                      }
                     }
                   }
                 }
@@ -8949,6 +9020,8 @@ const EventUiSchema = (theme) => {
               {
                 accessorKey: "Reject_Records",
                 header: "Delete",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/RejectButton",
@@ -8957,10 +9030,15 @@ const EventUiSchema = (theme) => {
                   },
                   config: {
                     main: {
-                      icon: "RejectIcon",
-                      color: "error",
+                      icon: "Bin",
                       tooltipMessage: "Reject This Record",
                       onClick: "deletePopUpEvent"
+                    },
+                    style: {
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark
+                      }
                     }
                   }
                 }
@@ -8968,7 +9046,8 @@ const EventUiSchema = (theme) => {
               {
                 header: "Copy",
                 field: "Copy_Event",
-                flex: 1,
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
@@ -8989,103 +9068,59 @@ const EventUiSchema = (theme) => {
         ]
       },
       {
-        type: "HorizontalLayout",
+        type: "WrapperLayout",
         config: {
-          layout: { xs: 12, sm: 6 }
+          main: {
+            gap: "8px"
+          }
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/RemoveItemButton",
+            scope: "#/properties/btn",
             options: {
-              widget: "IconButton"
+              widget: "Button"
             },
             config: {
-              layout: { xs: 1, sm: 1 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                onClick: "RemoveItemButton",
-                size: "large",
-                icon: "RejectIcon",
-                styleDefault: true
-              },
-              style: {
-                marginLeft: "-10px"
+                name: "Ok",
+                variant: "contained",
+                type: "text",
+                onClick: "okHandler",
+                size: "medium"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/copiedElementDetails",
+            scope: "#/properties/btnSubmit",
             options: {
-              widget: "Box"
+              widget: "Button"
             },
             config: {
-              layout: { xs: 6, sm: 6 },
+              layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
               main: {
-                heading: "No element copied"
-              },
-              style: {
-                color: "#535557",
-                marginLeft: "-10px",
-                fontSize: "12px",
-                marginTop: "4px"
+                name: "Save & Exit",
+                variant: "contained",
+                type: "text",
+                onClick: "saveHandler",
+                size: "medium"
               }
             }
           },
           {
             type: "Control",
             scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 4, sm: 7, md: 8, lg: 9 }
+            },
             options: {
               widget: "EmptyBox"
-            },
-            config: {
-              layout: { xs: 1, sm: 5 }
             }
           }
         ]
       },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
-        },
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Ok",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "okHandler",
-            size: "medium"
-          },
-          style: {
-            float: "right"
-          }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btnSubmit",
-        options: {
-          widget: "Button"
-        },
-        config: {
-          layout: { xs: 4, sm: 2 },
-          main: {
-            name: "Save & Exit",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
-          },
-          style: {
-            float: "right"
-          }
-        }
-      },
       {
         type: "Control",
         scope: "#/properties/popUpEvent",
@@ -9209,6 +9244,30 @@ const EventUiSchema = (theme) => {
           }
         ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: ""
+          },
+          style: {
+            paddingLeft: theme.spacing(3),
+            width: "100%",
+            fontSize: "10px",
+            color: theme.palette.grey[600],
+            position: "fixed",
+            bottom: "24px",
+            backgroundColor: theme.palette.background.default,
+            borderBottom: `1px solid ${theme.palette.common.black}29`,
+            borderTop: `1px solid ${theme.palette.common.black}29`
+          }
+        }
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -9226,7 +9285,7 @@ const EventUiSchema = (theme) => {
           style: {
             flexDirection: "row",
             position: "absolute",
-            bottom: 0,
+            bottom: 10,
             height: "fit-content",
             overflow: "hidden",
             zIndex: 1e3,
@@ -9245,78 +9304,19 @@ const EventUiSchema = (theme) => {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
-                color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
+                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
                 fontSize: "11px",
                 textAlign: "center",
-                lineHeight: 2,
+                lineHeight: 0,
                 width: "fit-content",
                 left: "50%",
                 position: "relative",
-                margin: 0,
+                margin: "revert",
                 flexGrow: 1,
                 height: 0,
                 transform: "translate(-50%, 0%)"
               }
             }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/FooterBackIcon",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              main: {
-                iconName: "PrevIcon",
-                onClick: "backHandler",
-                width: "fit-content"
-              },
-              style: {
-                fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
-                width: 20,
-                height: 0,
-                top: 0,
-                right: { xs: "12px", sm: "84px" },
-                position: "absolute",
-                fontSize: "12px",
-                cursor: "pointer",
-                ":hover": {
-                  fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.dark
-                },
-                marginRight: "20px"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/FooterBackHandlerText",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              main: {
-                heading: "Previous Page",
-                onClick: "backHandler"
-              },
-              style: {
-                display: { xs: "none", sm: "flex" },
-                textAlign: "left",
-                lineHeight: 1,
-                height: 0,
-                width: "fit-content",
-                color: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main,
-                fontSize: "12px",
-                cursor: "pointer",
-                marginLeft: "2px",
-                top: 3,
-                right: "12px",
-                position: "absolute",
-                ":hover": {
-                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
-                },
-                marginRight: "4px"
-              }
-            }
           }
         ]
       }
@@ -9334,7 +9334,7 @@ const APISection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Method",
           type: "text"
@@ -9348,7 +9348,7 @@ const APISection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Path",
           type: "text",
@@ -9364,116 +9364,132 @@ const APISection = {
         widget: "EmptyBox"
       },
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+        layout: { xs: 0, sm: 0, md: 4, lg: 6 }
       }
     },
     {
       type: "Control",
-      scope: "#/properties/emptyBox",
+      scope: "#/properties/headers",
       options: {
-        widget: "EmptyBox"
+        widget: "Array"
       },
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/headers",
-      layout: 11.5,
-      options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Key"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              }
+        layout: 12,
+        main: {
+          label: "Headers",
+          childElementLabel: "Headers"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     },
     {
       type: "Control",
       scope: "#/properties/body",
-      layout: 11.5,
       options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Key"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              }
+        widget: "Array"
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Body",
+          childElementLabel: "Body"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     },
     getTextArea("apiBody", "Transformer", true, 12)
   ]
@@ -9484,64 +9500,55 @@ const refreshSectionUiSchema = {
     {
       type: "Control",
       scope: "#/properties/refreshElements",
-      layout: 11.5,
       options: {
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 12, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 6, md: 4, lg: 4 },
-                main: {}
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-                main: {}
-              }
+        widget: "Array"
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Refresh Elements",
+          childElementLabel: "Refresh Elements"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 8, lg: 8 },
+            main: {}
+          }
         }
-      }
+      ]
     }
   ]
 };
-var emptyBox = {
-  type: "Control",
-  scope: "#/properties/emptyBox",
-  options: {
-    widget: "EmptyBox"
-  },
-  config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-    main: {},
-    style: {}
-  }
-};
 var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
   return {
     setPage: async function() {
@@ -9556,44 +9563,44 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       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] = {
+          uiSchema.elements[0].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
+          uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
               widget: "EmptyBox"
             },
             config: {
-              layout: { xs: 0, sm: 6, md: 0, lg: 0 },
+              layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
               style: {}
             }
           };
-          uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false);
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
-          uiSchema.elements[1].elements[0].elements[3] = APISection;
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", { xs: 0, sm: 0, md: 4, lg: 6 });
+          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] = {
+          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
+          uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
               widget: "EmptyBox"
             },
             config: {
-              layout: { xs: 6, sm: 6, md: 0, lg: 0 },
+              layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
               style: {}
             }
           };
-          uiSchema.elements[1].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
+          uiSchema.elements[0].elements[0].elements[4] = 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] = emptyBox;
-          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", { xs: 0, sm: 0, md: 4, lg: 6 });
+          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
           schema2.required = ["eventType", "Handler", "refreshElements"];
@@ -11649,6 +11656,18 @@ const buildRadio = (config2, componentScope2) => {
   }
   return Radio;
 };
+var emptyBox = {
+  type: "Control",
+  scope: "#/properties/emptyBox",
+  options: {
+    widget: "EmptyBox"
+  },
+  config: {
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    main: {},
+    style: {}
+  }
+};
 const buildEmptyBox = (config2, componentScope2) => {
   const EmptyBox = _.cloneDeep(emptyBox);
   if (config2.layout) {