impaktapps-ui-builder 0.0.974 → 0.0.1052

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

@@ -132,7 +132,7 @@ const PageMasterUiSchema = (theme) => {
         type: "TabLayout",
         config: {
           main: {
-            tabLabels: ["Components", "events"],
+            tabLabels: ["Components", "Events"],
             divider: true
           },
           defaultStyle: true
@@ -487,23 +487,18 @@ 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"
             },
@@ -513,58 +508,95 @@ const PageMasterUiSchema = (theme) => {
                 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: 12,
+              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"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -578,23 +610,18 @@ 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"
             },
@@ -604,58 +631,95 @@ const PageMasterUiSchema = (theme) => {
                 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: "info",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button"
+              layout: 12,
+              main: {}
             },
-            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"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -699,13 +763,14 @@ const PageMasterUiSchema = (theme) => {
                 color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
                 fontSize: "12px",
                 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%)"
               }
             }
           },
@@ -6255,7 +6320,8 @@ 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" }
       ]
     },
     columnFormat: {
@@ -6636,20 +6702,47 @@ const componentBasicUiSchema = (theme) => {
               },
               {
                 type: "Control",
-                scope: "#/properties/columnFormat",
+                scope: "#/properties/proc1",
+                config: {
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc2",
+                config: {
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                },
                 options: {
-                  widget: "SelectInputField"
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc3",
+                config: {
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                 },
+                options: {
+                  widget: "EmptyBox"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc4",
                 config: {
-                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                  main: {
-                    label: "Column Format"
-                  }
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                },
+                options: {
+                  widget: "EmptyBox"
                 }
               },
               {
                 type: "Control",
-                scope: "#/properties/proc",
+                scope: "#/properties/proc5",
                 config: {
                   layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                 },
@@ -6659,7 +6752,7 @@ const componentBasicUiSchema = (theme) => {
               },
               {
                 type: "Control",
-                scope: "#/properties/proc",
+                scope: "#/properties/proc8",
                 config: {
                   layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                 },
@@ -6827,20 +6920,15 @@ 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"
             },
@@ -6850,58 +6938,95 @@ const componentBasicUiSchema = (theme) => {
                 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: "error",
-                type: "text",
-                onClick: "deleteComponents",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteCompButton",
-            options: {
-              widget: "Button"
+              layout: 12,
+              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: "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"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -6918,20 +7043,15 @@ 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/popupText1",
             options: {
               widget: "Box"
             },
@@ -6941,59 +7061,96 @@ const componentBasicUiSchema = (theme) => {
                 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: "info",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small"
-              }
-            }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button"
+              layout: 12,
+              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"
+                    }
+                  }
+                }
+              }
+            ]
+          }
         ]
       },
       {
@@ -7036,13 +7193,14 @@ const componentBasicUiSchema = (theme) => {
                 color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
                 fontSize: "12px",
                 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%)"
               }
             }
           },
@@ -7540,7 +7698,7 @@ const buildWrapper = (label, elements) => {
         width: "108%"
       },
       componentsBoxStyle: {
-        marginLeft: "24px"
+        marginLeft: "12px"
       },
       defaultStyle: true
     },
@@ -7668,7 +7826,7 @@ const buildPropertiesSection = function(type) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 }),
+        getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
@@ -7693,22 +7851,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":
@@ -7732,8 +7887,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":
@@ -7753,13 +7909,13 @@ const buildPropertiesSection = function(type) {
         getSelectField("graphType", "Graph Type"),
         getInputField("leftLabel", "Left Label"),
         getInputField("bottomLabel", "Bottom Label"),
-        getInputField("leftLabelMargin", "Left Label Margin"),
-        getInputField("leftLabelOffset", "Left Label Offset"),
         emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
-        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")
       ];
@@ -7831,6 +7987,11 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("MultipleSelectEmpty2")
       ];
       break;
+    case "Thought":
+      uiSchema.elements = [
+        getTextArea("thought", "Today's thought", false)
+      ];
+      break;
   }
   return uiSchema;
 };
@@ -8140,8 +8301,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,
@@ -8150,17 +8311,17 @@ const createLayoutFormat = (config) => {
     };
   }
   let data = {};
-  config.map((e) => {
+  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;
@@ -8168,9 +8329,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) => {
@@ -8181,7 +8342,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 {
@@ -8215,16 +8376,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);
     }
@@ -8293,11 +8454,13 @@ 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"]
 };
 function refreshPage(type, store2) {
-  var _a;
+  var _a, _b;
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store2.theme.myTheme));
+  const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
@@ -8312,6 +8475,81 @@ function 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];
   }
+  const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
+  const lastDotIndex = path.lastIndexOf(".");
+  const parentPath = path.slice(0, lastDotIndex);
+  const parentObj = _.get(currentConfig, parentPath);
+  if ((parentObj == null ? void 0 : parentObj.type) === "Table") {
+    UiSchema.elements[1].elements[0].elements[3] = {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format"
+        }
+      }
+    };
+    UiSchema.elements[1].elements[0].elements[4] = {
+      type: "Control",
+      scope: "#/properties/enableFilter",
+      options: {
+        widget: "RadioInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Filter",
+          options: ["Yes", "No"]
+        }
+      }
+    }, UiSchema.elements[1].elements[0].elements[5] = {
+      type: "Control",
+      scope: "#/properties/filteringOptions",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Filter Mode",
+          multiple: true
+        }
+      }
+    };
+    UiSchema.elements[1].elements[0].elements[6] = {
+      type: "Control",
+      scope: "#/properties/enableSorting",
+      options: {
+        widget: "RadioInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Sorting",
+          options: ["Yes", "No"]
+        }
+      }
+    }, UiSchema.elements[1].elements[0].elements[7] = {
+      type: "Control",
+      scope: "#/properties/columnKey",
+      options: {
+        widget: "InputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Column Key",
+          options: [],
+          color: "secondary",
+          required: true
+        }
+      }
+    };
+  }
   if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
@@ -8340,7 +8578,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       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) {
@@ -8462,6 +8700,13 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         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);
@@ -8520,13 +8765,13 @@ 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() {
       const UiSchema = _.cloneDeep(PageMasterUiSchema(store2.theme.myTheme));
@@ -9011,26 +9256,18 @@ 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"
             },
@@ -9040,58 +9277,95 @@ const EventUiSchema = (theme) => {
                 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: 12,
+              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"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
@@ -9135,13 +9409,14 @@ const EventUiSchema = (theme) => {
                 color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
                 fontSize: "12px",
                 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%)"
               }
             }
           },
@@ -9510,7 +9785,7 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       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) {
@@ -9726,37 +10001,42 @@ function executeCustomHandler(params) {
   }
 }
 function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder) {
-  if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data) && !_.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
+  var _a, _b, _c;
+  if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
+    if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
+      store2.setSchema((pre) => {
+        var _a2;
+        return {
+          ...pre,
+          properties: {
+            ...pre.properties,
+            [componentName]: {
+              ...(_a2 = pre.properties) == null ? void 0 : _a2[componentName],
+              oneOf: handlerResponse.data
+            }
           }
-        }
-      };
-    });
-  } else if (eventConfig.type === "MultipleSelect" && (handlerResponse == null ? void 0 : handlerResponse.data) && !_.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 === "MultipleSelect" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
+    if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
+      store2.setSchema((pre) => {
+        var _a2;
+        return {
+          ...pre,
+          properties: {
+            ...pre.properties,
+            [componentName]: {
+              ...(_a2 = pre.properties) == null ? void 0 : _a2[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 = {
@@ -9767,6 +10047,14 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
         return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
       });
     }
+  } else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
+    if (handlerResponse && (handlerResponse == null ? void 0 : handlerResponse.data)) {
+      formDataHolder[componentName] = (_a = handlerResponse.data) == null ? void 0 : _a.data;
+      formDataHolder[`${componentName}_RowCount`] = (_c = (_b = handlerResponse.data) == null ? void 0 : _b.meta) == null ? void 0 : _c.totalRowCount;
+      store2.setFormdata((pre) => {
+        return { ...pre, ...formDataHolder };
+      });
+    }
   } else {
     if (handlerResponse) {
       formDataHolder[componentName] = handlerResponse.data;
@@ -9937,10 +10225,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;
@@ -10050,7 +10338,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: "",
@@ -10072,7 +10360,7 @@ var service = (funcParams) => {
         service: funcParams.service,
         serviceHolder: this,
         eventGroups,
-        formDataHolder
+        formDataHolder: {}
       });
       funcParams.store.setSchema(
         (pre) => {
@@ -10087,11 +10375,11 @@ var service = (funcParams) => {
       funcParams.store.setUiSchema(uiSchema);
     },
     onCellRenderer: (cellParams) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (eventGroups.onCellRenderer) {
         let finalResponse = {};
         const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || ((_c = (_b = funcParams == null ? void 0 : funcParams.dynamicData) == null ? void 0 : _b.path) == null ? void 0 : _c.split(".")[0]);
-        for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onCellRenderer[path]) {
+        for (const eventConfig of (_d = eventGroups == null ? void 0 : eventGroups.onCellRenderer) == null ? void 0 : _d[path]) {
           executeEventsParameters.store.functionParameters = cellParams;
           finalResponse = executeEvents({
             ...executeEventsParameters,
@@ -10235,381 +10523,55 @@ var service = (funcParams) => {
   };
 };
 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"
-    }
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "LeaderBoard"
   },
-  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"
-      }
-    },
-    {
-      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"
-      }
-    },
-    {
-      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"
-      }
-    },
-    {
-      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
-        }
-      }
-    }
-  ]
+  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;
 };
@@ -10620,7 +10582,7 @@ var progressBar = {
     widget: "ProgressBar"
   },
   config: {
-    layout: 6,
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     main: {
       developOnlyProgresBar: false,
       bottomLabel_3: "Remaining",
@@ -10628,44 +10590,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;
 };
@@ -10676,8 +10638,12 @@ const BarGraph = {
     widget: "Graph"
   },
   config: {
-    main: {},
-    style: { containerStyle: {}, labelStyle: {} }
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
+    main: {
+      type: "BarGraph",
+      legendLabels: null
+    },
+    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
   }
 };
 const PieGraph = {
@@ -10687,10 +10653,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 = {
@@ -10700,32 +10668,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 = {
@@ -10735,52 +10683,51 @@ const HorizontalBarGraph = {
     widget: "Graph"
   },
   config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 6 },
     main: {
-      type: "HorizontalBarGraph"
+      type: "HorizontalBarGraph",
+      legendLabels: null
     },
-    style: {
-      labelStyle: {}
-    }
+    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 (config.bottomLabel) {
-    horizontalBarGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.xAxisValue) {
+    horizontalBarGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.leftLabel) {
-    horizontalBarGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.height) {
+    horizontalBarGraph.config.style.containerStyle.height = config2.height;
   }
-  if (config.leftLabelMargin) {
+  if (config2.leftMargin) {
     horizontalBarGraph.config.style.labelStyle.margin = {
-      left: config.leftLabelMargin
+      left: config2.leftMargin
     };
   }
-  if (config.leftLabelOffset) {
-    horizontalBarGraph.config.style.labelStyle.leftLabelOffset = config.leftLabelOffset;
+  if (config2.bottomLabel) {
+    horizontalBarGraph.config.main.bottomLabel = config2.bottomLabel;
+  }
+  if (config2.leftLabel) {
+    horizontalBarGraph.config.main.leftLabel = config2.leftLabel;
   }
   return horizontalBarGraph;
 };
@@ -10830,20 +10777,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 };
     }
@@ -10851,98 +10798,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 (config.legendHide) {
-    barGraph.config.main.legendAvailable = config.legendHide;
+  if (config2.legendHide) {
+    barGraph.config.main.legendAvailable = config2.legendHide;
+    barGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  barGraph.config.main.type = config.graphType;
-  barGraph.config.main.header = config.heading;
-  if (config.barColor) {
-    barGraph.config.barStyle.color = config.barColor;
+  if (config2.bottomAxisAngle) {
+    barGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
-  if (config.xAxisValue) {
-    barGraph.config.main.xAxisValue = config.xAxisValue;
+  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.height) {
-    barGraph.config.style.containerStyle.height = config.height;
+  if (config2.pieArcColors) {
+    barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
   }
-  if (config.bottomLabel) {
-    barGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.xAxisValue) {
+    barGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.leftLabel) {
-    barGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.height) {
+    barGraph.config.style.containerStyle.height = config2.height;
   }
-  if (config.leftLabelMargin) {
+  if (config2.leftMargin) {
     barGraph.config.style.labelStyle.margin = {
-      left: config.leftLabelMargin
+      left: config2.leftMargin
     };
   }
-  if (config.leftLabelOffset) {
-    barGraph.config.style.labelStyle.leftLabelOffset = config.leftLabelOffset;
+  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 = {
@@ -10952,15 +10896,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;
 };
@@ -10975,19 +10919,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 = {
@@ -11002,20 +10946,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;
 };
@@ -11033,23 +10977,26 @@ 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.multiline) {
+    inputField.config.main.multiline = config2.multiline === "YES" ? true : false;
   }
-  if (config.placeholder) {
-    inputField.config.main.placeholder = config.placeholder;
+  if (config2.InputFormatingAndMasking) {
+    inputField.config.main.formatStrArray = config2.InputFormatingAndMasking.map((e) => e.formatElement);
   }
-  if (config.layout) {
-    inputField.config.layout = createLayoutFormat(config.layout);
+  if (config2.placeholder) {
+    inputField.config.main.placeholder = config2.placeholder;
   }
-  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  inputField.scope = componentScope;
+  if (config2.layout) {
+    inputField.config.layout = createLayoutFormat(config2.layout);
+  }
+  inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
+  inputField.scope = componentScope2;
   return inputField;
 };
 var SelectInputField = {
@@ -11067,22 +11014,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 = {
@@ -11096,7 +11043,6 @@ var Button = {
     main: {
       name: "Compare",
       variant: "contained",
-      color: "info",
       type: "text",
       startIcon: "",
       styleDefault: false,
@@ -11107,37 +11053,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;
 };
@@ -11161,71 +11107,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;
 };
@@ -11241,15 +11187,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;
 };
@@ -11289,39 +11235,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 = 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;
 };
@@ -11330,15 +11276,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`,
@@ -11364,7 +11318,6 @@ function Card(theme) {
                 gap: 0
               },
               wrapperStyle: {
-                marginTop: "4px",
                 background: "transparent"
               },
               componentsBoxStyle: {
@@ -11379,27 +11332,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",
@@ -11414,8 +11418,9 @@ function Card(theme) {
                     justifyContent: "center",
                     textWrap: "wrap",
                     background: "inherit",
-                    width: "calc(100%+8pc)",
+                    width: "calc(100%+8px)",
                     margin: "-8px",
+                    marginTop: "12px",
                     lineHeight: "1"
                   },
                   layout: 12
@@ -11439,13 +11444,13 @@ function Card(theme) {
             containerStyle: {
               height: "100%",
               display: "flex",
-              justifyContent: "center"
+              justifyContent: "end"
             },
             imageStyle: {
-              height: "100%",
               fontSize: "none",
               padding: "4px",
-              marginLeft: "8px"
+              margin: "0px 0px 0px 8px",
+              height: "64px"
             }
           },
           layout: 4
@@ -11458,19 +11463,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;
@@ -11508,23 +11517,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;
 };
@@ -11535,27 +11544,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 (config2.height) {
+    rankCard.config.main.height = `${config2.height}px`;
   }
-  if (config.rank) {
-    rankCard.config.main.rank = `#${config.rank}`;
-  }
-  if (config.layout) {
-    rankCard.config.layout = createLayoutFormat(config.layout);
+  if (config2.layout) {
+    rankCard.config.layout = createLayoutFormat(config2.layout);
   }
   return rankCard;
 };
@@ -11570,13 +11573,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;
 };
@@ -11590,34 +11593,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;
 };
@@ -11638,30 +11628,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": []
   };
 };
@@ -11692,25 +11682,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 = {
@@ -11725,13 +11715,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;
 };
@@ -11748,57 +11738,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 = config.heading;
-  if (config.height) {
-    lineGraph.config.style.containerStyle.height = config.height;
+  lineGraph.config.main.header = config2.heading;
+  if (config2.height) {
+    lineGraph.config.style.containerStyle.height = config2.height;
   }
-  if (config.bottomLabel) {
-    lineGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config2.leftMargin) {
+    lineGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
   }
-  if (config.yAxisValue) {
-    lineGraph.config.main.yAxisValue = config.yAxisValue;
+  if (config2.bottomLabel) {
+    lineGraph.config.main.bottomLabel = config2.bottomLabel;
   }
-  if (config.xAxisValue) {
-    lineGraph.config.main.xAxisValue = config.xAxisValue;
+  if (config2.yAxisValue) {
+    lineGraph.config.main.yAxisValue = config2.yAxisValue;
   }
-  if (config.leftLabel) {
-    lineGraph.config.main.leftLabel = config.leftLabel;
+  if (config2.xAxisValue) {
+    lineGraph.config.main.xAxisValue = config2.xAxisValue;
   }
-  if (config.legendHide) {
-    lineGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+  if (config2.leftLabel) {
+    lineGraph.config.main.leftLabel = config2.leftLabel;
   }
-  if (config.legendLabels) {
-    lineGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  if (config2.legendHide) {
+    lineGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
   }
-  if (config.pieArcColors) {
-    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+  if (config2.bottomAxisAngle) {
+    lineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
-  if (config.leftLabelMargin) {
-    lineGraph.config.style.labelStyle.margin = {
-      left: config.leftLabelMargin
-    };
+  if (config2.legendLabels) {
+    lineGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
   }
-  if (config.leftLabelOffset) {
-    lineGraph.config.style.labelStyle.leftLabelOffset = config.leftLabelOffset;
+  if (config2.pieArcColors) {
+    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
   }
-  lineGraph.scope = componentScope;
+  lineGraph.scope = componentScope2;
   return lineGraph;
 };
 const RadioUiSchema = {
@@ -11816,25 +11806,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;
 };
@@ -11849,9 +11839,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 = {
@@ -11869,17 +11859,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 = {
@@ -11897,17 +11887,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 = {
@@ -11929,15 +11919,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;
 };
@@ -11957,26 +11947,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;
 };
@@ -12004,18 +11994,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;
 };
@@ -12035,30 +12025,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;
 };
@@ -12069,7 +12059,7 @@ const InputSlider = {
     widget: "InputSlider"
   },
   config: {
-    layout: 12,
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
     main: {
       limitToMax: false,
       max: 1e4,
@@ -12079,27 +12069,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;
 };
@@ -12125,38 +12115,66 @@ 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;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -12246,12 +12264,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",
@@ -12260,150 +12278,156 @@ 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;
     default:
       schema = {
@@ -12411,19 +12435,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,
@@ -12432,49 +12456,47 @@ 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) => {
-        var _a, _b;
+      elements.elements = config2.elements.map((cellElem, elemInd) => {
+        var _a;
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          size: sizeMap[cellElem.name] || 180,
+          enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_a = filterMap[cellElem.name]) != null ? _a : false,
+          columnFilterModeOptions: config2.filteringOptions,
+          enableSorting: config2.enableSorting === "No" ? false : true,
+          columnKey: config2.columnKey
+        };
         if (cellElem.type) {
           return {
-            accessorKey: cellElem.name,
-            header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180,
-            type: cellElem.columnFormat,
             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
+            ...commonProperties
           };
         } else {
-          return {
-            accessorKey: cellElem.name,
-            type: cellElem.columnFormat,
-            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
-          };
+          return commonProperties;
         }
       });
-    } 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);
       });
     }