@flozy/editor 2.0.0 → 2.0.2

package/dist/Editor/Elements/Button/EditorButton.js

@@ -9,7 +9,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -44,19 +44,14 @@ const EditorButton = props => {
     borderStyle,
     borderWidth,
     borderColor,
-    alignment
+    alignment,
+    xsHidden
   } = element;
   const {
     linkType,
     redirectOnURLResult
   } = buttonLink || {};
   const isTrigger = linkType === "actionTrigger";
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
@@ -149,10 +144,14 @@ const EditorButton = props => {
       textAlign: alignment || textAlign || "left"
     },
     contentEditable: false,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "editor-btn-wrapper-inner",
-      style: {
-        display: "inline"
+      sx: {
+        display: {
+          lg: "inline",
+          xs: xsHidden ? "none" : "inline"
+        }
       },
       children: /*#__PURE__*/_jsxs("span", {
         style: {
@@ -165,7 +164,9 @@ const EditorButton = props => {
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
             borderWidth: borderWidth || "1px",
-            borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+            borderRadius: {
+              ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+            },
             borderStyle: borderStyle || "solid",
             padding: {
               ...getTRBLBreakPoints(bannerSpacing)

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import * as fIcons from "@mui/icons-material";
-import ChipTextPopup from "./ChipTextPopup";
-import { getTRBLBreakPoints } from "../../helper/theme";
 import { Box } from "@mui/material";
+import ChipTextPopup from "./ChipTextPopup";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -26,12 +26,6 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -82,7 +76,9 @@ const ChipText = props => {
         ...getTRBLBreakPoints(bannerSpacing)
       },
       border: borderColor ? `1px solid ${borderColor}` : "none",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       background: bgColor || "#CCC",
       color: textColor
     },

package/dist/Editor/Elements/Embed/Image.js

@@ -26,17 +26,12 @@ const Image = ({
     borderColor,
     borderRadius,
     boxShadow,
-    width: oldWidth
+    width: oldWidth,
+    xsHidden
   } = element;
   const {
     readOnly
   } = customProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const {
     vertical,
     horizantal
@@ -134,9 +129,12 @@ const Image = ({
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "image"
       }), "Add Image"]
-    }) : /*#__PURE__*/_jsx("img", {
-      style: {
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "img",
+      sx: {
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         objectFit: "cover",
         boxShadow: boxShadow || "none"
       },
@@ -165,7 +163,10 @@ const Image = ({
     component: "div",
     className: "embed has-hover",
     sx: {
-      display: "flex",
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       width: `100%`,
       maxWidth: "100%",
       padding: {

package/dist/Editor/Elements/Embed/Video.js

@@ -26,7 +26,8 @@ const Video = ({
     borderWidth,
     borderColor,
     borderStyle,
-    url
+    url,
+    xsHidden
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -52,12 +53,6 @@ const Video = ({
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -140,9 +135,10 @@ const Video = ({
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "videoPlayer"
       })
-    }) : /*#__PURE__*/_jsx("iframe", {
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "iframe",
       className: "embedd-iframe",
-      style: {
+      sx: {
         border: "none",
         position: "absolute",
         width: "100%",
@@ -151,7 +147,9 @@ const Video = ({
         left: "0px",
         ...(gradientBorder(borderColor) || {}),
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid"
       },
       src: embedURL,
@@ -168,11 +166,14 @@ const Video = ({
       }), "Embed Video or Other"]
     }) : /*#__PURE__*/_jsx(VideoContent, {});
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "embed has-hover video",
-    style: {
-      display: "flex",
+    sx: {
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       flexDirection: "row",
       width: `100%`,
       justifyContent: horizantal,

package/dist/Editor/Elements/Form/Form.js

@@ -11,7 +11,7 @@ import { formField } from "../../utils/formfield";
 import { formSubmit } from "../../service/formSubmit";
 import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import Workflow from "./Workflow";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { validation } from "./FormElements/validations";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,12 +41,6 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
   const btnAlign = buttonProps?.alignment || {};
@@ -66,7 +60,7 @@ const Form = props => {
   } : {
     borderColor: buttonProps?.borderColor || "none"
   };
-  const getFieldProps = (key = '', val = '') => {
+  const getFieldProps = (key = "", val = "") => {
     return element?.children?.find(obj => obj && obj[key] === val);
   };
   const handleSubmit = async (event, test = false) => {
@@ -77,14 +71,14 @@ const Form = props => {
       const formData = new FormData(formEle?.current);
       setLoading(true);
       let response = {};
-      const emailObject = getFieldProps('field_type', 'email');
-      let user_email = '';
+      const emailObject = getFieldProps("field_type", "email");
+      let user_email = "";
       const validations = [];
       for (let pair of formData.entries()) {
         if (emailObject?.name === pair[0]) {
           user_email = pair[1];
         }
-        const fieldData = getFieldProps('name', pair[0]);
+        const fieldData = getFieldProps("name", pair[0]);
         let rule = [];
         if (fieldData?.required) {
           rule.push(`isRequired`);
@@ -92,7 +86,7 @@ const Form = props => {
         if (fieldData?.field_type === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required || fieldData?.field_type === 'email') {
+        if (fieldData?.required || fieldData?.field_type === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],
@@ -274,7 +268,9 @@ const Form = props => {
         color: textColor || "#FFF",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         padding: {
@@ -317,7 +313,9 @@ const Form = props => {
                 borderWidth: "1px",
                 borderBlockStyle: "solid",
                 ...btnBorderStyle,
-                borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
+                borderRadius: {
+                  ...getBreakPointsValue(btnR || {}, null, "overrideBorderRadius", true)
+                },
                 padding: {
                   ...getTRBLBreakPoints(btnSpacing)
                 },

package/dist/Editor/Elements/Form/FormElements/FormEmail.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { getTRBLBreakPoints } from "../../../helper/theme";
 import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormEmail = props => {
   const {
@@ -18,12 +18,6 @@ const FormEmail = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -48,7 +42,9 @@ const FormEmail = props => {
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { getTRBLBreakPoints } from "../../../helper/theme";
 import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -18,12 +18,6 @@ const FormText = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -46,7 +40,9 @@ const FormText = props => {
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box } from "@mui/material";
-import { getTRBLBreakPoints } from "../../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormTextArea = props => {
   const {
@@ -17,12 +17,6 @@ const FormTextArea = props => {
     bgColor,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -45,7 +39,9 @@ const FormTextArea = props => {
         height: height || "150px",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -128,15 +128,15 @@ const FormWorkflow = props => {
                   },
                   children: [/*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: "min",
+                    value: "minutes",
                     children: "Minutes"
                   }), /*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: "hr",
+                    value: "hours",
                     children: "Hours"
                   }), /*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: "day",
+                    value: "days",
                     children: "Day"
                   })]
                 })

package/dist/Editor/Elements/Form/Workflow/index.js

@@ -28,8 +28,8 @@ const Workflow = props => {
   const [workflowList, setWorkflowList] = useState([]);
   const [formData, setFormData] = useState(false);
   const [schedule, setSchedule] = useState("immediately");
-  const [scheduleEvery, setScheduleEvery] = useState("min");
-  const currentInstant = scheduleEvery === "min" ? minutes : scheduleEvery === "hr" ? hours : scheduleEvery === "day" ? days : [];
+  const [scheduleEvery, setScheduleEvery] = useState("minutes");
+  const currentInstant = scheduleEvery === "minutes" ? minutes : scheduleEvery === "hours" ? hours : scheduleEvery === "days" ? days : [];
   const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
   const [subject, setSubject] = useState("Welcome to Flozy!");
   const [bodyData, setBodyData] = useState("Hey %field_name% \n\nThanks for attending the event called %Event Name% at %Event Time% on %Event Time%.");

package/dist/Editor/Elements/Grid/Grid.js

@@ -43,19 +43,14 @@ const Grid = props => {
     borderColor,
     borderStyle,
     borderRadius,
-    flexWrap
+    flexWrap,
+    xsHidden
   } = element;
   const {
     vertical,
     horizantal,
     flexDirection
   } = alignment || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -254,13 +249,19 @@ const Grid = props => {
     className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
-    style: {
+    sx: {
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       background: bgColor,
       alignContent: vertical,
       ...bgImage,
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       borderStyle: borderStyle || "solid"
     },
     "data-path": path.join(","),

package/dist/Editor/Elements/Grid/GridItem.js

@@ -34,19 +34,14 @@ const GridItem = props => {
     borderColorHover,
     textColor,
     animation,
-    cellGHeight
+    cellGHeight,
+    xsHidden
   } = element;
   const {
     vertical,
     horizantal,
     flexDirection
   } = alignment || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -109,12 +104,17 @@ const GridItem = props => {
       height: {
         ...getBreakPointsValue(cellGHeight || "auto")
       },
-      display: "flex",
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -1,5 +1,7 @@
 import React from "react";
 import * as fIcons from "@mui/icons-material";
+import { Box } from "@mui/material";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const InlineIcon = props => {
@@ -21,25 +23,22 @@ const InlineIcon = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = fIcons["Check"];
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "editor-icon-text",
     contentEditable: false,
-    style: {
+    component: "button",
+    sx: {
       display: "inline",
       paddingLeft: `${left}px`,
       paddingRight: `${right}px`,
       paddingTop: `${top}px`,
       paddingBottom: `${bottom}px`,
       border: borderColor ? `1px solid ${borderColor}` : "none",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       background: bgColor || "#CCC",
       color: textColor
     },

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

@@ -44,12 +44,6 @@ const Section = props => {
     sectionGridSize,
     sectionAlignment
   } = element;
-  const {
-    topLeft: ssTopLeft,
-    topRight: ssTopRight,
-    bottomLeft: ssBottomLeft,
-    bottomRight: ssBottomRight
-  } = sectionBorderRadius || {};
   const {
     vertical,
     horizantal,
@@ -110,7 +104,9 @@ const Section = props => {
       padding: {
         ...getTRBLBreakPoints(sectionBannerSpacing)
       },
-      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+      },
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical

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

@@ -62,6 +62,11 @@ const buttonStyle = [{
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Banner Spacing",
     key: "bannerSpacing",
     type: "bannerSpacing"

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

@@ -31,6 +31,11 @@ const embedImageStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

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

@@ -11,6 +11,11 @@ const embedVideoStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

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

@@ -33,7 +33,7 @@ const BannerSpacing = props => {
     }
     onChange({
       [key]: {
-        ...getBreakPointsValue(val),
+        ...getBreakPointsValue(val, null),
         [size?.device]: {
           ...value,
           ...changeAll,

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

@@ -1,12 +1,14 @@
 import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 const BorderRadius = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     elementProps,
@@ -21,6 +23,8 @@ const BorderRadius = props => {
   const {
     key
   } = data;
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockRadius) {
@@ -30,9 +34,11 @@ const BorderRadius = props => {
     }
     onChange({
       [key]: {
-        ...value,
-        [e.target.name]: e.target.value,
-        ...changeAll
+        ...getBreakPointsValue(val, null),
+        [size?.device]: {
+          ...changeAll,
+          [e.target.name]: e.target.value
+        }
       }
     });
   };
@@ -63,15 +69,18 @@ const BorderRadius = props => {
         disabled: !lockRadius,
         className: "spacingSlider",
         defaultValue: value?.topLeft || 0,
+        value: value?.topLeft || 0,
         "aria-label": "Default",
         valueLabelDisplay: "auto",
         max: 100,
+        name: "topLeft",
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
         value: !lockRadius ? "" : value?.topLeft || 0,
         className: "sliderInput",
+        name: "topLeft",
         disabled: !lockRadius,
         onChange: handleChange
       })]

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

@@ -15,6 +15,11 @@ const gridItemStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

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

@@ -40,6 +40,11 @@ const gridStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

package/dist/Editor/helper/theme.js

@@ -43,6 +43,9 @@ const overrides = {
   },
   overrideReSizeH: val => {
     return `${val?.height}px`;
+  },
+  overrideBorderRadius: val => {
+    return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
 export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"