@flozy/editor 5.3.9 → 5.4.0

package/dist/Editor/common/MentionsPopup/index.js

@@ -97,7 +97,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         id: `cmd-li-ind-${index}}`,
         component: "div",
         onClick: handleClick(char, i),
-        className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
+        className: `${type !== 'elements' && i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
         sx: classes.listItem,
         ref: i === index ? papperRef : null,
         children: char.renderComponent ? char.renderComponent({

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -1,10 +1,13 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } from "@mui/material";
 import { StyleContent } from "../../../StyleBuilder";
-import formStyle from "../../../StyleBuilder/formStyle";
+import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
+import { ExpandMoreOutlined } from "@mui/icons-material";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
   const {
     editor,
@@ -14,7 +17,13 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
-  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
+  const styleMaps = formStyle;
+  const {
+    hideTools
+  } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -26,23 +35,110 @@ const FormSettings = props => {
     }, {
       at: [...currentPath, 0]
     });
+    // adding form field style to the current form node
+    const currentNode = Node.get(editor, element_path);
+    if (currentNode) {
+      currentNode?.children[0]?.children?.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : item?.bgColor,
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : item?.borderColor,
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : item?.borderStyle,
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : item?.borderWidth,
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : item?.textColor,
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : item?.fontFamily,
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : item?.textSize,
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : item?.fontWeight
+        }, {
+          at: [...currentPath, 0, index]
+        });
+      });
+    }
   };
   const handleClose = () => {
     console.log("close");
   };
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
     children: styleMaps?.map((m, i) => {
-      return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: styleMaps,
-        value: m.value,
-        element: element,
-        customElement: element?.children?.[0] || null,
-        onChange: onChange,
-        customProps: customProps,
-        handleClose: handleClose
-      }, `tab_${m.value}_$${i}`);
+      if (m?.hasChildrenTabs) {
+        return /*#__PURE__*/_jsx(ThemeProvider, {
+          theme: muiTheme,
+          children: /*#__PURE__*/_jsxs(Accordion, {
+            defaultExpanded: true,
+            children: [/*#__PURE__*/_jsx(AccordionSummary, {
+              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                className: "settingsHeader",
+                color: "primary",
+                style: {
+                  fontSize: "14px !important",
+                  fontWeight: "400"
+                },
+                children: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                padding: "5px"
+              },
+              children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                return /*#__PURE__*/_jsx(StyleContent, {
+                  renderTabs: [field],
+                  value: field.value,
+                  element: element,
+                  onChange: onChange,
+                  customElement: element?.children?.[0] || null,
+                  customProps: customProps,
+                  handleClose: handleClose
+                }, `tab_${field.value}_${index}`);
+              })
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      } else {
+        return /*#__PURE__*/_jsx(StyleContent, {
+          renderTabs: styleMaps,
+          value: m.value,
+          element: element,
+          customElement: element?.children?.[0] || null,
+          onChange: onChange,
+          customProps: customProps,
+          handleClose: handleClose
+        }, `tab_${m.value}_$${i}`);
+      }
     })
   });
 };

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% - 160px)"
       }
     },
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% + 160px)"
       }
     },
     "& .white-wrapper": {
       overflowX: "hidden",
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         position: "absolute",
         width: "calc(50% - 162px)",
         height: "calc(100% - 2px)",

package/dist/Editor/common/RnD/ShadowElement.js

@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
     position: "relative",
     backgroundColor: "rgba(0,0,0,0)",
     marginLeft: `calc((100% - 980px) * 0.5)`,
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       marginLeft: `calc((100% - 320px) * 0.5)`
     }
   }

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    show
   } = props;
   const classes = useSwitchViewport();
+  const {
+    setSelectedElement,
+    setActiveBreakPoint
+  } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -1,5 +1,6 @@
 import { Transforms, Node, Path } from "slate";
 import { ReactEditor } from "slate-react";
+import { handleNegativeInteger } from "../../../utils/helper";
 export const ROW_HEIGHT = 50;
 const MARGIN_OF = {
   xs: 160,
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props) {
+function isContainerElement(editor, moveTopath, props, appenBp) {
   try {
     const {
       path,
@@ -91,6 +92,7 @@ function isContainerElement(editor, moveTopath, props) {
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
     const moveToNode = Node.get(editor, moveTopath);
+    const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
         // same box
@@ -98,10 +100,10 @@ function isContainerElement(editor, moveTopath, props) {
           return props.calX;
         } else {
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
         }
       } else {
-        return props.calX - moveToNode?.left;
+        return props.calX - leftOfMoveToNode;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
@@ -133,14 +135,16 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const cCalx = isContainerElement(editor, moveTo, props);
+    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
+    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
+
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();
-    const y = endPosition.y - startPosition.diffY - rect.top;
+    const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -150,7 +154,6 @@ export function onDropItem(props, parentClass) {
 
     // Update grid area
     const gridArea = `${row} / 1 / ${row + 1} / 2`;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     Transforms.setNodes(editor, {
       [`gridArea${appenBp}`]: gridArea,
       [`left${appenBp}`]: cCalx,

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -141,7 +141,11 @@ const VirtualElement = props => {
     sx: classes.root,
     dangerouslySetInnerHTML: {
       __html: getItems()
-    }
+    },
+    style: {
+      visibility: "hidden"
+    },
+    "aria-hidden": "true"
   });
 };
 export default VirtualElement;

package/dist/Editor/common/RnD/index.js

@@ -18,7 +18,7 @@ import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
-import { focusSelection, clearSelection } from "../../helper";
+import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -163,6 +163,7 @@ const RnD = props => {
       }
       switch (e.detail) {
         case 1:
+          clearSelectionOnly(editor); //for selection removal on click outside 
           if (!enable) {
             setSelectedElement({
               path: str_path,
@@ -533,7 +534,7 @@ const RnD = props => {
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,
         style: {
-          display: "block",
+          display: readOnly ? "none" : "block",
           position: "absolute",
           left: "-8px",
           top: "-30px",

package/dist/Editor/common/Section/index.js

@@ -3,13 +3,13 @@ import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Popper, Tooltip } from "@mui/material";
-import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
+import { SectionSettingIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -72,13 +72,13 @@ const Section = props => {
         height: "100%"
       } : {
         left: "-28px",
-        top: "3px"
+        top: "1px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(TuneIcon, {})
+          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
         })
       })
     }) : null;

package/dist/Editor/common/Section/styles.js

@@ -2,8 +2,12 @@ const SectionStyle = (themeReact, theme) => ({
   root: {
     "&:hover": {
       "& .dh-para": {
-        opacity: 1
+        opacity: 1,
+        background: 'transparent',
+        width: '30px'
+        // top: '2px'
       },
+
       "& .sectionIcon": {
         opacity: 1
       },

package/dist/Editor/common/Select/index.js

@@ -0,0 +1,20 @@
+import { Select as Core } from "@mui/material";
+import SelectStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Select(props) {
+  const {
+    children,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = SelectStyles(theme);
+  return /*#__PURE__*/_jsx(Core, {
+    MenuProps: classes.MenuProps,
+    ...rest,
+    children: children
+  });
+}
+export default Select;

package/dist/Editor/common/Select/styles.js

@@ -0,0 +1,17 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    textColor,
+    background
+  } = theme?.palette?.editor || {};
+  return {
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          color: textColor,
+          background
+        }
+      }
+    }
+  };
+};
+export default SelectStyles;

package/dist/Editor/common/Shorthands/elements.js

@@ -13,6 +13,7 @@ import { insertDivider } from "../../utils/divider";
 import { insertFreeGrid } from "../../utils/freegrid";
 import { Transforms } from "slate";
 import { insertInfinityAI } from "../../utils/infinityAI";
+import { insertDataView } from "../../utils/dataView";
 import SearchButton from "../../Elements/Search/SearchButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
@@ -158,7 +159,7 @@ const ELEMENTS_LIST = [{
   renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
     ...rest,
     element: {
-      name: 'Brain'
+      name: "Brain"
     },
     icoBtnType: "cmd"
   })
@@ -262,6 +263,17 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertInfinityAI(editor);
   }
+}, {
+  name: "Dynamic Table",
+  group: "Dynamic Table",
+  desc: "",
+  type: "dataView",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "dataView"
+  }),
+  onInsert: editor => {
+    insertDataView(editor);
+  }
 }];
 const elements = props => {
   const {

package/dist/Editor/common/StyleBuilder/fieldStyle.js

@@ -6,7 +6,8 @@ const fieldStyle = [{
   fields: [{
     label: "Field Name",
     key: "name",
-    type: "text"
+    type: "text",
+    required: true
   }, {
     label: "Field Type",
     key: "element",

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -60,9 +60,10 @@ const BackgroundImage = props => {
         item: true,
         xs: 12,
         style: {
-          backgroundImage: base64 ? `url(${base64})` : "none",
-          height: "200px"
+          backgroundImage: base64 ? `url(${base64})` : "none"
+          // height: "200px",
         },
+
         sx: classes.uploadField,
         children: /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageSection",
@@ -72,6 +73,11 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              padding: 0,
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",
@@ -86,7 +92,7 @@ const BackgroundImage = props => {
                 style: {
                   paddingLeft: "8px"
                 },
-                children: "upload your image"
+                children: "Upload a image"
               })]
             })
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box, IconButton } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
+import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -81,7 +82,18 @@ const BannerSpacing = props => {
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
         component: "input",
-        sx: classes.sapcingInput,
+        sx: {
+          ...classes.sapcingInput,
+          "::-webkit-outer-spin-button": {
+            WebkitAppearance: "none",
+            margin: 0
+          },
+          "::-webkit-inner-spin-button": {
+            WebkitAppearance: "none",
+            margin: 0
+          },
+          MozAppearance: "textfield"
+        },
         name: "top",
         value: !lockSpacing ? "" : pro_value?.top,
         className: "sliderInput",
@@ -92,10 +104,22 @@ const BannerSpacing = props => {
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
+      sx: {
+        ...classes.customCheckBox
+      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: !lockSpacing,
         checked: !lockSpacing,
-        onChange: onLockSpacing
+        onChange: onLockSpacing,
+        variant: "outlined",
+        className: "checkBox",
+        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+          className: "checkedIcon",
+          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+        }),
+        icon: /*#__PURE__*/_jsx(IconButton, {
+          className: "unCheckedIcon"
+        })
       }),
       label: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
@@ -135,7 +159,8 @@ const BannerSpacing = props => {
                 value: pro_value?.top,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.topRight
+                  ...squreStyle.topRight,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -148,7 +173,8 @@ const BannerSpacing = props => {
                 value: pro_value?.right,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.bottomLeft
+                  ...squreStyle.bottomLeft,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -161,7 +187,8 @@ const BannerSpacing = props => {
                 value: pro_value?.bottom,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.bottomRight
+                  ...squreStyle.bottomRight,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -174,7 +201,8 @@ const BannerSpacing = props => {
                 value: pro_value?.left,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.topLeft
+                  ...squreStyle.topLeft,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
+import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -90,10 +91,22 @@ const BorderRadius = props => {
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
+      sx: {
+        ...classes.customCheckBox
+      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: !lockRadius,
         checked: !lockRadius,
-        onChange: onLockRadius
+        onChange: onLockRadius,
+        variant: "outlined",
+        className: "checkBox",
+        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+          className: "checkedIcon",
+          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+        }),
+        icon: /*#__PURE__*/_jsx(IconButton, {
+          className: "unCheckedIcon"
+        })
       }),
       label: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",