impaktapps-ui-builder 0.0.100 → 0.0.101-alpha.2

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

@@ -39,23 +39,26 @@ const PageMasterSchema = {
           }
         }
       }
+    },
+    RemoveItemButton: {
+      disabled: true
     }
   },
   required: ["template", "name", "label"]
 };
 const PageMasterUiSchema = (theme) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Page Master",
+    heading: "Page",
     elements: [
       {
         type: "WrapperLayout",
         config: {
-          main: {},
-          wrapperStyle: {
-            marginLeft: theme.spacing(2),
-            backgroundColor: theme.palette.background.default
+          main: {
+            label: "Basic Details",
+            isAccordion: true,
+            gap: "8px"
           }
         },
         elements: [
@@ -66,9 +69,9 @@ const PageMasterUiSchema = (theme) => {
               widget: "InputField"
             },
             config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 3 },
               main: {
-                label: "Name",
+                label: "Page Name",
                 options: [],
                 color: "secondary",
                 errorMessage: "Name should be start with 'page_'",
@@ -77,26 +80,6 @@ const PageMasterUiSchema = (theme) => {
               }
             }
           },
-          {
-            type: "Control",
-            scope: "#/properties/template",
-            options: {
-              widget: "SelectInputField"
-            },
-            config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-              main: {
-                label: "Template",
-                options: [
-                  { const: "template1", title: "template1" },
-                  { const: "template2", title: "template2" },
-                  { const: "template3", title: "template3" }
-                ],
-                color: "secondary",
-                required: true
-              }
-            }
-          },
           {
             type: "Control",
             scope: "#/properties/label",
@@ -104,9 +87,9 @@ const PageMasterUiSchema = (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",
+                label: "Page Heading",
                 options: [],
                 color: "secondary",
                 required: true
@@ -117,7 +100,7 @@ const PageMasterUiSchema = (theme) => {
             type: "Control",
             scope: "#/properties/EmptyBox",
             config: {
-              layout: { xs: 6, sm: 6, md: 0, lg: 0 }
+              layout: { xs: 0, sm: 0, md: 4, lg: 6 }
             },
             options: {
               widget: "EmptyBox"
@@ -128,11 +111,24 @@ const PageMasterUiSchema = (theme) => {
       {
         type: "TabLayout",
         config: {
+          layout: 12,
           main: {
-            tabLabels: ["Components", "events"],
-            divider: true
+            tabLabels: ["Page Components", "Page Events"]
           },
-          defaultStyle: true
+          style: {
+            TabPanelStyle: {
+              padding: 0
+            }
+          },
+          TabsStyle: {
+            borderTop: `1px solid ${theme.palette.common.black}29`,
+            marginBottom: "3px",
+            paddingBottom: "4px",
+            boxShadow: "0px 3px 4px #afafaf80",
+            "& .MuiTabs-indicator": {
+              bottom: "6px"
+            }
+          }
         },
         elements: [
           {
@@ -156,12 +152,45 @@ const PageMasterUiSchema = (theme) => {
                           main: {
                             onClick: "onAddClickHandler",
                             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"
+                            }
+                          }
+                        }
+                      }
+                    },
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Component",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "PasteIcon",
+                            iconLabel: "Paste",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit"
+                            }
                           }
                         }
                       }
@@ -176,16 +205,21 @@ const PageMasterUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "name",
-                header: "Name"
+                header: "Name",
+                size: 300,
+                type: "string"
               },
               {
                 accessorKey: "type",
-                header: "Type"
+                header: "Type",
+                size: 300,
+                type: "string"
               },
               {
                 header: "Edit",
                 field: "Reject_Records",
-                flex: 1,
+                size: 150,
+                type: "action",
                 widget: {
                   type: "Control",
                   scope: "#/properties/RejectButton",
@@ -194,13 +228,15 @@ const PageMasterUiSchema = (theme) => {
                   },
                   config: {
                     main: {
-                      icon: "EditIcon",
-                      color: "primary",
+                      icon: "TableEditIcon",
                       onClick: "Edit_Components",
                       tooltipMessage: "Edit This Record"
                     },
                     style: {
-                      color: theme.palette.primary.main
+                      fill: theme.palette.primary.main,
+                      "& :hover": {
+                        fill: theme.palette.primary.dark
+                      }
                     }
                   }
                 }
@@ -208,7 +244,8 @@ const PageMasterUiSchema = (theme) => {
               {
                 header: "Delete",
                 field: "Reject_Records",
-                flex: 1,
+                size: 150,
+                type: "action",
                 widget: {
                   type: "Control",
                   scope: "#/properties/RejectButton",
@@ -217,10 +254,34 @@ const PageMasterUiSchema = (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
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                header: "Copy",
+                field: "Copy_Component",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Component",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      onClick: "copyPasteElement",
+                      styleDefault: true
                     }
                   }
                 }
@@ -248,8 +309,35 @@ const PageMasterUiSchema = (theme) => {
                           main: {
                             onClick: "eventAddHandler",
                             size: "small",
-                            icon: "AddIcon",
-                            iconLabel: "Add New",
+                            icon: "TableAddIcon",
+                            iconLabel: "Add",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px",
+                            color: "inherit",
+                            fill: "inherit",
+                            "&:hover": {
+                              color: "inherit",
+                              fill: "inherit"
+                            }
+                          }
+                        }
+                      }
+                    },
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Event",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "PasteIcon",
+                            iconLabel: "Paste",
                             styleDefault: true
                           },
                           style: {
@@ -268,15 +356,21 @@ const PageMasterUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "eventType",
-                header: "Event Type"
+                header: "Event Type",
+                size: 300,
+                type: "string"
               },
               {
                 accessorKey: "Handler",
-                header: "Handler"
+                header: "Handler",
+                size: 300,
+                type: "string"
               },
               {
                 accessorKey: "Edit_Approve_Records",
                 header: "Edit Widget",
+                type: "action",
+                size: 150,
                 widget: {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
@@ -285,14 +379,16 @@ const PageMasterUiSchema = (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
+                      }
                     }
                   }
                 }
@@ -308,10 +404,34 @@ const PageMasterUiSchema = (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
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                header: "Copy",
+                field: "Copy_Event",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Event",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      onClick: "copyPasteElement",
+                      styleDefault: true
                     }
                   }
                 }
@@ -321,14 +441,60 @@ const PageMasterUiSchema = (theme) => {
         ]
       },
       {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "EmptyBox"
-        },
+        type: "HorizontalLayout",
         config: {
-          layout: { xs: 8, sm: 10 }
-        }
+          layout: { xs: 12, sm: 9 }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/RemoveItemButton",
+            options: {
+              widget: "IconButton"
+            },
+            config: {
+              layout: { xs: 1, sm: 1 },
+              main: {
+                onClick: "RemoveItemButton",
+                size: "large",
+                icon: "RejectIcon",
+                styleDefault: true
+              },
+              style: {
+                marginLeft: "-5px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/copiedElementDetails",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: { xs: 6, sm: 6 },
+              main: {
+                heading: "No element copied"
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-30px",
+                fontSize: "12px",
+                marginTop: "4px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              layout: { xs: 1, sm: 5 }
+            }
+          }
+        ]
       },
       {
         type: "Control",
@@ -358,84 +524,116 @@ const PageMasterUiSchema = (theme) => {
           layout: {
             xs: 12,
             sm: 12,
-            md: 6,
-            lg: 6
+            md: 12,
+            lg: 12
           },
-          main: {},
-          style: {
-            "& .MuiPaper-root": {
-              width: "30%"
-            },
-            "& .MuiTypography-root": {
-              padding: 0
-            }
-          }
+          main: {
+            title: "WARNING!"
+          },
+          style: {}
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popText",
             options: {
               widget: "Box"
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?"
               },
               style: {
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             }
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
-            config: {
-              main: {},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteCompButton",
-            options: {
-              widget: "Button"
-            },
+            type: "WrapperLayout",
             config: {
-              layout: 3,
-              main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "Delete_Components",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteCompButton",
-            options: {
-              widget: "Button"
+              layout: 11,
+              main: {}
             },
-            config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpComponent",
-                size: "small"
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteCompButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpComponent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteCompButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "Delete_Components",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -449,84 +647,116 @@ const PageMasterUiSchema = (theme) => {
           layout: {
             xs: 12,
             sm: 12,
-            md: 6,
-            lg: 6
+            md: 12,
+            lg: 12
           },
-          main: {},
-          style: {
-            "& .MuiPaper-root": {
-              width: "30%"
-            },
-            "& .MuiTypography-root": {
-              padding: 0
-            }
-          }
+          main: {
+            title: "WARNING!"
+          },
+          style: {}
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popText1",
             options: {
               widget: "Box"
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?"
               },
               style: {
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             }
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
+            type: "WrapperLayout",
             config: {
-              main: {},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteEventButton",
-            options: {
-              widget: "Button"
+              layout: 11,
+              main: {}
             },
-            config: {
-              layout: 3,
-              main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button"
-            },
-            config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "error",
-                type: "text",
-                onClick: "deletePopUpEvent",
-                size: "small"
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -548,7 +778,6 @@ const PageMasterUiSchema = (theme) => {
             flexDirection: "row",
             position: "absolute",
             bottom: 0,
-            marginBottom: "-8px",
             height: "fit-content",
             overflow: "hidden",
             zIndex: 1e3,
@@ -567,22 +796,23 @@ const PageMasterUiSchema = (theme) => {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
+                color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
+                fontSize: "11px",
                 textAlign: "center",
-                lineHeight: 1,
+                lineHeight: 2,
                 width: "fit-content",
                 left: "50%",
                 position: "relative",
                 margin: 0,
                 flexGrow: 1,
-                height: 0
+                height: 0,
+                transform: "translate(-50%, 0%)"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/backIcon",
+            scope: "#/properties/FooterBackIcon",
             options: {
               widget: "Box"
             },
@@ -593,24 +823,24 @@ const PageMasterUiSchema = (theme) => {
                 width: "fit-content"
               },
               style: {
-                fill: theme.palette.primary.main,
+                fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
                 width: 20,
                 height: 0,
-                margin: 0,
                 top: 0,
                 right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
                 ":hover": {
-                  fill: theme.palette.primary.dark
-                }
+                  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/text",
+            scope: "#/properties/FooterBackHandlerText",
             options: {
               widget: "Box"
             },
@@ -625,17 +855,17 @@ const PageMasterUiSchema = (theme) => {
                 lineHeight: 1,
                 height: 0,
                 width: "fit-content",
-                color: theme.palette.primary.main,
+                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",
-                marginRight: 0,
                 top: 3,
                 right: "12px",
                 position: "absolute",
                 ":hover": {
-                  color: theme.palette.primary.dark
-                }
+                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
+                },
+                marginRight: "4px"
               }
             }
           }
@@ -6126,7 +6356,9 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },
         { title: "TreeMap", const: "TreeMap" },
-        { title: "ColumnGroup", const: "ColumnGroup" }
+        { title: "ColumnGroup", const: "ColumnGroup" },
+        { title: "Thought of the Day", const: "Thought" },
+        { title: "Pdf Viewer", const: "PdfViewer" }
       ]
     },
     columnFormat: {
@@ -6415,12 +6647,15 @@ const ComponentSchema = {
     name: {
       type: "string"
     },
-    label: { type: "string" }
+    label: { type: "string" },
+    RemoveItemButton: {
+      disabled: true
+    }
   },
   required: ["name"]
 };
 const componentBasicUiSchema = (theme) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const uiSchema = {
     type: "HorizontalLayout",
     heading: "Component",
@@ -6591,99 +6826,100 @@ const componentBasicUiSchema = (theme) => {
         ]
       },
       {
-        type: "Control",
-        scope: "#/properties/popUpComponentSection",
-        options: {
-          widget: "PopUp"
-        },
+        type: "HorizontalLayout",
         config: {
-          layout: {
-            xs: 12,
-            sm: 12,
-            md: 12,
-            lg: 12
-          },
-          main: {},
-          style: {
-            "& .MuiPaper-root": {
-              width: "30%"
-            },
-            "& .MuiTypography-root": {
-              padding: 0
-            }
-          }
+          layout: { xs: 12, sm: 6 }
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/RemoveItemButton",
             options: {
-              widget: "Box"
+              widget: "IconButton"
             },
             config: {
-              layout: 12,
+              layout: { xs: 1, sm: 1 },
               main: {
-                heading: "Are you sure you want to delete ?"
+                onClick: "RemoveItemButton",
+                size: "large",
+                icon: "RejectIcon",
+                styleDefault: true
               },
               style: {
-                marginTop: "-40px"
+                marginLeft: "-10px"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
-            config: {
-              main: {},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteCompButton",
+            scope: "#/properties/copiedElementDetails",
             options: {
-              widget: "Button"
+              widget: "Box"
             },
             config: {
-              layout: 3,
+              layout: { xs: 6, sm: 6 },
               main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "error",
-                type: "text",
-                onClick: "deleteComponents",
-                size: "small"
+                heading: "No element copied"
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-10px",
+                fontSize: "12px",
+                marginTop: "4px"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/CancelDeleteCompButton",
+            scope: "#/properties/EmptyBox",
             options: {
-              widget: "Button"
+              widget: "EmptyBox"
             },
             config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpComponent",
-                size: "small"
-              }
+              layout: { xs: 1, sm: 5 }
             }
           }
         ]
       },
       {
         type: "Control",
-        scope: "#/properties/popUpEventSection",
+        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",
         options: {
           widget: "PopUp"
         },
@@ -6694,130 +6930,239 @@ const componentBasicUiSchema = (theme) => {
             md: 12,
             lg: 12
           },
-          main: {},
-          style: {
-            "& .MuiPaper-root": {
-              width: "30%"
-            },
-            "& .MuiTypography-root": {
-              padding: 0
-            }
-          }
+          main: {
+            title: "WARNING!"
+          },
+          style: {}
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popupText",
             options: {
               widget: "Box"
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?"
               },
               style: {
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             }
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
+            type: "WrapperLayout",
             config: {
-              main: {},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
-            }
+              layout: 11,
+              main: {}
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteCompButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpComponent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteCompButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteComponents",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpEventSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {
+            title: "WARNING!"
           },
+          style: {}
+        },
+        elements: [
           {
             type: "Control",
-            scope: "#/properties/ConfirmDeleteEventButton",
+            scope: "#/properties/popupText1",
             options: {
-              widget: "Button"
+              widget: "Box"
             },
             config: {
-              layout: 3,
+              layout: 11,
               main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small"
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             }
           },
           {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button"
-            },
+            type: "WrapperLayout",
             config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpEvent",
-                size: "small"
+              layout: 11,
+              main: {}
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 4, sm: 8 }
-        }
-      },
-      {
-        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/notify",
@@ -6836,7 +7181,6 @@ const componentBasicUiSchema = (theme) => {
             flexDirection: "row",
             position: "absolute",
             bottom: 0,
-            marginBottom: "-8px",
             height: "fit-content",
             overflow: "hidden",
             zIndex: 1e3,
@@ -6855,22 +7199,23 @@ const componentBasicUiSchema = (theme) => {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
+                color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
+                fontSize: "11px",
                 textAlign: "center",
-                lineHeight: 1,
+                lineHeight: 2,
                 width: "fit-content",
                 left: "50%",
                 position: "relative",
                 margin: 0,
                 flexGrow: 1,
-                height: 0
+                height: 0,
+                transform: "translate(-50%, 0%)"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/backIcon",
+            scope: "#/properties/FooterBackIcon",
             options: {
               widget: "Box"
             },
@@ -6881,24 +7226,24 @@ const componentBasicUiSchema = (theme) => {
                 width: "fit-content"
               },
               style: {
-                fill: theme.palette.primary.main,
+                fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
                 width: 20,
                 height: 0,
-                margin: 0,
                 top: 0,
                 right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
                 ":hover": {
-                  fill: theme.palette.primary.dark
-                }
+                  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/text",
+            scope: "#/properties/FooterBackHandlerText",
             options: {
               widget: "Box"
             },
@@ -6913,17 +7258,17 @@ const componentBasicUiSchema = (theme) => {
                 lineHeight: 1,
                 height: 0,
                 width: "fit-content",
-                color: theme.palette.primary.main,
+                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",
-                marginRight: 0,
                 top: 3,
                 right: "12px",
                 position: "absolute",
                 ":hover": {
-                  color: theme.palette.primary.dark
-                }
+                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
+                },
+                marginRight: "4px"
               }
             }
           }
@@ -7098,6 +7443,27 @@ const EventSection = (theme) => {
                       }
                     }
                   }
+                },
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Paste_Event",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        onClick: "copyPasteElement",
+                        size: "small",
+                        icon: "PasteIcon",
+                        iconLabel: "Paste",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
+                    }
+                  }
                 }
               ]
             },
@@ -7157,6 +7523,26 @@ const EventSection = (theme) => {
                 }
               }
             }
+          },
+          {
+            header: "Copy",
+            field: "Copy_Event",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/Copy_Event",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "FileCopyIcon",
+                  onClick: "copyPasteElement",
+                  tooltipMessage: "Reject This Record",
+                  styleDefault: true
+                }
+              }
+            }
           }
         ]
       }
@@ -7321,7 +7707,7 @@ const buildWrapper = (label, elements) => {
         width: "108%"
       },
       componentsBoxStyle: {
-        marginLeft: "24px"
+        marginLeft: "12px"
       },
       defaultStyle: true
     },
@@ -7474,22 +7860,19 @@ const buildPropertiesSection = function(type) {
     case "RankCard":
       uiSchema.elements = [
         getInputField("rank", "Rank"),
-        getInputField("image", "Image Url"),
-        getInputField("title", "Card Title"),
-        getInputField("description", "Card Description"),
-        emptyBox$1("RankCardEmpty1"),
-        emptyBox$1("RankCardEmpty2")
+        getInputField("height", "Height"),
+        emptyBox$1("RankCardEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 })
       ];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
-        getInputField("valueLabel", "Value Label"),
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        emptyBox$1("LeaderBoardEmpty1"),
-        emptyBox$1("LeaderBoardEmpty2"),
-        getTextArea("functionCode", "Write Compare Code", false)
+        getInputField("nameKey", "Key for Name"),
+        getInputField("imageKey", "Key for Image"),
+        getInputField("scoreKey", "Key for comparing parameter"),
+        emptyBox$1("LeaderBoardEmpty1", { xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
     case "CardSlider":
@@ -7513,8 +7896,9 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
+        getInputField("titleIcon", "Unicode of Icon for title"),
         getInputField("description", "Description"),
-        emptyBox$1("cardEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
+        emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
     case "Button":
@@ -7538,7 +7922,9 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
-        emptyBox$1("GraphEmpty2"),
+        getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
+        getInputField("leftMargin", "Left Margin"),
+        emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 8 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color")
       ];
@@ -7610,6 +7996,11 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("MultipleSelectEmpty2")
       ];
       break;
+    case "Thought":
+      uiSchema.elements = [
+        getTextArea("thought", "Today's thought", false)
+      ];
+      break;
   }
   return uiSchema;
 };
@@ -7683,6 +8074,27 @@ const TableSection = (theme) => {
                       }
                     }
                   }
+                },
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Paste_Component",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        onClick: "copyPasteElement",
+                        size: "small",
+                        icon: "PasteIcon",
+                        iconLabel: "Paste",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
+                    }
+                  }
                 }
               ]
             },
@@ -7742,6 +8154,26 @@ const TableSection = (theme) => {
                 }
               }
             }
+          },
+          {
+            header: "Copy",
+            field: "Copy_Component",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/Copy_Component",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "FileCopyIcon",
+                  onClick: "copyPasteElement",
+                  styleDefault: true,
+                  disabled: false
+                }
+              }
+            }
           }
         ]
       }
@@ -7878,8 +8310,8 @@ var buildConfig = (FormData) => {
   component = { ...formData, ...component };
   return component;
 };
-const createLayoutFormat = (config) => {
-  if (_.isEmpty(config)) {
+const createLayoutFormat = (config2) => {
+  if (_.isEmpty(config2)) {
     return {
       xs: 12,
       sm: 12,
@@ -7887,18 +8319,23 @@ const createLayoutFormat = (config) => {
       lg: 12
     };
   }
-  let data = {};
-  config.map((e) => {
+  let data = {
+    xs: 12,
+    sm: 12,
+    md: 6,
+    lg: 6
+  };
+  config2.map((e) => {
     data[e.key || "xs"] = +e.value || 5.5;
   });
   return data;
 };
-const flatObjectValueInArray = (config = []) => {
-  if (config[0].length < 1) {
+const flatObjectValueInArray = (config2 = []) => {
+  if (config2.length < 1) {
     return;
   }
-  const keyName = Object.keys(config[0])[0];
-  const data = config.map((e) => {
+  const keyName = Object.keys(config2[0])[0];
+  const data = config2.map((e) => {
     return e[keyName];
   });
   return data;
@@ -7906,9 +8343,9 @@ const flatObjectValueInArray = (config = []) => {
 const clearFromSessionStorage = () => {
   sessionStorage.removeItem("pageFormdata");
 };
-const getNavigationHistory = (config, path) => {
+const getNavigationHistory = (config2, path) => {
   if (path) {
-    let urlRoutes = config.name;
+    let urlRoutes = config2.name;
     const pathArrayAll = path.split(".");
     const arr = [];
     pathArrayAll.map((e, i) => {
@@ -7919,7 +8356,7 @@ const getNavigationHistory = (config, path) => {
       arr.push(`${arr[i - 1]}.${e}`);
     });
     arr.map((e) => {
-      const data = _.get(config, e);
+      const data = _.get(config2, e);
       if (data) {
         urlRoutes = urlRoutes + ` >    ${(data == null ? void 0 : data.name) || (data == null ? void 0 : data.eventType)}`;
       } else {
@@ -7953,16 +8390,16 @@ const getFormdataFromSessionStorage = (path) => {
   }
   return returnValue || pageFormdata;
 };
-async function saveHandler(store2, service2, submitHandler, pageName) {
+async function saveHandler(store2, service2, submitHandler) {
   var _a, _b;
   (_a = store2.searchParams) == null ? void 0 : _a.get("id");
   const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
   saveFormdataInSessionStorage(store2.ctx.core.data, path);
-  const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
+  const config2 = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (_.isEmpty(store2.ctx.core.errors)) {
     try {
-      const saveReturn = await submitHandler(store2, service2, config);
-      navigateHandler(store2, true, pageName ? `/${pageName}?id=${saveReturn.id}` : "/PageMasterRecords");
+      const saveReturn = await submitHandler(store2, service2, config2);
+      navigateHandler(store2, true, "/PageMasterRecords");
     } catch (err) {
       navigateHandler(store2, false);
     }
@@ -8031,9 +8468,10 @@ const sectionLabels = {
   DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
   InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
-  ColumnGroup: ["Core", "Components"]
+  ColumnGroup: ["Core", "Components"],
+  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
 };
-const refreshPage = (type, store2) => {
+function refreshPage(type, store2) {
   var _a;
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store2.theme.myTheme));
   if (type) {
@@ -8050,8 +8488,11 @@ const refreshPage = (type, store2) => {
     UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
     UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store2.theme.myTheme), ValidationSection];
   }
+  if (sessionStorage.getItem("copiedConfig")) {
+    this.ElementPathSetter(UiSchema);
+  }
   store2.setUiSchema(UiSchema);
-};
+}
 var Component = (store2, dynamicData2, submitHandler, service2) => {
   return {
     setPage: async function() {
@@ -8068,10 +8509,14 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       return getFormdataFromSessionStorage(path);
     },
     getSchema: function() {
-      return ComponentSchema;
+      const schema2 = _.cloneDeep(ComponentSchema);
+      if (sessionStorage.getItem("copiedConfig")) {
+        schema2.properties.RemoveItemButton.disabled = false;
+      }
+      return schema2;
     },
     okHandler: () => okHandler(store2),
-    saveHandler: async () => await saveHandler(store2, service2, submitHandler, "PageMaster"),
+    saveHandler: async () => await saveHandler(store2, service2, submitHandler),
     onChange: function() {
       var _a, _b, _c, _d;
       if (((_a = store2 == null ? void 0 : store2.formData) == null ? void 0 : _a.type) !== ((_b = store2 == null ? void 0 : store2.newData) == null ? void 0 : _b.type) && ((_c = store2 == null ? void 0 : store2.newData) == null ? void 0 : _c.type) !== void 0) {
@@ -8163,6 +8608,84 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const rowId = dynamicData2.path.split(".")[1];
       sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpEventSection");
+    },
+    copyPasteElement: function(paramStore, setPage = this.setPage.bind(this)) {
+      var _a;
+      const [actionType, elementType] = (_a = dynamicData2.path.split(".").pop()) == null ? void 0 : _a.split("_");
+      actionType === "Copy" ? this.CopyElement(paramStore, elementType) : this.PasteElement(setPage, elementType);
+    },
+    CopyElement: function(paramStore = store2, elementType) {
+      var _a;
+      const schema2 = lodash.exports.cloneDeep(paramStore.schema);
+      const uiSchema = lodash.exports.cloneDeep(paramStore.uiSchema);
+      schema2.properties.RemoveItemButton.disabled = false;
+      const rowId = dynamicData2.path.split(".")[1];
+      const parentPathOfCopiedComponent = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
+      const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
+      const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
+      this.ElementPathSetter(uiSchema, copiedFormData);
+      sessionStorage.setItem("copiedConfig", JSON.stringify(copiedFormData));
+      store2.setSchema(schema2);
+      store2.setUiSchema(uiSchema);
+    },
+    PasteElement: function(setPage, elementType) {
+      var _a;
+      if (!sessionStorage.getItem("copiedConfig")) {
+        store2.setNotify({
+          FailMessage: "No item has been copied.",
+          Fail: true
+        });
+        return;
+      }
+      const pastedElementParentPath = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
+      if (!Array.isArray(store2.formData.elements)) {
+        store2.formData.elements = [];
+      }
+      if (!Array.isArray(store2.formData.events)) {
+        store2.formData.events = [];
+      }
+      saveFormdataInSessionStorage(store2.ctx.core.data, pastedElementParentPath);
+      const formData = getFormdataFromSessionStorage(pastedElementParentPath);
+      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
+      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."
+      };
+      if (copiedConfig.Handler && elementType === "Component") {
+        store2.setNotify({
+          FailMessage: notificationMessages.Event,
+          Fail: true
+        });
+      } else if (copiedConfig.name && elementType === "Event") {
+        store2.setNotify({
+          FailMessage: notificationMessages.Component,
+          Fail: true
+        });
+      } else {
+        saveFormdataInSessionStorage(copiedConfig, pastedElementPath);
+        setPage();
+      }
+    },
+    RemoveItemButton: function(paramStore = store2) {
+      const schema2 = lodash.exports.cloneDeep(paramStore.schema);
+      const uiSchema = lodash.exports.cloneDeep(paramStore.uiSchema);
+      schema2.properties.RemoveItemButton.disabled = true;
+      uiSchema.elements[2].elements[1].config.main.heading = `No element copied`;
+      sessionStorage.removeItem("copiedConfig");
+      store2.setSchema(schema2);
+      store2.setUiSchema(uiSchema);
+    },
+    elementPathHandler: function(parentPath, rowId, elementType) {
+      if (elementType === "Component") {
+        return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
+      }
+      return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
+    },
+    ElementPathSetter: function(uiSchema, copiedFormData) {
+      const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
+      uiSchema.elements[2].elements[1].config.main.heading = `Copied Path: ${formData.pageName}`;
     }
   };
 };
@@ -8180,19 +8703,27 @@ var pageMaster = (funcParams) => {
     getFormdata: async function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
-      const config = await funcParams.pageConfigProvider(id);
+      const config2 = await funcParams.pageConfigProvider(id);
       const formData = getFormdataFromSessionStorage();
       if (formData) {
         return formData;
       }
-      saveFormdataInSessionStorage(config);
-      return config;
+      saveFormdataInSessionStorage(config2);
+      return config2;
     },
     getUiSchema: function() {
-      return PageMasterUiSchema(store2.theme.myTheme);
+      const UiSchema = _.cloneDeep(PageMasterUiSchema(store2.theme.myTheme));
+      if (sessionStorage.getItem("copiedConfig")) {
+        Component(store2, dynamicData2, submitHandler, service2).ElementPathSetter(UiSchema);
+      }
+      return UiSchema;
     },
     getSchema: () => {
-      return PageMasterSchema;
+      const schema2 = _.cloneDeep(PageMasterSchema);
+      if (sessionStorage.getItem("copiedConfig")) {
+        schema2.properties.RemoveItemButton.disabled = false;
+      }
+      return schema2;
     },
     backHandler: () => {
       sessionStorage.removeItem("pageFormdata");
@@ -8256,6 +8787,12 @@ var pageMaster = (funcParams) => {
       const rowId = dynamicData2.path.split(".")[1];
       sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpPageMasterEvent");
+    },
+    copyPasteElement: function() {
+      Component(store2, dynamicData2, submitHandler, service2).copyPasteElement(store2, this.setPage.bind(this));
+    },
+    RemoveItemButton: function() {
+      Component(store2, dynamicData2, submitHandler, service2).RemoveItemButton(store2);
     }
   };
 };
@@ -8344,12 +8881,15 @@ const EventSchema = {
           }
         }
       }
+    },
+    RemoveItemButton: {
+      disabled: true
     }
   },
   required: ["eventType", "Handler"]
 };
 const EventUiSchema = (theme) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const uiSchema = {
     type: "HorizontalLayout",
     heading: "Component",
@@ -8443,6 +8983,27 @@ const EventUiSchema = (theme) => {
                           }
                         }
                       }
+                    },
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/Paste_Event",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "copyPasteElement",
+                            size: "small",
+                            icon: "PasteIcon",
+                            iconLabel: "Paste",
+                            styleDefault: true
+                          },
+                          style: {
+                            mt: "6px"
+                          }
+                        }
+                      }
                     }
                   ]
                 },
@@ -8501,21 +9062,86 @@ const EventUiSchema = (theme) => {
                     }
                   }
                 }
+              },
+              {
+                header: "Copy",
+                field: "Copy_Event",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/Copy_Event",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "FileCopyIcon",
+                      onClick: "copyPasteElement",
+                      styleDefault: true
+                    }
+                  }
+                }
               }
             ]
           }
         ]
       },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 4, sm: 8 }
-        }
-      },
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout: { xs: 12, sm: 6 }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/RemoveItemButton",
+            options: {
+              widget: "IconButton"
+            },
+            config: {
+              layout: { xs: 1, sm: 1 },
+              main: {
+                onClick: "RemoveItemButton",
+                size: "large",
+                icon: "RejectIcon",
+                styleDefault: true
+              },
+              style: {
+                marginLeft: "-10px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/copiedElementDetails",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: { xs: 6, sm: 6 },
+              main: {
+                heading: "No element copied"
+              },
+              style: {
+                color: "#535557",
+                marginLeft: "-10px",
+                fontSize: "12px",
+                marginTop: "4px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              layout: { xs: 1, sm: 5 }
+            }
+          }
+        ]
+      },
       {
         type: "Control",
         scope: "#/properties/btn",
@@ -8568,87 +9194,116 @@ const EventUiSchema = (theme) => {
           layout: {
             xs: 12,
             sm: 12,
-            md: 6,
-            lg: 6
+            md: 12,
+            lg: 12
           },
-          main: {},
-          style: {
-            "& .MuiPaper-root": {
-              width: "30%"
-            },
-            "& .MuiTypography-root": {
-              padding: 0
-            },
-            wrapperStyle: {
-              width: { xs: "100%", sm: "100%", md: "98%" }
-            }
-          }
+          main: {
+            title: "WARNING!"
+          },
+          style: {}
         },
         elements: [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popupText",
             options: {
               widget: "Box"
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?"
               },
               style: {
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             }
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox"
-            },
-            config: {
-              main: {},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteEventButton",
-            options: {
-              widget: "Button"
-            },
+            type: "WrapperLayout",
             config: {
-              layout: 3,
-              main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "error",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button"
+              layout: 11,
+              main: {}
             },
-            config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpEvent",
-                size: "small"
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button"
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large"
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -8670,7 +9325,6 @@ const EventUiSchema = (theme) => {
             flexDirection: "row",
             position: "absolute",
             bottom: 0,
-            marginBottom: "-8px",
             height: "fit-content",
             overflow: "hidden",
             zIndex: 1e3,
@@ -8689,22 +9343,23 @@ const EventUiSchema = (theme) => {
                 heading: "Copywriter@ACT21.IO"
               },
               style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
+                color: ((_b = (_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text) == null ? void 0 : _b.disabled) || "#AFAFAF",
+                fontSize: "11px",
                 textAlign: "center",
-                lineHeight: 1,
+                lineHeight: 2,
                 width: "fit-content",
                 left: "50%",
                 position: "relative",
                 margin: 0,
                 flexGrow: 1,
-                height: 0
+                height: 0,
+                transform: "translate(-50%, 0%)"
               }
             }
           },
           {
             type: "Control",
-            scope: "#/properties/backIcon",
+            scope: "#/properties/FooterBackIcon",
             options: {
               widget: "Box"
             },
@@ -8715,24 +9370,24 @@ const EventUiSchema = (theme) => {
                 width: "fit-content"
               },
               style: {
-                fill: theme.palette.primary.main,
+                fill: (_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.primary) == null ? void 0 : _d.main,
                 width: 20,
                 height: 0,
-                margin: 0,
                 top: 0,
                 right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
                 ":hover": {
-                  fill: theme.palette.primary.dark
-                }
+                  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/text",
+            scope: "#/properties/FooterBackHandlerText",
             options: {
               widget: "Box"
             },
@@ -8747,17 +9402,17 @@ const EventUiSchema = (theme) => {
                 lineHeight: 1,
                 height: 0,
                 width: "fit-content",
-                color: theme.palette.primary.main,
+                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",
-                marginRight: 0,
                 top: 3,
                 right: "12px",
                 position: "absolute",
                 ":hover": {
-                  color: theme.palette.primary.dark
-                }
+                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.dark
+                },
+                marginRight: "4px"
               }
             }
           }
@@ -9048,6 +9703,10 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
           ...functionsName
         ];
       }
+      if (sessionStorage.getItem("copiedConfig")) {
+        Component(store22, dynamicData2, submitHandler, service2).ElementPathSetter(uiSchema);
+        schema2.properties.RemoveItemButton.disabled = false;
+      }
       store22.setSchema(schema2);
       store22.setUiSchema(uiSchema);
     },
@@ -9056,10 +9715,14 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       return EventUiSchema;
     },
     getSchema: () => {
-      return EventSchema;
+      const schema2 = _.cloneDeep(EventSchema);
+      if (sessionStorage.getItem("copiedConfig")) {
+        schema2.properties.RemoveItemButton.disabled = false;
+      }
+      return schema2;
     },
     okHandler: () => okHandler(store2),
-    saveHandler: async () => await saveHandler(store2, service2, submitHandler, "PageMaster"),
+    saveHandler: async () => await saveHandler(store2, service2, submitHandler),
     onChange: function() {
       var _a, _b, _c;
       if (((_a = store2 == null ? void 0 : store2.formData) == null ? void 0 : _a.Handler) !== ((_b = store2 == null ? void 0 : store2.newData) == null ? void 0 : _b.Handler) && ((_c = store2 == null ? void 0 : store2.newData) == null ? void 0 : _c.Handler) !== void 0) {
@@ -9099,6 +9762,12 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       const rowId = dynamicData2.path.split(".")[1];
       sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpEvent");
+    },
+    copyPasteElement: function() {
+      Component(store2, dynamicData2, submitHandler, service2).copyPasteElement(store2, this.setPage.bind(this));
+    },
+    RemoveItemButton: function() {
+      Component(store2, dynamicData2, submitHandler, service2).RemoveItemButton(store2);
     }
   };
 };
@@ -9270,36 +9939,40 @@ function executeCustomHandler(params) {
 }
 function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder) {
   if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
-    store2.setSchema((pre) => {
-      var _a;
-      return {
-        ...pre,
-        properties: {
-          ...pre.properties,
-          [componentName]: {
-            ...(_a = pre.properties) == null ? void 0 : _a[componentName],
-            oneOf: handlerResponse.data
+    if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
+      store2.setSchema((pre) => {
+        var _a;
+        return {
+          ...pre,
+          properties: {
+            ...pre.properties,
+            [componentName]: {
+              ...(_a = pre.properties) == null ? void 0 : _a[componentName],
+              oneOf: handlerResponse.data
+            }
           }
-        }
-      };
-    });
+        };
+      });
+    }
   } else if (eventConfig.type === "MultipleSelect" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
-    store2.setSchema((pre) => {
-      var _a;
-      return {
-        ...pre,
-        properties: {
-          ...pre.properties,
-          [componentName]: {
-            ...(_a = pre.properties) == null ? void 0 : _a[componentName],
-            type: "array",
-            items: {
-              oneOf: handlerResponse == null ? void 0 : handlerResponse.data
+    if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
+      store2.setSchema((pre) => {
+        var _a;
+        return {
+          ...pre,
+          properties: {
+            ...pre.properties,
+            [componentName]: {
+              ...(_a = pre.properties) == null ? void 0 : _a[componentName],
+              type: "array",
+              items: {
+                oneOf: handlerResponse == null ? void 0 : handlerResponse.data
+              }
             }
           }
-        }
-      };
-    });
+        };
+      });
+    }
   } else if (eventConfig.type === "page") {
     if (!(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
       store2.newData = {
@@ -9480,10 +10153,10 @@ var service = (funcParams) => {
           config: pageData == null ? void 0 : pageData.config
         }));
       }
-      const config = pageData == null ? void 0 : pageData.config;
+      const config2 = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
       const event2 = new CustomEvent("pageNameChanged", {
-        detail: { pageName: config.label }
+        detail: { pageName: config2.label }
       });
       window.dispatchEvent(event2);
       const theme = (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
@@ -9517,7 +10190,7 @@ var service = (funcParams) => {
                 },
                 style: {
                   color: ((_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.text) == null ? void 0 : _d.disabled) || "#AFAFAF",
-                  fontSize: "12px",
+                  fontSize: "11px",
                   textAlign: "center",
                   lineHeight: 2,
                   width: "fit-content",
@@ -9554,7 +10227,7 @@ var service = (funcParams) => {
                   ":hover": {
                     fill: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.dark
                   },
-                  marginRight: "13px"
+                  marginRight: "20px"
                 }
               }
             },
@@ -9576,7 +10249,7 @@ var service = (funcParams) => {
                   height: 0,
                   width: "fit-content",
                   color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main,
-                  fontSize: "14px",
+                  fontSize: "12px",
                   cursor: "pointer",
                   marginLeft: "2px",
                   top: 3,
@@ -9593,7 +10266,7 @@ var service = (funcParams) => {
         }
       );
       const schema2 = (_m = pageData == null ? void 0 : pageData.schema) != null ? _m : { type: "object", properties: {} };
-      eventGroups = extractEvents(config);
+      eventGroups = extractEvents(config2);
       executeEventsParameters = {
         config: {},
         componentName: "",
@@ -9744,415 +10417,89 @@ var service = (funcParams) => {
     },
     onNext: async function(functionParameters) {
       var _a, _b;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onNext", functionParameters);
-      if (((_b = eventGroups == null ? void 0 : eventGroups["onNext"]) == null ? void 0 : _b[path]) === void 0) {
-        functionParameters == null ? void 0 : functionParameters.handleNext();
-      }
-    },
-    onReset: async function(functionParameters) {
-      var _a, _b;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      await this.callHandler("onReset", functionParameters);
-      if (((_b = eventGroups == null ? void 0 : eventGroups["onReset"]) == null ? void 0 : _b[path]) === void 0) {
-        functionParameters == null ? void 0 : functionParameters.handleReset();
-      }
-    },
-    callHandler: async function(eventType, functionParameters) {
-      var _a, _b, _c;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      if (((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) !== void 0) {
-        Promise.all((_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path].map((eventConfig) => {
-          executeEventsParameters.store.functionParameters = functionParameters;
-          executeEvents({
-            ...executeEventsParameters,
-            config: eventConfig,
-            componentName: path
-          });
-        }));
-      }
-    },
-    downloadFile: downloadFile$1,
-    download: doDownload,
-    ...funcParams.functionsProvider
-  };
-};
-var leaderBoard = {
-  type: "WrapperLayout",
-  config: {
-    main: {
-      rowSpacing: 3,
-      header: true,
-      label: "LeaderBoard",
-      divider: true
-    },
-    style: {},
-    wrapperStyle: {
-      position: "relative",
-      width: "100%"
-    },
-    componentsBoxStyle: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "20px"
-    }
-  },
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/firstImage",
-      config: {
-        main: {
-          url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
-        },
-        style: {
-          imageStyle: {
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%"
-          },
-          containerStyle: {
-            objectFit: "cover",
-            position: "absolute",
-            top: { xs: "90px", "md": "60px" },
-            left: { "xs": "calc(50% - 50px)", "sm": "calc(50% - 50px)", "md": "calc(50% - 100px)" },
-            width: { "xs": "100px", "sm": "100px", "md": "200px" },
-            border: "5px solid rgb(179, 198, 255)",
-            height: { "xs": "100px", "sm": "100px", "md": "200px" },
-            borderRadius: "50%"
-          }
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Image"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/secondImage",
-      config: {
-        main: {
-          url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
-        },
-        style: {
-          imageStyle: {
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%"
-          },
-          containerStyle: {
-            objectFit: "cover",
-            position: "absolute",
-            top: { xs: "160px", "md": "130px" },
-            left: { "xs": "calc(25% - 45px)", "sm": "calc(25% - 45px)", "md": "calc(25% - 90px)" },
-            width: { "xs": "80px", "sm": "80px", "md": "180px" },
-            border: "5px solid rgb(179, 198, 255)",
-            height: { "xs": "80px", "sm": "80px", "md": "180px" },
-            borderRadius: "50%"
-          }
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Image"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/thirdImage",
-      config: {
-        main: {
-          url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
-        },
-        style: {
-          imageStyle: {
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%"
-          },
-          containerStyle: {
-            objectFit: "cover",
-            position: "absolute",
-            top: { xs: "160px", "md": "130px" },
-            left: { "xs": "calc(75% - 42.5px)", "sm": "calc(75% - 42.5px)", "md": "calc(75% - 85px)" },
-            width: { "xs": "80px", "sm": "80px", "md": "180px" },
-            border: "5px solid rgb(179, 198, 255)",
-            height: { "xs": "80px", "sm": "80px", "md": "180px" },
-            borderRadius: "50%"
-          }
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Image"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/firstName",
-      config: {
-        main: {
-          heading: "Satendra Raghav"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "black",
-          top: { xs: "190px", md: "270px" },
-          fontSize: { xs: "12px", md: "20px" },
-          left: "calc(50% - 90px)",
-          width: "180px",
-          fontWeight: "bold",
-          borderRadius: "50%",
-          zIndex: 7
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/secondName",
-      config: {
-        main: {
-          heading: "Satendra Raghav"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "black",
-          top: { xs: "240px", md: "320px" },
-          fontSize: { xs: "12px", md: "20px" },
-          left: "calc(25% - 90px)",
-          width: "180px",
-          fontWeight: "bold",
-          borderRadius: "50%"
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/thirdName",
-      config: {
-        main: {
-          heading: "Satendra Raghav"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "black",
-          top: { xs: "240px", md: "320px" },
-          fontSize: { xs: "12px", md: "20px" },
-          left: "calc(75% - 90px)",
-          width: "180px",
-          fontWeight: "bold",
-          borderRadius: "50%"
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/econd",
-      config: {
-        main: {
-          heading: "2"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textShadow: "2px 2px 5px #5065C7",
-          background: "green",
-          color: "white",
-          top: { xs: "225px", md: "280px" },
-          fontSize: { xs: "12px", md: "16px" },
-          left: { xs: "calc(25% - 12px)", md: "calc(25% - 16px)" },
-          width: { xs: "20px", md: "40px" },
-          border: { xs: "2px solid rgb(179, 198, 255)", md: "5px solid rgb(179, 198, 255)" },
-          height: { xs: "20px", md: "40px" },
-          "@keyframes rotateAnimation": {
-            from: {
-              transform: "rotate(0deg)"
-            },
-            to: {
-              transform: "rotate(360deg)"
-            }
-          },
-          animation: "rotateAnimation 4s infinite",
-          borderRadius: "50%",
-          zIndex: 5
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onNext", functionParameters);
+      if (((_b = eventGroups == null ? void 0 : eventGroups["onNext"]) == null ? void 0 : _b[path]) === void 0) {
+        functionParameters == null ? void 0 : functionParameters.handleNext();
       }
     },
-    {
-      type: "Control",
-      scope: "#/properties/first",
-      config: {
-        main: {
-          heading: "1"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textShadow: "2px 2px 5px #5065C7",
-          background: "green",
-          color: "white",
-          top: { xs: "175px", md: "230px" },
-          fontSize: { xs: "12px", md: "16px" },
-          left: { xs: "calc(50% - 12px)", md: "calc(50% - 16px)" },
-          "@keyframes rotateAnimation": {
-            from: {
-              transform: "rotate(0deg)"
-            },
-            to: {
-              transform: "rotate(360deg)"
-            }
-          },
-          animation: "rotateAnimation 4s infinite",
-          width: { xs: "20px", md: "40px" },
-          border: { xs: "2px solid rgb(179, 198, 255)", md: "5px solid rgb(179, 198, 255)" },
-          height: { xs: "20px", md: "40px" },
-          borderRadius: "50%",
-          zIndex: 5
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
+    onReset: async function(functionParameters) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onReset", functionParameters);
+      if (((_b = eventGroups == null ? void 0 : eventGroups["onReset"]) == null ? void 0 : _b[path]) === void 0) {
+        functionParameters == null ? void 0 : functionParameters.handleReset();
       }
     },
-    {
-      type: "Control",
-      scope: "#/properties/third",
-      config: {
-        main: {
-          heading: "3"
-        },
-        style: {
-          objectFit: "cover",
-          position: "absolute",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textShadow: "2px 2px 5px #5065C7",
-          background: "green",
-          color: "white",
-          top: { xs: "225px", md: "280px" },
-          fontSize: { xs: "12px", md: "16px" },
-          left: { xs: "calc(75% - 12px)", md: "calc(75% - 16px)" },
-          width: { xs: "20px", md: "40px" },
-          border: { xs: "2px solid rgb(179, 198, 255)", md: "5px solid rgb(179, 198, 255)" },
-          height: { xs: "20px", md: "40px" },
-          "@keyframes rotateAnimation": {
-            from: {
-              transform: "rotate(0deg)"
-            },
-            to: {
-              transform: "rotate(360deg)"
-            }
-          },
-          animation: "rotateAnimation 4s infinite",
-          borderRadius: "50%",
-          zIndex: 5
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
+    callHandler: async function(eventType, functionParameters) {
+      var _a, _b, _c;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      if (((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) !== void 0) {
+        Promise.all((_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path].map((eventConfig) => {
+          executeEventsParameters.store.functionParameters = functionParameters;
+          executeEvents({
+            ...executeEventsParameters,
+            config: eventConfig,
+            componentName: path
+          });
+        }));
       }
     },
-    {
-      type: "Control",
-      scope: "#/properties/leaderBoard/properties/table",
-      options: {
-        widget: "Table"
-      },
-      elements: [],
-      config: {
-        style: {
-          tableHeadstyle: {
-            fontWeight: 900,
-            background: "rgb(179, 198, 255)"
-          },
-          top: { xs: "300px", sm: "300px", md: "390px", lg: "390px" },
-          border: "2px solid rgb(179, 198, 255)",
-          width: "95%",
-          left: "2.5%",
-          margin: "auto"
-        },
-        main: {
-          disableAction: true,
-          disableSelection: true
-        }
-      }
-    }
-  ]
+    downloadFile: downloadFile$1,
+    download: doDownload,
+    ...funcParams.functionsProvider
+  };
+};
+var leaderBoard = {
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "LeaderBoard"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 12 },
+    main: {}
+  }
 };
-const buildLeaderBoard = (config) => {
+const buildLeaderBoard = (config2) => {
   const LeaderBoard = _.cloneDeep(leaderBoard);
-  if (config.elements) {
-    const modifyColumns = config.elements.map((e, i) => {
+  if (config2.elements) {
+    const modifyColumns = config2.elements.map((e, i) => {
       if (!e.type) {
         return { accessorKey: e.name, header: e.label || e.name };
       }
       const widgetSchema = { widget: buildUiSchema(e), accessorKey: e.name, header: e.label || e.name };
       return { ...widgetSchema };
     });
-    LeaderBoard.elements[9].elements = modifyColumns;
+    LeaderBoard.elements = modifyColumns;
   }
-  LeaderBoard.config.main.label = config.label;
-  if (config.name) {
-    LeaderBoard.elements[0].scope = `#/properties/${config.name}/properties/firstImage`;
-    LeaderBoard.elements[3].scope = `#/properties/${config.name}/properties/firstName`;
-    LeaderBoard.elements[1].scope = `#/properties/${config.name}/properties/secondImage`;
-    LeaderBoard.elements[4].scope = `#/properties/${config.name}/properties/secondName`;
-    LeaderBoard.elements[2].scope = `#/properties/${config.name}/properties/thirdImage`;
-    LeaderBoard.elements[5].scope = `#/properties/${config.name}/properties/thirdName`;
-    LeaderBoard.elements[9].scope = `#/properties/${config.name}/properties/table`;
+  LeaderBoard.config.main.label = config2.label;
+  if (config2.name) {
+    LeaderBoard.scope = `#/properties/${config2.name}`;
   }
-  if (config.firstImage) {
-    LeaderBoard.elements[0].config.main.url = config.firstImage;
+  if (config2.firstImage) {
+    LeaderBoard.config.main.firstImage = config2.firstImage;
   }
-  if (config.secondImage) {
-    LeaderBoard.elements[1].config.main.url = config.secondImage;
+  if (config2.secondImage) {
+    LeaderBoard.config.main.secondImage = config2.secondImage;
   }
-  if (config.secondImage) {
-    LeaderBoard.elements[2].config.main.url = config.thirdImage;
+  if (config2.thirdImage) {
+    LeaderBoard.config.main.thirdImage = config2.thirdImage;
   }
-  if (config.layout) {
-    LeaderBoard.config.layout = createLayoutFormat(config.layout);
+  if (config2.nameKey) {
+    LeaderBoard.config.main.nameKey = config2.nameKey;
+  }
+  if (config2.imageKey) {
+    LeaderBoard.config.main.imageKey = config2.imageKey;
+  }
+  if (config2.scoreKey) {
+    LeaderBoard.config.main.scoreKey = config2.scoreKey;
+  }
+  if (config2.layout) {
+    LeaderBoard.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    LeaderBoard.config.style = JSON.parse(config2.style);
   }
   return LeaderBoard;
 };
@@ -10163,7 +10510,7 @@ var progressBar = {
     widget: "ProgressBar"
   },
   config: {
-    layout: 6,
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     main: {
       developOnlyProgresBar: false,
       bottomLabel_3: "Remaining",
@@ -10171,44 +10518,44 @@ var progressBar = {
     }
   }
 };
-const buildProgressBarCard = (config, myScope) => {
+const buildProgressBarCard = (config2, myScope) => {
   const progressBarCard = _.cloneDeep(progressBar);
   progressBarCard.scope = myScope;
-  if (config.heading) {
-    progressBarCard.config.main.heading = config.heading;
+  if (config2.heading) {
+    progressBarCard.config.main.heading = config2.heading;
   }
-  if (config.bottomLabel_3) {
-    progressBarCard.config.main.bottomLabel_3 = config.bottomLabel_3;
+  if (config2.bottomLabel_3) {
+    progressBarCard.config.main.bottomLabel_3 = config2.bottomLabel_3;
   }
-  if (config.bottomLabel_2) {
-    progressBarCard.config.main.bottomLabel_2 = config.bottomLabel_2;
+  if (config2.bottomLabel_2) {
+    progressBarCard.config.main.bottomLabel_2 = config2.bottomLabel_2;
   }
-  if (config.bottomLabel_1) {
-    progressBarCard.elements[0].config.main.bottomLabel_1 = config.bottomLabel_1;
+  if (config2.bottomLabel_1) {
+    progressBarCard.elements[0].config.main.bottomLabel_1 = config2.bottomLabel_1;
   }
-  if (config.layout) {
-    progressBarCard.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    progressBarCard.config.layout = createLayoutFormat(config2.layout);
   }
   return progressBarCard;
 };
-const buildProgressBar = (config, componentScope) => {
+const buildProgressBar = (config2, componentScope2) => {
   const ProgressBar = _.cloneDeep(progressBar);
-  ProgressBar.scope = componentScope;
-  if (config.layout) {
-    ProgressBar.config.layout = config.layout;
+  ProgressBar.scope = componentScope2;
+  if (config2.layout) {
+    ProgressBar.config.layout = config2.layout;
   }
-  ProgressBar.config.main.heading = config.label;
-  if (config.bottomLabel_3) {
-    ProgressBar.config.main.bottomLabel_3 = config.bottomLabel_3;
+  ProgressBar.config.main.heading = config2.label;
+  if (config2.bottomLabel_3) {
+    ProgressBar.config.main.bottomLabel_3 = config2.bottomLabel_3;
   }
-  if (config.layout) {
-    ProgressBar.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    ProgressBar.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.bottomLabel_2) {
-    ProgressBar.config.main.bottomLabel_2 = config.bottomLabel_2;
+  if (config2.bottomLabel_2) {
+    ProgressBar.config.main.bottomLabel_2 = config2.bottomLabel_2;
   }
-  if (config.bottomLabel_1) {
-    ProgressBar.config.main.bottomLabel_1 = config.bottomLabel_1;
+  if (config2.bottomLabel_1) {
+    ProgressBar.config.main.bottomLabel_1 = config2.bottomLabel_1;
   }
   return ProgressBar;
 };
@@ -10219,8 +10566,12 @@ const BarGraph = {
     widget: "Graph"
   },
   config: {
-    main: {},
-    style: { containerStyle: {} }
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
+    main: {
+      type: "BarGraph",
+      legendLabels: null
+    },
+    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
   }
 };
 const PieGraph = {
@@ -10230,10 +10581,12 @@ const PieGraph = {
     widget: "Graph"
   },
   config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
     main: {
-      type: "PieGraph"
+      type: "PieGraph",
+      legendLabels: null
     },
-    style: {}
+    style: { containerStyle: {}, labelStyle: { margin: {} }, pieStyle: {} }
   }
 };
 const LineGraph = {
@@ -10243,32 +10596,12 @@ const LineGraph = {
     widget: "Graph"
   },
   config: {
-    layout: 12,
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
     main: {
       type: "LineGraph",
-      header: "Quartely Incentive in Thousand",
-      bottomLabel: "Years",
-      leftLabel: "Incentive",
-      gridHidden: true,
-      numHidden: false,
-      tooltipDataKey: ["MAMA New Project", "Second", "Third"],
-      axisLeft: true,
-      axisBottom: true,
-      hideLeftAxisLine: false,
-      hideBottomAxisLine: false,
-      legend: {
-        labelColor: "green",
-        direction: "row",
-        align: "right",
-        colorRectWidth: 20
-      }
+      legendLabels: null
     },
-    style: {
-      containerStyle: {},
-      headerStyle: {},
-      labelStyle: {},
-      lineStyle: {}
-    }
+    style: { containerStyle: {}, labelStyle: { margin: {} }, lineStyle: {} }
   }
 };
 const HorizontalBarGraph = {
@@ -10278,42 +10611,51 @@ const HorizontalBarGraph = {
     widget: "Graph"
   },
   config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
     main: {
-      type: "HorizontalBarGraph"
+      type: "HorizontalBarGraph",
+      legendLabels: null
     },
-    style: {}
+    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
   }
 };
-const buildHorizontalBarGraph = (config, componentScope) => {
+const buildHorizontalBarGraph = (config2, componentScope2) => {
   const horizontalBarGraph = _.cloneDeep(HorizontalBarGraph);
-  horizontalBarGraph.scope = componentScope;
-  if (config.layout) {
-    horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+  horizontalBarGraph.scope = componentScope2;
+  if (config2.layout) {
+    horizontalBarGraph.config.layout = createLayoutFormat(config2.layout);
   }
-  horizontalBarGraph.config.main.type = config.graphType;
-  horizontalBarGraph.scope = componentScope;
-  horizontalBarGraph.config.main.header = config.heading;
-  if (config.barColor) {
-    horizontalBarGraph.config.barStyle.color = config.barColor;
+  horizontalBarGraph.config.main.type = config2.graphType;
+  horizontalBarGraph.scope = componentScope2;
+  horizontalBarGraph.config.main.header = config2.heading;
+  if (config2.legendHide) {
+    horizontalBarGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  if (config.xAxisValue) {
-    horizontalBarGraph.config.main.xAxisValue = config.xAxisValue;
+  if (config2.bottomAxisAngle) {
+    horizontalBarGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
-  if (config.containerBackground) {
-    horizontalBarGraph.config.containerStyle.background = config.containerBackground;
+  if (config2.legendLabels) {
+    horizontalBarGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
   }
-  if (config.height) {
-    horizontalBarGraph.config.style = {
-      containerStyle: {
-        height: config.height
-      }
+  if (config2.pieArcColors) {
+    horizontalBarGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+  }
+  if (config2.xAxisValue) {
+    horizontalBarGraph.config.main.xAxisValue = config2.xAxisValue;
+  }
+  if (config2.height) {
+    horizontalBarGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.leftMargin) {
+    horizontalBarGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
     };
   }
-  if (config.bottomLabel) {
-    horizontalBarGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.bottomLabel) {
+    horizontalBarGraph.config.main.bottomLabel = config2.bottomLabel;
   }
-  if (config.leftLabel) {
-    horizontalBarGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.leftLabel) {
+    horizontalBarGraph.config.main.leftLabel = config2.leftLabel;
   }
   return horizontalBarGraph;
 };
@@ -10363,20 +10705,20 @@ var SpeedoMeter = {
     }
   }
 };
-const buildSpeedoMeter = (config, componentScope) => {
+const buildSpeedoMeter = (config2, componentScope2) => {
   const speedoMeter = _.cloneDeep(SpeedoMeter);
-  speedoMeter.scope = componentScope;
-  if (config.layout) {
-    speedoMeter.config.layout = createLayoutFormat(config.layout);
+  speedoMeter.scope = componentScope2;
+  if (config2.layout) {
+    speedoMeter.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.heading) {
-    speedoMeter.config.main.header = config.heading;
+  if (config2.heading) {
+    speedoMeter.config.main.header = config2.heading;
   }
-  if (config.segments) {
-    speedoMeter.config.main.segments = config.segments;
+  if (config2.segments) {
+    speedoMeter.config.main.segments = config2.segments;
   }
-  if (config.style) {
-    const styleObj = JSON.parse(config.style);
+  if (config2.style) {
+    const styleObj = JSON.parse(config2.style);
     if (styleObj == null ? void 0 : styleObj.style) {
       speedoMeter.config.style = { ...speedoMeter.config.style, ...styleObj.style };
     }
@@ -10384,90 +10726,95 @@ const buildSpeedoMeter = (config, componentScope) => {
       speedoMeter.config.style.containerStyle = { ...speedoMeter.config.style.containerStyle, ...styleObj.containerStyle };
     }
   }
-  if (config.width) {
-    speedoMeter.config.main.width = config.width;
+  if (config2.width) {
+    speedoMeter.config.main.width = config2.width;
   }
-  if (config.speedoCaption) {
-    speedoMeter.config.main.currentValueText = config.speedoCaption;
+  if (config2.speedoCaption) {
+    speedoMeter.config.main.currentValueText = config2.speedoCaption;
   }
-  if (config.data) {
-    speedoMeter.config.main.data = config.data;
+  if (config2.data) {
+    speedoMeter.config.main.data = config2.data;
   }
-  if (config.needleColor) {
-    speedoMeter.config.style.needleColor = config.needleColor;
+  if (config2.needleColor) {
+    speedoMeter.config.style.needleColor = config2.needleColor;
   }
-  if (config.segments) {
-    speedoMeter.config.style.segments = config.segments;
+  if (config2.segments) {
+    speedoMeter.config.style.segments = config2.segments;
   }
-  if (config.endColor) {
-    speedoMeter.config.style.endColor = config.endColor;
+  if (config2.endColor) {
+    speedoMeter.config.style.endColor = config2.endColor;
   }
-  if (config.startColor) {
-    speedoMeter.config.style.startColor = config.startColor;
+  if (config2.startColor) {
+    speedoMeter.config.style.startColor = config2.startColor;
   }
-  if (config.segmentColors) {
-    speedoMeter.config.style.segmentColors = config.segmentColors;
+  if (config2.segmentColors) {
+    speedoMeter.config.style.segmentColors = config2.segmentColors;
   }
   return speedoMeter;
 };
-const buildPieGraph = (config, componentScope) => {
+const buildPieGraph = (config2, componentScope2) => {
   const pieGraph = _.cloneDeep(PieGraph);
-  if (config.layout) {
-    pieGraph.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    pieGraph.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.height) {
-    pieGraph.config.style = {
-      containerStyle: {
-        height: config.height
-      }
-    };
+  if (config2.height) {
+    pieGraph.config.style.containerStyle.height = config2.height;
   }
-  if (config.legendHide) {
-    pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+  if (config2.legendHide) {
+    pieGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  pieGraph.scope = componentScope;
-  pieGraph.config.main.header = config.heading;
-  if (config.legendLabels) {
-    pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  pieGraph.scope = componentScope2;
+  pieGraph.config.main.header = config2.heading;
+  if (config2.legendLabels) {
+    pieGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
   }
-  if (config.xAxisValue) {
-    pieGraph.config.main.xAxisValue = config.xAxisValue;
+  if (config2.xAxisValue) {
+    pieGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.pieArcColors) {
-    pieGraph.config.style = {
-      pieStyle: {
-        colorRange: flatObjectValueInArray(config.pieArcColors)
-      }
-    };
+  if (config2.pieArcColors) {
+    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
   }
   return pieGraph;
 };
-const buildStackbarGraph = (config, componentScope) => {
+const buildStackbarGraph = (config2, componentScope2) => {
+  var _a;
   const barGraph = _.cloneDeep(BarGraph);
-  if (config.layout) {
-    barGraph.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    barGraph.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.legendHide) {
+    barGraph.config.main.legendAvailable = config2.legendHide;
+    barGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  if (config.legendHide) {
-    barGraph.config.main.legendAvailable = config.legendHide;
+  if (config2.bottomAxisAngle) {
+    barGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
-  barGraph.config.main.type = config.graphType;
-  barGraph.config.main.header = config.heading;
-  if (config.barColor) {
-    barGraph.config.barStyle.color = config.barColor;
+  barGraph.config.main.type = (_a = config2 == null ? void 0 : config2.graphType) != null ? _a : "BarGraph";
+  barGraph.config.main.header = config2.heading;
+  if (config2.legendLabels) {
+    barGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
   }
-  if (config.xAxisValue) {
-    barGraph.config.main.xAxisValue = config.xAxisValue;
+  if (config2.pieArcColors) {
+    barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
   }
-  if (config.height) {
-    barGraph.config.style.containerStyle.height = config.height;
+  if (config2.xAxisValue) {
+    barGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.bottomLabel) {
-    barGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.height) {
+    barGraph.config.style.containerStyle.height = config2.height;
   }
-  if (config.leftLabel) {
-    barGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.leftMargin) {
+    barGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
+  }
+  if (config2.bottomLabel) {
+    barGraph.config.main.bottomLabel = config2.bottomLabel;
   }
-  barGraph.scope = componentScope;
+  if (config2.leftLabel) {
+    barGraph.config.main.leftLabel = config2.leftLabel;
+  }
+  barGraph.scope = componentScope2;
   return barGraph;
 };
 var RunnerBoyProgressBar = {
@@ -10477,15 +10824,15 @@ var RunnerBoyProgressBar = {
     widget: "RunnerBoyProgressBar"
   },
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     main: {}
   }
 };
-const RunnerBoyProgressbar = (config, componentScope) => {
+const RunnerBoyProgressbar = (config2, componentScope2) => {
   const RunnerBoy = _.cloneDeep(RunnerBoyProgressBar);
-  RunnerBoy.scope = componentScope;
-  if (config.layout) {
-    RunnerBoy.config.layout = createLayoutFormat(config.layout);
+  RunnerBoy.scope = componentScope2;
+  if (config2.layout) {
+    RunnerBoy.config.layout = createLayoutFormat(config2.layout);
   }
   return RunnerBoy;
 };
@@ -10500,19 +10847,19 @@ var Tabsection = {
   },
   elements: []
 };
-const buildTabSection = (config, componentScope) => {
+const buildTabSection = (config2, componentScope2) => {
   const tab = _.cloneDeep(Tabsection);
-  tab.scope = componentScope;
-  if (config.lazyLoad) {
-    tab.config.main.lazyLoad = config.lazyLoad === "YES" ? true : false;
+  tab.scope = componentScope2;
+  if (config2.lazyLoad) {
+    tab.config.main.lazyLoad = config2.lazyLoad === "YES" ? true : false;
   }
-  if (config.orientation) {
-    tab.config.main.orientation = config.orientation === "YES" ? "vertical" : "horizontal";
+  if (config2.orientation) {
+    tab.config.main.orientation = config2.orientation === "YES" ? "vertical" : "horizontal";
   }
-  if (config.sectionLabels) {
-    tab.config.main.tabLabels = config.sectionLabels.map((e) => e.label);
+  if (config2.sectionLabels) {
+    tab.config.main.tabLabels = config2.sectionLabels.map((e) => e.label);
   }
-  tab.config.main.id = config.name;
+  tab.config.main.id = config2.name;
   return tab;
 };
 var WrapperSection = {
@@ -10527,20 +10874,20 @@ var WrapperSection = {
   },
   elements: []
 };
-const buildWrapperSection = (config, componentScope) => {
+const buildWrapperSection = (config2, componentScope2) => {
   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 === "No" ? false : true;
-  if (config.defaultStyle) {
-    wrapper.config.defaultStyle = config.defaultStyle === "YES" ? true : false;
+  wrapper.scope = componentScope2;
+  wrapper.config.main.label = config2.label;
+  wrapper.config.main.divider = config2.divider === "YES" ? true : false;
+  wrapper.config.main.isAccordion = config2.isAccordion === "No" ? false : true;
+  if (config2.defaultStyle) {
+    wrapper.config.defaultStyle = config2.defaultStyle === "YES" ? true : false;
   }
-  if (config.style) {
-    wrapper.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    wrapper.config.style = JSON.parse(config2.style);
   }
-  if (config.layout) {
-    wrapper.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    wrapper.config.layout = createLayoutFormat(config2.layout);
   }
   return wrapper;
 };
@@ -10558,23 +10905,23 @@ var TextInputField = {
     style: {}
   }
 };
-const buildTextField = (config, componentScope) => {
+const buildTextField = (config2, componentScope2) => {
   const inputField = _.cloneDeep(TextInputField);
-  inputField.config.main.label = config.label;
-  if (config.style) {
-    inputField.config.style = JSON.parse(config.style);
+  inputField.config.main.label = config2.label;
+  if (config2.style) {
+    inputField.config.style = JSON.parse(config2.style);
   }
-  if (config.InputFormatingAndMasking) {
-    inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map((e) => e.formatElement);
+  if (config2.InputFormatingAndMasking) {
+    inputField.config.main.formatStrArray = config2.InputFormatingAndMasking.map((e) => e.formatElement);
   }
-  if (config.placeholder) {
-    inputField.config.main.placeholder = config.placeholder;
+  if (config2.placeholder) {
+    inputField.config.main.placeholder = config2.placeholder;
   }
-  if (config.layout) {
-    inputField.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    inputField.config.layout = createLayoutFormat(config2.layout);
   }
-  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  inputField.scope = componentScope;
+  inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  inputField.scope = componentScope2;
   return inputField;
 };
 var SelectInputField = {
@@ -10592,22 +10939,22 @@ var SelectInputField = {
     }
   }
 };
-const buildSelect = (config, componentScope) => {
+const buildSelect = (config2, componentScope2) => {
   const selectInputField = _.cloneDeep(SelectInputField);
-  selectInputField.config.main.label = config.label;
-  if (config.value) {
-    selectInputField.config.main.options = config.value;
+  selectInputField.config.main.label = config2.label;
+  if (config2.value) {
+    selectInputField.config.main.options = config2.value;
   }
-  if (config.freeSolo) {
-    selectInputField.config.main.freeSolo = config.freeSolo === "YES" ? true : false;
+  if (config2.freeSolo) {
+    selectInputField.config.main.freeSolo = config2.freeSolo === "YES" ? true : false;
   }
-  if (config.lazyLoading) {
-    selectInputField.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
+  if (config2.lazyLoading) {
+    selectInputField.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
-  if (config.layout) {
-    selectInputField.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    selectInputField.config.layout = createLayoutFormat(config2.layout);
   }
-  selectInputField.scope = componentScope;
+  selectInputField.scope = componentScope2;
   return selectInputField;
 };
 var Button = {
@@ -10621,7 +10968,6 @@ var Button = {
     main: {
       name: "Compare",
       variant: "contained",
-      color: "info",
       type: "text",
       startIcon: "",
       styleDefault: false,
@@ -10632,37 +10978,37 @@ var Button = {
     style: {}
   }
 };
-const buildButton = (config, componentScope) => {
+const buildButton = (config2, componentScope2) => {
   const button = _.cloneDeep(Button);
-  if (config.buttonType) {
-    button.options.widget = config.buttonType === "IconButton" ? "IconButton" : "Button";
-    config.buttonType === "ButtonWithIconAndText" ? button.config.main.startIcon = config.iconName : button.config.main.icon = config.iconName;
+  if (config2.buttonType) {
+    button.options.widget = config2.buttonType === "IconButton" ? "IconButton" : "Button";
+    config2.buttonType === "ButtonWithIconAndText" ? button.config.main.startIcon = config2.iconName : button.config.main.icon = config2.iconName;
   }
-  if (config.layout) {
-    button.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    button.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.tooltipMessage) {
-    button.config.main.tooltipMessage = config.tooltipMessage;
+  if (config2.tooltipMessage) {
+    button.config.main.tooltipMessage = config2.tooltipMessage;
   }
-  if (config.defaultStyle) {
-    if (config.buttonType === "IconButton") {
-      button.config.main.styleDefault = config.defaultStyle === "true" ? true : false;
+  if (config2.defaultStyle) {
+    if (config2.buttonType === "IconButton") {
+      button.config.main.styleDefault = config2.defaultStyle === "true" ? true : false;
     } else {
-      button.config.main.enableDefaultStyle = config.defaultStyle === "true" ? false : true;
+      button.config.main.enableDefaultStyle = config2.defaultStyle === "true" ? false : true;
     }
   }
-  button.scope = componentScope;
-  if (config.style) {
-    button.config.style = JSON.parse(config.style);
+  button.scope = componentScope2;
+  if (config2.style) {
+    button.config.style = JSON.parse(config2.style);
   }
-  if (config.size) {
-    button.config.main.size = config.size;
+  if (config2.size) {
+    button.config.main.size = config2.size;
   }
-  if (config.color) {
-    button.config.main.color = config.color;
+  if (config2.color) {
+    button.config.main.color = config2.color;
   }
-  if (config.label) {
-    button.config.main.name = config.label;
+  if (config2.label) {
+    button.config.main.name = config2.label;
   }
   return button;
 };
@@ -10686,71 +11032,71 @@ var Table = {
     }
   }
 };
-const buildTable = (config, componentScope) => {
+const buildTable = (config2, componentScope2) => {
   const table = _.cloneDeep(Table);
-  table.scope = componentScope;
-  if (config.style) {
-    table.config.style = JSON.parse(config.style);
+  table.scope = componentScope2;
+  if (config2.style) {
+    table.config.style = JSON.parse(config2.style);
   }
-  if (config.lazyLoading) {
-    table.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
+  if (config2.lazyLoading) {
+    table.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
-  if (config.enableRowMovement) {
-    table.config.main.enableRowMovement = config.enableRowMovement === "YES" ? true : false;
+  if (config2.enableRowMovement) {
+    table.config.main.enableRowMovement = config2.enableRowMovement === "YES" ? true : false;
   }
-  if (config.enableExpanding) {
-    table.config.main.enableExpanding = config.enableExpanding === "YES" ? true : false;
+  if (config2.enableExpanding) {
+    table.config.main.enableExpanding = config2.enableExpanding === "YES" ? true : false;
   }
-  if (config.enableExpandAll) {
-    table.config.main.enableExpandAll = config.enableExpandAll === "YES" ? true : false;
+  if (config2.enableExpandAll) {
+    table.config.main.enableExpandAll = config2.enableExpandAll === "YES" ? true : false;
   }
-  if (config.paginateExpandedRows) {
-    table.config.main.paginateExpandedRows = config.paginateExpandedRows === "YES" ? true : false;
+  if (config2.paginateExpandedRows) {
+    table.config.main.paginateExpandedRows = config2.paginateExpandedRows === "YES" ? true : false;
   }
-  if (config.treeStructure) {
-    table.config.main.treeStructure = config.treeStructure === "YES" ? "flatTreeMap" : false;
+  if (config2.treeStructure) {
+    table.config.main.treeStructure = config2.treeStructure === "YES" ? "flatTreeMap" : false;
   }
-  if (config.SelectionAvailable) {
-    table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
+  if (config2.SelectionAvailable) {
+    table.config.main.Selection = config2.SelectionAvailable === "YES" ? true : false;
   }
-  if (config.ColumnResizingAvailable) {
-    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? false : true;
+  if (config2.ColumnResizingAvailable) {
+    table.config.main.disableColumnResizing = config2.ColumnResizingAvailable === "YES" ? false : true;
   }
-  if (config.DragAvailable) {
-    table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false;
+  if (config2.DragAvailable) {
+    table.config.main.enableDrag = config2.DragAvailable === "YES" ? true : false;
   }
-  if (config.downloadAllData) {
-    table.config.main.downloadAllData = config.downloadAllData === "YES" ? true : false;
+  if (config2.downloadAllData) {
+    table.config.main.downloadAllData = config2.downloadAllData === "YES" ? true : false;
   }
-  if (config.disableGlobalSearch) {
-    table.config.main.disableGlobalSearch = config.disableGlobalSearch === "YES" ? true : false;
+  if (config2.disableGlobalSearch) {
+    table.config.main.disableGlobalSearch = config2.disableGlobalSearch === "YES" ? true : false;
   }
-  if (config.disableColumnFilter) {
-    table.config.main.disableColumnFilter = config.disableColumnFilter === "YES" ? true : false;
+  if (config2.disableColumnFilter) {
+    table.config.main.disableColumnFilter = config2.disableColumnFilter === "YES" ? true : false;
   }
-  if (config.disableSorting) {
-    table.config.main.disableSorting = config.disableSorting === "YES" ? true : false;
+  if (config2.disableSorting) {
+    table.config.main.disableSorting = config2.disableSorting === "YES" ? true : false;
   }
-  if (config.disableEditColumn) {
-    table.config.main.disableEditColumn = config.disableEditColumn === "YES" ? true : false;
+  if (config2.disableEditColumn) {
+    table.config.main.disableEditColumn = config2.disableEditColumn === "YES" ? true : false;
   }
-  if (config.disableFullScreenToggle) {
-    table.config.main.disableFullScreenToggle = config.disableFullScreenToggle === "YES" ? true : false;
+  if (config2.disableFullScreenToggle) {
+    table.config.main.disableFullScreenToggle = config2.disableFullScreenToggle === "YES" ? true : false;
   }
-  if (config.disableDensityToggle) {
-    table.config.main.disableDensityToggle = config.disableDensityToggle === "YES" ? true : false;
+  if (config2.disableDensityToggle) {
+    table.config.main.disableDensityToggle = config2.disableDensityToggle === "YES" ? true : false;
   }
-  if (config.disableDownloadFile) {
-    table.config.main.disableDownloadFile = config.disableDownloadFile === "YES" ? true : false;
+  if (config2.disableDownloadFile) {
+    table.config.main.disableDownloadFile = config2.disableDownloadFile === "YES" ? true : false;
   }
-  if (config.disablePagination) {
-    table.config.main.disablePagination = config.disablePagination === "YES" ? true : false;
+  if (config2.disablePagination) {
+    table.config.main.disablePagination = config2.disablePagination === "YES" ? true : false;
   }
-  if (config.Table_Download_Keys_Name) {
-    table.config.main.TableDownloadKeysName = config.Table_Download_Keys_Name.map((e) => e.KeyName);
+  if (config2.Table_Download_Keys_Name) {
+    table.config.main.TableDownloadKeysName = config2.Table_Download_Keys_Name.map((e) => e.KeyName);
   }
-  if (config.selectKey) {
-    table.config.main.selectKey = config.selectKey;
+  if (config2.selectKey) {
+    table.config.main.selectKey = config2.selectKey;
   }
   return table;
 };
@@ -10766,15 +11112,15 @@ const Box = {
     style: {}
   }
 };
-const buildLabel = (config, componentScope) => {
+const buildLabel = (config2, componentScope2) => {
   const box = _.cloneDeep(Box);
-  box.scope = componentScope;
-  box.config.main.heading = config.label;
-  if (config.layout) {
-    box.config.layout = createLayoutFormat(config.layout);
+  box.scope = componentScope2;
+  box.config.main.heading = config2.label;
+  if (config2.layout) {
+    box.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    box.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    box.config.style = JSON.parse(config2.style);
   }
   return box;
 };
@@ -10814,42 +11160,39 @@ const downloadFile = {
     "widget": "DownloadFile"
   }
 };
-const buildUploadFile = (config, componentScope) => {
+const buildUploadFile = (config2, componentScope2) => {
   const UploadFile = _.cloneDeep(uploadFile);
-  UploadFile.scope = componentScope;
-  UploadFile.config.main.label = config.label;
-  if (config.layout) {
-    UploadFile.config.layout = config.layout;
-  }
-  if (config.layout) {
-    uploadFile.config.layout = createLayoutFormat(config.layout);
+  UploadFile.scope = componentScope2;
+  UploadFile.config.main.label = config2.label;
+  if (config2.layout) {
+    UploadFile.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    UploadFile.config.style = config.style;
+  if (config2.style) {
+    UploadFile.config.style = config2.style;
   }
-  if (config.required) {
+  if (config2.required) {
     UploadFile.config.main.required = true;
   }
-  UploadFile.config.main.errorMessage = config.errorMessage;
+  UploadFile.config.main.errorMessage = config2.errorMessage;
   return UploadFile;
 };
-const buildDownloadFile = (config, componentScope) => {
+const buildDownloadFile = (config2, componentScope2) => {
   const DownloadFile = _.cloneDeep(downloadFile);
-  DownloadFile.scope = componentScope;
-  if (config.layout) {
-    DownloadFile.config.layout = config.layout;
+  DownloadFile.scope = componentScope2;
+  if (config2.layout) {
+    DownloadFile.config.layout = config2.layout;
   }
-  if (config.style) {
-    DownloadFile.config.style = config.style;
+  if (config2.style) {
+    DownloadFile.config.style = config2.style;
   }
-  if (config.required) {
+  if (config2.required) {
     DownloadFile.config.main.required = true;
   }
-  if (config.layout) {
-    DownloadFile.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    DownloadFile.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.errorMessage) {
-    DownloadFile.config.main.errorMessage = config.errorMessage;
+  if (config2.errorMessage) {
+    DownloadFile.config.main.errorMessage = config2.errorMessage;
   }
   return DownloadFile;
 };
@@ -10858,15 +11201,23 @@ function Card(theme) {
     type: "WrapperLayout",
     config: {
       main: {},
-      wrapperStyle: {},
+      wrapperStyle: {
+        position: "relative",
+        top: "50%",
+        transform: "translateY(-50%)"
+      },
       componentsBoxStyle: {
+        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
         flexDirection: "row",
         flexWrap: "nowrap",
-        width: "100%",
+        width: "100% !important",
         background: "transparent",
-        border: `1.5px solid ${theme.palette.primary.main}`,
-        borderRadius: "20px",
-        padding: "0px 20px 0px 20px",
+        border: `1.5px solid ${theme.palette.primary.light}`,
+        borderRadius: "8px",
+        padding: "0px 4px",
+        height: "100%",
+        alignItems: "center",
+        marginLeft: "0px",
         "&: hover": {
           background: `${theme.palette.primary.main}`,
           border: `1.5px solid black`,
@@ -10892,7 +11243,6 @@ function Card(theme) {
                 gap: 0
               },
               wrapperStyle: {
-                marginTop: "4px",
                 background: "transparent"
               },
               componentsBoxStyle: {
@@ -10907,27 +11257,78 @@ function Card(theme) {
             },
             elements: [
               {
-                type: "Control",
-                scope: "#/properties/programType",
+                type: "WrapperLayout",
                 config: {
                   main: {
-                    heading: "$5000.00"
+                    columnSpacing: 0,
+                    gap: 0
                   },
-                  style: {
-                    color: "black",
-                    display: "flex",
-                    fontSize: { xs: "24px", md: "28px" },
-                    fontWeight: "bold",
-                    background: "inherit",
-                    justifyContent: "flex-start",
-                    width: "calc(100%+8px)",
-                    margin: "-8px"
+                  wrapperStyle: {
+                    background: "transparent"
+                  },
+                  componentsBoxStyle: {
+                    flexDirection: "row",
+                    flexWrap: "nowrap",
+                    width: "100%",
+                    height: "0",
+                    background: "transparent",
+                    borderRadius: "0px",
+                    marginLeft: "-10px",
+                    marginTop: "-8px",
+                    justifyContent: "start",
+                    position: "relative"
                   },
                   layout: 12
                 },
-                options: {
-                  widget: "Box"
-                }
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: ""
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "28px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        height: 0
+                      }
+                    },
+                    options: {
+                      widget: "Box"
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: "5000.00"
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "28px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        position: "absolute",
+                        left: "8px"
+                      }
+                    },
+                    options: {
+                      widget: "Box"
+                    }
+                  }
+                ]
               },
               {
                 type: "Control",
@@ -10942,8 +11343,9 @@ function Card(theme) {
                     justifyContent: "center",
                     textWrap: "wrap",
                     background: "inherit",
-                    width: "calc(100%+8pc)",
+                    width: "calc(100%+8px)",
                     margin: "-8px",
+                    marginTop: { xs: "0px", md: "12px" },
                     lineHeight: "1"
                   },
                   layout: 12
@@ -10967,13 +11369,14 @@ function Card(theme) {
             containerStyle: {
               height: "100%",
               display: "flex",
-              justifyContent: "center"
+              justifyContent: "end"
             },
             imageStyle: {
-              height: "100%",
+              width: "unset",
               fontSize: "none",
               padding: "4px",
-              marginLeft: "8px"
+              margin: "0px 0px 0px 8px",
+              height: "64px"
             }
           },
           layout: 4
@@ -10986,19 +11389,23 @@ function Card(theme) {
   };
   return uiSchema;
 }
-const buildCard = (config, componentScope, store2) => {
-  const card = _.cloneDeep(Card(store2.theme.myTheme));
+const buildCard = (config, componentScope, store) => {
+  const card = _.cloneDeep(Card(store.theme.myTheme));
   if (config.style) {
-    card.config.style = JSON.parse(config.style);
+    card.config.wrapperStyle = JSON.parse(config.style);
   }
-  card.elements[0].elements[0].elements[0].scope = `#/properties/${config.name}/properties/value`;
+  card.elements[0].elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/value`;
   card.elements[1].scope = `#/properties/${config.name}/properties/url`;
   card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`;
   if (config.layout) {
     card.config.layout = createLayoutFormat(config.layout);
   }
+  if (config == null ? void 0 : config.titleIcon) {
+    card.elements[0].elements[0].elements[0].elements[0].config.main.heading = eval(`'\\${config.titleIcon}'`);
+    card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px";
+  }
   if (config.label) {
-    card.elements[0].elements[0].elements[0].config.main.heading = config.label;
+    card.elements[0].elements[0].elements[0].elements[1].config.main.heading = config.label;
   }
   if (config.url) {
     card.elements[1].config.main.url = config.url;
@@ -11036,23 +11443,23 @@ const DateTime = {
     }
   }
 };
-const buildDate = (config, componentScope) => {
+const buildDate = (config2, componentScope2) => {
   const dateInputField = _.cloneDeep(DateInputField);
-  dateInputField.config.main.label = config.label;
-  dateInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  dateInputField.scope = componentScope;
-  if (config.layout) {
-    dateInputField.config.layout = createLayoutFormat(config.layout);
+  dateInputField.config.main.label = config2.label;
+  dateInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  dateInputField.scope = componentScope2;
+  if (config2.layout) {
+    dateInputField.config.layout = createLayoutFormat(config2.layout);
   }
   return dateInputField;
 };
-const buildDateTime = (config, componentScope) => {
+const buildDateTime = (config2, componentScope2) => {
   const dateTimeInputField = _.cloneDeep(DateTime);
-  dateTimeInputField.config.main.label = config.label;
-  dateTimeInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  dateTimeInputField.scope = componentScope;
-  if (config.layout) {
-    dateTimeInputField.config.layout = createLayoutFormat(config.layout);
+  dateTimeInputField.config.main.label = config2.label;
+  dateTimeInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  dateTimeInputField.scope = componentScope2;
+  if (config2.layout) {
+    dateTimeInputField.config.layout = createLayoutFormat(config2.layout);
   }
   return dateTimeInputField;
 };
@@ -11063,27 +11470,21 @@ var RankCard = {
     widget: "RankCard"
   },
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: { xs: 12, sm: 6, md: 6, lg: 6 },
     main: {}
   }
 };
-const buildRankCard = (config, componentScope) => {
+const buildRankCard = (config2, componentScope2) => {
   const rankCard = _.cloneDeep(RankCard);
-  rankCard.scope = componentScope;
-  if (config.image) {
-    rankCard.config.main.url = config.image;
-  }
-  if (config.title) {
-    rankCard.config.main.title = config.title;
+  rankCard.scope = componentScope2;
+  if (config2.rank) {
+    rankCard.config.main.rank = `${config2.rank}`;
   }
-  if (config.description) {
-    rankCard.config.main.description = config.description;
-  }
-  if (config.rank) {
-    rankCard.config.main.rank = `#${config.rank}`;
+  if (config2.height) {
+    rankCard.config.main.height = `${config2.height}px`;
   }
-  if (config.layout) {
-    rankCard.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    rankCard.config.layout = createLayoutFormat(config2.layout);
   }
   return rankCard;
 };
@@ -11098,13 +11499,13 @@ var RollAndDice = {
     main: {}
   }
 };
-const buildRollAndDice = (config, componentScope) => {
+const buildRollAndDice = (config2, componentScope2) => {
   const rank = _.cloneDeep(RollAndDice);
-  if (config.name) {
-    rank.scope = componentScope;
+  if (config2.name) {
+    rank.scope = componentScope2;
   }
-  if (config.layout) {
-    rank.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    rank.config.layout = createLayoutFormat(config2.layout);
   }
   return rank;
 };
@@ -11118,34 +11519,21 @@ var Timer = {
     layout: {
       xs: 12,
       sm: 12,
-      md: 12,
-      lg: 12
+      md: 6,
+      lg: 6
     },
     main: {},
-    style: {
-      digitContainer: {
-        borderRadius: "4px",
-        textShawdow: "none",
-        width: "22%"
-      },
-      container: {
-        backgroundColor: "#FFFFFF",
-        borderRadius: "18px"
-      },
-      containerLabelColor: {
-        color: "red"
-      }
-    }
+    style: {}
   }
 };
-const buildTimer = (config, componentScope) => {
+const buildTimer = (config2, componentScope2) => {
   const timer = _.cloneDeep(Timer);
-  timer.scope = componentScope;
-  if (config.label) {
-    timer.config.main.label = config.label;
+  timer.scope = componentScope2;
+  if (config2.label) {
+    timer.config.main.label = config2.label;
   }
-  if (config.layout) {
-    timer.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    timer.config.layout = createLayoutFormat(config2.layout);
   }
   return timer;
 };
@@ -11166,30 +11554,30 @@ var MultipleSelect = {
     }
   }
 };
-const buildMultiSelect = (config, componentScope) => {
+const buildMultiSelect = (config2, componentScope2) => {
   const multipleSelect = _.cloneDeep(MultipleSelect);
-  multipleSelect.scope = componentScope;
-  if (config.label) {
-    multipleSelect.config.main.label = config.label;
+  multipleSelect.scope = componentScope2;
+  if (config2.label) {
+    multipleSelect.config.main.label = config2.label;
   }
-  if (config.layout) {
-    multipleSelect.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    multipleSelect.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.value) {
-    multipleSelect.config.main.options = config.value;
+  if (config2.value) {
+    multipleSelect.config.main.options = config2.value;
   }
-  if (config.lazyLoading) {
-    multipleSelect.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
+  if (config2.lazyLoading) {
+    multipleSelect.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
   return multipleSelect;
 };
-const buildBasicUiSchema = (config) => {
+const buildBasicUiSchema = (config2) => {
   return {
     "type": "HorizontalLayout",
-    pageName: config.name,
-    name: config.name,
-    accessorKey: config.name,
-    heading: config.label || config.name,
+    pageName: config2.name,
+    name: config2.name,
+    accessorKey: config2.name,
+    heading: config2.label || config2.name,
     "elements": []
   };
 };
@@ -11220,25 +11608,25 @@ const TextArea = {
     }
   }
 };
-const buildTextArea = (config, componentScope) => {
+const buildTextArea = (config2, componentScope2) => {
   const textArea = _.cloneDeep(TextArea);
-  textArea.config.main.heading = config.label;
-  if (config.layout) {
-    textArea.config.layout = createLayoutFormat(config.layout);
+  textArea.config.main.heading = config2.label;
+  if (config2.layout) {
+    textArea.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    textArea.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    textArea.config.style = JSON.parse(config2.style);
   }
-  if (config.placeholder) {
-    textArea.config.main.placeholder = config.placeholder;
+  if (config2.placeholder) {
+    textArea.config.main.placeholder = config2.placeholder;
   }
-  if (config.enableCodeEditor) {
-    textArea.config.main.enableCodeEditor = config.enableCodeEditor === "YES" ? true : false;
+  if (config2.enableCodeEditor) {
+    textArea.config.main.enableCodeEditor = config2.enableCodeEditor === "YES" ? true : false;
   }
-  if (config.codeEditorLanguage) {
-    textArea.config.main.codeEditorLanguage = config.codeEditorLanguage;
+  if (config2.codeEditorLanguage) {
+    textArea.config.main.codeEditorLanguage = config2.codeEditorLanguage;
   }
-  textArea.scope = componentScope;
+  textArea.scope = componentScope2;
   return textArea;
 };
 var cardSlider = {
@@ -11253,13 +11641,13 @@ var cardSlider = {
     main: {}
   }
 };
-const buildSlider = (config, componentScope) => {
+const buildSlider = (config2, componentScope2) => {
   const slider = _.cloneDeep(cardSlider);
-  if (config.name) {
-    slider.scope = componentScope;
+  if (config2.name) {
+    slider.scope = componentScope2;
   }
-  if (config.layout) {
-    slider.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    slider.config.layout = createLayoutFormat(config2.layout);
   }
   return slider;
 };
@@ -11276,49 +11664,57 @@ const Checkbox = {
     }
   }
 };
-const buildCheckbox = (config, componentScope) => {
+const buildCheckbox = (config2, componentScope2) => {
   const check = _.cloneDeep(Checkbox);
-  check.scope = componentScope;
-  check.config.main.label = config.label;
-  if (config.layout) {
-    check.config.layout = createLayoutFormat(config.layout);
+  check.scope = componentScope2;
+  check.config.main.label = config2.label;
+  if (config2.layout) {
+    check.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    check.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    check.config.style = JSON.parse(config2.style);
   }
   return check;
 };
-const buildLineGraph = (config, componentScope) => {
+const buildLineGraph = (config2, componentScope2) => {
   const lineGraph = _.cloneDeep(LineGraph);
-  if (config.layout) {
-    lineGraph.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    lineGraph.config.layout = createLayoutFormat(config2.layout);
+  }
+  lineGraph.config.main.header = config2.heading;
+  if (config2.height) {
+    lineGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.leftMargin) {
+    lineGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
   }
-  lineGraph.config.main.header = config.heading;
-  if (config.height) {
-    lineGraph.config.style.containerStyle.height = config.height;
+  if (config2.bottomLabel) {
+    lineGraph.config.main.bottomLabel = config2.bottomLabel;
   }
-  if (config.bottomLabel) {
-    lineGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.yAxisValue) {
+    lineGraph.config.main.yAxisValue = config2.yAxisValue;
   }
-  if (config.yAxisValue) {
-    lineGraph.config.main.yAxisValue = config.yAxisValue;
+  if (config2.xAxisValue) {
+    lineGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.xAxisValue) {
-    lineGraph.config.main.xAxisValue = config.xAxisValue;
+  if (config2.leftLabel) {
+    lineGraph.config.main.leftLabel = config2.leftLabel;
   }
-  if (config.leftLabel) {
-    lineGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.legendHide) {
+    lineGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  if (config.legendHide) {
-    lineGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+  if (config2.bottomAxisAngle) {
+    lineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
-  if (config.legendLabels) {
-    lineGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  if (config2.legendLabels) {
+    lineGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
   }
-  if (config.pieArcColors) {
-    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+  if (config2.pieArcColors) {
+    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
   }
-  lineGraph.scope = componentScope;
+  lineGraph.scope = componentScope2;
   return lineGraph;
 };
 const RadioUiSchema = {
@@ -11336,25 +11732,25 @@ const RadioUiSchema = {
     }
   }
 };
-const buildRadio = (config, componentScope) => {
+const buildRadio = (config2, componentScope2) => {
   const Radio = _.cloneDeep(RadioUiSchema);
-  Radio.scope = componentScope;
-  Radio.config.main.label = config.label;
-  if (config.layout) {
-    Radio.config.layout = createLayoutFormat(config.layout);
+  Radio.scope = componentScope2;
+  Radio.config.main.label = config2.label;
+  if (config2.layout) {
+    Radio.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.sectionLabels) {
-    Radio.config.main.options = config.sectionLabels.map((e) => e.label || e.Options);
+  if (config2.sectionLabels) {
+    Radio.config.main.options = config2.sectionLabels.map((e) => e.label || e.Options);
   }
-  if (config.style) {
-    Radio.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    Radio.config.style = JSON.parse(config2.style);
   }
   return Radio;
 };
-const buildEmptyBox = (config, componentScope) => {
+const buildEmptyBox = (config2, componentScope2) => {
   const EmptyBox = _.cloneDeep(emptyBox);
-  if (config.layout) {
-    EmptyBox.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    EmptyBox.config.layout = createLayoutFormat(config2.layout);
   }
   return EmptyBox;
 };
@@ -11369,9 +11765,9 @@ const ArrayUiSchema = {
     }
   }
 };
-const buildArray = (config, componentScope) => {
+const buildArray = (config2, componentScope2) => {
   const array = _.cloneDeep(ArrayUiSchema);
-  array.scope = componentScope;
+  array.scope = componentScope2;
   return array;
 };
 const TextField = {
@@ -11382,6 +11778,7 @@ const TextField = {
     "widget": "InputField"
   },
   config: {
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
     main: {
       label: "Adhaar Card",
       formatStrArray: ["9", "9", "9", "9", " ", "9", "9", "9", "9", " ", "X9", "X9", "X9", "X9"],
@@ -11389,17 +11786,17 @@ const TextField = {
     }
   }
 };
-const buildAdhaarField = (config, componentScope) => {
+const buildAdhaarField = (config2, componentScope2) => {
   const inputField = _.cloneDeep(TextField);
-  inputField.config.main.label = config.label;
-  if (config.style) {
-    inputField.config.style = JSON.parse(config.style);
+  inputField.config.main.label = config2.label;
+  if (config2.style) {
+    inputField.config.style = JSON.parse(config2.style);
   }
-  if (config.layout) {
-    inputField.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    inputField.config.layout = createLayoutFormat(config2.layout);
   }
-  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  inputField.scope = componentScope;
+  inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  inputField.scope = componentScope2;
   return inputField;
 };
 const PanField = {
@@ -11410,6 +11807,7 @@ const PanField = {
     "widget": "InputField"
   },
   config: {
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
     main: {
       label: "Pan Card",
       placeholder: "AAAAA0000A",
@@ -11417,17 +11815,17 @@ const PanField = {
     }
   }
 };
-const buildPanField = (config, componentScope) => {
+const buildPanField = (config2, componentScope2) => {
   const inputField = _.cloneDeep(PanField);
-  inputField.config.main.label = config.label;
-  if (config.style) {
-    inputField.config.style = JSON.parse(config.style);
+  inputField.config.main.label = config2.label;
+  if (config2.style) {
+    inputField.config.style = JSON.parse(config2.style);
   }
-  if (config.layout) {
-    inputField.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    inputField.config.layout = createLayoutFormat(config2.layout);
   }
-  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  inputField.scope = componentScope;
+  inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  inputField.scope = componentScope2;
   return inputField;
 };
 const FileInput = {
@@ -11449,15 +11847,15 @@ const FileInput = {
     }
   }
 };
-const buildFileInput = (config, componentScope) => {
+const buildFileInput = (config2, componentScope2) => {
   const box = _.cloneDeep(FileInput);
-  box.scope = componentScope;
-  box.config.main.label = config.label;
-  if (config.layout) {
-    box.config.layout = createLayoutFormat(config.layout);
+  box.scope = componentScope2;
+  box.config.main.label = config2.label;
+  if (config2.layout) {
+    box.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    box.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    box.config.style = JSON.parse(config2.style);
   }
   return box;
 };
@@ -11477,26 +11875,26 @@ const Stepper = {
   },
   "elements": []
 };
-const buildStepper = (config, componentScope) => {
+const buildStepper = (config2, componentScope2) => {
   const stepper = _.cloneDeep(Stepper);
-  stepper.scope = componentScope;
-  stepper.config.main.resetButton = config.resetButton === "YES" ? true : false;
-  if (config.defaultButtonAvailable) {
-    stepper.config.main.defaultButtonAvailable = config.defaultButtonAvailable === "YES" ? true : false;
-  }
-  stepper.config.main.resetText = config.resetText || "ResetData";
-  stepper.config.main.completeText = config.completeText || "Complete Text";
-  stepper.config.main.orientation = config.orientation || "horizontal";
-  if (config.sectionLabels) {
-    stepper.config.main.steps = config.sectionLabels.map((e, i) => {
+  stepper.scope = componentScope2;
+  stepper.config.main.resetButton = config2.resetButton === "YES" ? true : false;
+  if (config2.defaultButtonAvailable) {
+    stepper.config.main.defaultButtonAvailable = config2.defaultButtonAvailable === "YES" ? true : false;
+  }
+  stepper.config.main.resetText = config2.resetText || "ResetData";
+  stepper.config.main.completeText = config2.completeText || "Complete Text";
+  stepper.config.main.orientation = config2.orientation || "horizontal";
+  if (config2.sectionLabels) {
+    stepper.config.main.steps = config2.sectionLabels.map((e, i) => {
       return { label: e.label, id: i };
     });
   }
-  if (config.layout) {
-    stepper.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    stepper.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    stepper.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    stepper.config.style = JSON.parse(config2.style);
   }
   return stepper;
 };
@@ -11524,18 +11922,18 @@ const PopUP = {
     style: {}
   }
 };
-const buildPopUp = (config, componentScope) => {
+const buildPopUp = (config2, componentScope2) => {
   const popup = _.cloneDeep(PopUP);
-  popup.scope = componentScope;
-  popup.config.main.title = config.label;
-  popup.config.main.fullScreen = config.fullScreen === "YES" ? true : false;
-  popup.config.main.fullWidth = config.fullWidth === "YES" ? true : false;
-  popup.config.main.maxWidth = config.maxWidth || false;
-  if (config.layout) {
-    popup.config.layout = createLayoutFormat(config.layout);
+  popup.scope = componentScope2;
+  popup.config.main.title = config2.label;
+  popup.config.main.fullScreen = config2.fullScreen === "YES" ? true : false;
+  popup.config.main.fullWidth = config2.fullWidth === "YES" ? true : false;
+  popup.config.main.maxWidth = config2.maxWidth || false;
+  if (config2.layout) {
+    popup.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.style) {
-    PopUP.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    PopUP.config.style = JSON.parse(config2.style);
   }
   return popup;
 };
@@ -11555,30 +11953,30 @@ const dataGrid = {
     style: {}
   }
 };
-const buildDataGrid = (config, componentScope) => {
+const buildDataGrid = (config2, componentScope2) => {
   const DataGrid = _.cloneDeep(dataGrid);
-  DataGrid.scope = componentScope;
-  if (config.elevation) {
-    DataGrid.config.main.elevation = +config.elevation;
+  DataGrid.scope = componentScope2;
+  if (config2.elevation) {
+    DataGrid.config.main.elevation = +config2.elevation;
   }
-  DataGrid.config.main.divider = config.divider === "NO" ? false : true;
-  if (config.height) {
-    DataGrid.config.main.height = `${config.height}px`;
+  DataGrid.config.main.divider = config2.divider === "NO" ? false : true;
+  if (config2.height) {
+    DataGrid.config.main.height = `${config2.height}px`;
   }
-  if (config.justifyContent) {
-    DataGrid.config.main.justifyContent = config.justifyContent;
+  if (config2.justifyContent) {
+    DataGrid.config.main.justifyContent = config2.justifyContent;
   }
-  if (config.label) {
-    DataGrid.config.main.label = config.label;
+  if (config2.label) {
+    DataGrid.config.main.label = config2.label;
   }
-  if (config.layout) {
-    DataGrid.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    DataGrid.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.cardLayout) {
-    DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout);
+  if (config2.cardLayout) {
+    DataGrid.config.cardLayout = createLayoutFormat(config2.cardLayout);
   }
-  if (config.style) {
-    DataGrid.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    DataGrid.config.style = JSON.parse(config2.style);
   }
   return DataGrid;
 };
@@ -11589,7 +11987,7 @@ const InputSlider = {
     widget: "InputSlider"
   },
   config: {
-    layout: 12,
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     main: {
       limitToMax: false,
       max: 1e4,
@@ -11599,27 +11997,27 @@ const InputSlider = {
     }
   }
 };
-const buildInputSlider = (config, componentScope) => {
+const buildInputSlider = (config2, componentScope2) => {
   const inputSlider = _.cloneDeep(InputSlider);
-  inputSlider.scope = componentScope;
-  inputSlider.config.main.label = config.label;
-  if (config.layout) {
-    inputSlider.config.layout = createLayoutFormat(config.layout);
+  inputSlider.scope = componentScope2;
+  inputSlider.config.main.label = config2.label;
+  if (config2.layout) {
+    inputSlider.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.limitToMax) {
-    inputSlider.config.main.limitToMax = config.limitToMax === "YES" ? true : false;
+  if (config2.limitToMax) {
+    inputSlider.config.main.limitToMax = config2.limitToMax === "YES" ? true : false;
   }
-  if (config.max) {
-    inputSlider.config.main.max = config.max;
+  if (config2.max) {
+    inputSlider.config.main.max = config2.max;
   }
-  if (config.step) {
-    inputSlider.config.main.step = config.step;
+  if (config2.step) {
+    inputSlider.config.main.step = config2.step;
   }
-  if (config.min) {
-    inputSlider.config.main.min = config.min;
+  if (config2.min) {
+    inputSlider.config.main.min = config2.min;
   }
-  if (config.style) {
-    inputSlider.config.main.defaultStyle = JSON.parse(config.style);
+  if (config2.style) {
+    inputSlider.config.main.defaultStyle = JSON.parse(config2.style);
   }
   return inputSlider;
 };
@@ -11645,38 +12043,101 @@ const TreeMap = {
   },
   elements: []
 };
-const buildTreeMap = (config, componentScope) => {
+const buildTreeMap = (config2, componentScope2) => {
   const treMap = _.cloneDeep(TreeMap);
-  treMap.scope = componentScope;
-  if (config.label) {
-    treMap.config.main.header = config.label;
+  treMap.scope = componentScope2;
+  if (config2.label) {
+    treMap.config.main.header = config2.label;
   }
-  if (config.layout) {
-    treMap.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    treMap.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config.orientation) {
-    treMap.config.main.orientation = config.orientation;
+  if (config2.orientation) {
+    treMap.config.main.orientation = config2.orientation;
   }
-  if (config.linkType) {
-    treMap.config.main.linkType = config.linkType;
+  if (config2.linkType) {
+    treMap.config.main.linkType = config2.linkType;
   }
-  if (config.graphHeight) {
-    treMap.config.main.graphHeight = config.graphHeight;
+  if (config2.graphHeight) {
+    treMap.config.main.graphHeight = config2.graphHeight;
   }
-  if (config.graphWidth) {
-    treMap.config.main.graphWidth = config.graphWidth;
+  if (config2.graphWidth) {
+    treMap.config.main.graphWidth = config2.graphWidth;
   }
-  if (config.graphZoomHeight) {
-    treMap.config.main.graphZoomHeight = config.graphZoomHeight;
+  if (config2.graphZoomHeight) {
+    treMap.config.main.graphZoomHeight = config2.graphZoomHeight;
   }
-  if (config.graphZoomWidth) {
-    treMap.config.main.graphZoomWidth = config.graphZoomWidth;
+  if (config2.graphZoomWidth) {
+    treMap.config.main.graphZoomWidth = config2.graphZoomWidth;
   }
-  if (config.style) {
-    treMap.config.style = JSON.parse(config.style);
+  if (config2.style) {
+    treMap.config.style = JSON.parse(config2.style);
   }
   return treMap;
 };
+var Thought = {
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "Thought"
+  },
+  config: {
+    layout: { xs: 11.5, sm: 11.5, md: 8, lg: 8 },
+    main: {}
+  }
+};
+const buildThoughtOfTheDay = (config2, componentScope2) => {
+  const thought = _.cloneDeep(Thought);
+  thought.scope = componentScope2;
+  if (config2.thought) {
+    thought.config.main.thought = `${config2.thought}`;
+  }
+  if (config2.layout) {
+    thought.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.label) {
+    thought.config.main.label = config2.label;
+  }
+  if (config2.style) {
+    thought.config.style = JSON.parse(config2.style);
+  }
+  return thought;
+};
+var pdfViewer = {
+  type: "Control",
+  scope: "#/properties/pdfviewer",
+  options: {
+    widget: "PdfViewer"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      title: "PDF"
+    }
+  }
+};
+const buildPdfViewer = (config2) => {
+  const PdfViewer = _.cloneDeep(pdfViewer);
+  PdfViewer.config.main.label = config2.label;
+  if (config2.name) {
+    PdfViewer.scope = `#/properties/${config2.name}`;
+  }
+  if (config2.layout) {
+    PdfViewer.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.label) {
+    PdfViewer.config.main.title = config2.label;
+  }
+  if (config2.style) {
+    PdfViewer.config.style = JSON.parse(config2.style);
+  }
+  return PdfViewer;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -11766,12 +12227,12 @@ function buildRule(configObj, tableName, arrayHolderName) {
     });
   }
 }
-const buildSchema = (config, tableName, isArrayType) => {
-  buildRule(config, tableName, isArrayType);
-  if (config == null ? void 0 : config.elements) {
-    if (config.type == "Table" || config.type == "Array") {
-      if (!schema.properties[config.name]) {
-        schema.properties[config.name] = {
+const buildSchema = (config2, tableName, isArrayType) => {
+  buildRule(config2, tableName, isArrayType);
+  if (config2 == null ? void 0 : config2.elements) {
+    if (config2.type == "Table" || config2.type == "Array") {
+      if (!schema.properties[config2.name]) {
+        schema.properties[config2.name] = {
           type: "array",
           items: {
             type: "object",
@@ -11780,150 +12241,159 @@ const buildSchema = (config, tableName, isArrayType) => {
           }
         };
       }
-      config.elements.map((e, elemInd) => {
-        buildSchema(e, config.name, config.type === "Array" ? true : false);
+      config2.elements.map((e, elemInd) => {
+        buildSchema(e, config2.name, config2.type === "Array" ? true : false);
       });
     } else {
-      config.elements.map((e, elemInd) => {
+      config2.elements.map((e, elemInd) => {
         buildSchema(e);
       });
     }
   }
   return schema;
 };
-const buildUiSchema = (config, store2) => {
+const buildUiSchema = (config2, store2) => {
   let elements = {};
-  const componentScope = `#/properties/${config.name}`;
-  switch (config.type) {
+  const componentScope2 = `#/properties/${config2.name}`;
+  switch (config2.type) {
     case "TreeMap":
-      elements = buildTreeMap(config, componentScope);
+      elements = buildTreeMap(config2, componentScope2);
       break;
     case "DateTime":
-      elements = buildDateTime(config, componentScope);
+      elements = buildDateTime(config2, componentScope2);
       break;
     case "InputSlider":
-      elements = buildInputSlider(config, componentScope);
+      elements = buildInputSlider(config2, componentScope2);
       break;
     case "DataGrid":
-      elements = buildDataGrid(config, componentScope);
+      elements = buildDataGrid(config2, componentScope2);
       break;
     case "Stepper":
-      elements = buildStepper(config, componentScope);
+      elements = buildStepper(config2, componentScope2);
       break;
     case "PopUp":
-      elements = buildPopUp(config, componentScope);
+      elements = buildPopUp(config2, componentScope2);
       break;
     case "FileInput":
-      elements = buildFileInput(config, componentScope);
+      elements = buildFileInput(config2, componentScope2);
       break;
     case "AadharcardText":
-      elements = buildAdhaarField(config, componentScope);
+      elements = buildAdhaarField(config2, componentScope2);
       break;
     case "PanCardText":
-      elements = buildPanField(config, componentScope);
+      elements = buildPanField(config2, componentScope2);
       break;
     case "TabSection":
-      elements = buildTabSection(config, componentScope);
+      elements = buildTabSection(config2, componentScope2);
       break;
     case "RunnerBoyProgressBar":
-      elements = RunnerBoyProgressbar(config, componentScope);
+      elements = RunnerBoyProgressbar(config2, componentScope2);
       break;
     case "WrapperSection":
-      elements = buildWrapperSection(config, componentScope);
+      elements = buildWrapperSection(config2, componentScope2);
       break;
     case "Text":
-      elements = buildTextField(config, componentScope);
+      elements = buildTextField(config2, componentScope2);
       break;
     case "TextArea":
-      elements = buildTextArea(config, componentScope);
+      elements = buildTextArea(config2, componentScope2);
       break;
     case "Date":
-      elements = buildDate(config, componentScope);
+      elements = buildDate(config2, componentScope2);
       break;
     case "Select":
-      elements = buildSelect(config, componentScope);
+      elements = buildSelect(config2, componentScope2);
       break;
     case "Radio":
-      elements = buildRadio(config, componentScope);
+      elements = buildRadio(config2, componentScope2);
       break;
     case "Button":
-      elements = buildButton(config, componentScope);
+      elements = buildButton(config2, componentScope2);
       break;
     case "Table":
-      elements = buildTable(config, componentScope);
+      elements = buildTable(config2, componentScope2);
       break;
     case "Array":
-      elements = buildArray(config, componentScope);
+      elements = buildArray(config2, componentScope2);
       break;
     case "Box":
-      elements = buildLabel(config, componentScope);
+      elements = buildLabel(config2, componentScope2);
       break;
     case "CheckBox":
-      elements = buildCheckbox(config, componentScope);
+      elements = buildCheckbox(config2, componentScope2);
       break;
     case "UploadFile":
-      elements = buildUploadFile(config, componentScope);
+      elements = buildUploadFile(config2, componentScope2);
       break;
     case "DownloadFile":
-      elements = buildDownloadFile(config, componentScope);
+      elements = buildDownloadFile(config2, componentScope2);
       break;
     case "EmptyBox":
-      elements = buildEmptyBox(config);
+      elements = buildEmptyBox(config2);
       break;
     case "card":
-      elements = buildCard(config, componentScope, store2);
+      elements = buildCard(config2, componentScope2, store2);
       break;
     case "Graph":
-      switch (config.graphType) {
+      switch (config2.graphType) {
         case "BarGraph":
         case "StackBarGraph":
-          elements = buildStackbarGraph(config, componentScope);
+          elements = buildStackbarGraph(config2, componentScope2);
           break;
         case "LineGraph":
-          elements = buildLineGraph(config, componentScope);
+          elements = buildLineGraph(config2, componentScope2);
           break;
         case "PieGraph":
-          elements = buildPieGraph(config, componentScope);
+          elements = buildPieGraph(config2, componentScope2);
           break;
         case "HorizontalBarGraph":
         case "HorizontalStackBarGraph":
-          elements = buildHorizontalBarGraph(config, componentScope);
+          elements = buildHorizontalBarGraph(config2, componentScope2);
+          break;
+        default:
+          elements = buildStackbarGraph(config2, componentScope2);
           break;
       }
       break;
     case "ProgressBar":
-      elements = buildProgressBar(config, componentScope);
+      elements = buildProgressBar(config2, componentScope2);
       break;
     case "SpeedoMeter":
-      elements = buildSpeedoMeter(config, componentScope);
+      elements = buildSpeedoMeter(config2, componentScope2);
       break;
     case "ProgressBarCard":
-      elements = buildProgressBarCard(config, componentScope);
+      elements = buildProgressBarCard(config2, componentScope2);
       break;
     case "RankCard":
-      elements = buildRankCard(config, componentScope);
+      elements = buildRankCard(config2, componentScope2);
       break;
     case "Rank":
-      elements = buildRollAndDice(config, componentScope);
+      elements = buildRollAndDice(config2, componentScope2);
       break;
     case "Slider":
-      elements = buildSlider(config, componentScope);
+      elements = buildSlider(config2, componentScope2);
       break;
     case "Timer":
-      elements = buildTimer(config, componentScope);
+      elements = buildTimer(config2, componentScope2);
       break;
     case "ColumnGroup":
       elements = {
-        accessorKey: config.name,
-        header: config.label || config.name,
+        accessorKey: config2.name,
+        header: config2.label || config2.name,
         elements: []
       };
       break;
     case "MultipleSelect":
-      elements = buildMultiSelect(config, componentScope);
+      elements = buildMultiSelect(config2, componentScope2);
       break;
     case "LeaderBoard":
-      elements = buildLeaderBoard(config);
+      elements = buildLeaderBoard(config2);
+      break;
+    case "Thought":
+      elements = buildThoughtOfTheDay(config2, componentScope2);
+      break;
+    case "PdfViewer":
+      elements = buildPdfViewer(config2);
       break;
     default:
       schema = {
@@ -11931,19 +12401,19 @@ const buildUiSchema = (config, store2) => {
         properties: {},
         required: []
       };
-      elements = buildBasicUiSchema(config);
+      elements = buildBasicUiSchema(config2);
   }
-  if (config == null ? void 0 : config.elements) {
-    if ((config == null ? void 0 : config.type) === "LeaderBoard") {
+  if (config2 == null ? void 0 : config2.elements) {
+    if ((config2 == null ? void 0 : config2.type) === "LeaderBoard") {
       return elements;
-    } else if (config.type == "ColumnGroup") {
+    } else if (config2.type == "ColumnGroup") {
       const sizeMap = {};
-      if (config.sizeHolder) {
-        config.sizeHolder.map((e, i) => {
+      if (config2.sizeHolder) {
+        config2.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value;
         });
       }
-      elements.elements = config.elements.map((cellElem, elemInd) => {
+      elements.elements = config2.elements.map((cellElem, elemInd) => {
         return {
           accessorKey: cellElem.name,
           header: cellElem.label || cellElem.name,
@@ -11952,20 +12422,20 @@ const buildUiSchema = (config, store2) => {
           elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : []
         };
       });
-    } else if (config.type == "Table") {
+    } else if (config2.type == "Table") {
       const sizeMap = {};
       const filterMap = {};
-      if (config.sizeHolder) {
-        config.sizeHolder.map((e, i) => {
+      if (config2.sizeHolder) {
+        config2.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value;
         });
       }
-      if (config.enableColumnFilter) {
-        config.enableColumnFilter.map((e) => {
+      if (config2.enableColumnFilter) {
+        config2.enableColumnFilter.map((e) => {
           filterMap[e.keyName] = true;
         });
       }
-      elements.elements = config.elements.map((cellElem, elemInd) => {
+      elements.elements = config2.elements.map((cellElem, elemInd) => {
         var _a, _b;
         if (cellElem.type) {
           return {
@@ -11976,7 +12446,7 @@ const buildUiSchema = (config, store2) => {
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
             elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : [],
             enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_a = filterMap[cellElem.name]) != null ? _a : false,
-            columnFilterModeOptions: config.filteringOptions
+            columnFilterModeOptions: config2.filteringOptions
           };
         } else {
           return {
@@ -11985,16 +12455,16 @@ const buildUiSchema = (config, store2) => {
             header: cellElem.label || cellElem.name,
             size: sizeMap[cellElem.name] || 180,
             enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_b = filterMap[cellElem.name]) != null ? _b : false,
-            columnFilterModeOptions: config.filteringOptions
+            columnFilterModeOptions: config2.filteringOptions
           };
         }
       });
-    } else if (config.type == "Array") {
-      elements.options.detail.elements = config.elements.map((e, elemInd) => {
+    } else if (config2.type == "Array") {
+      elements.options.detail.elements = config2.elements.map((e, elemInd) => {
         return buildUiSchema(e, store2);
       });
     } else {
-      elements.elements = config.elements.map((e, elemInd) => {
+      elements.elements = config2.elements.map((e, elemInd) => {
         return buildUiSchema(e, store2);
       });
     }