@flozy/editor 5.3.5 → 5.3.6

package/dist/Editor/CommonEditor.js

@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
+import { getTRBLBreakPoints } from "./helper/theme";
 import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
@@ -139,8 +139,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth,
-    lineHeight
+    maxWidth: pageMaxWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -308,13 +307,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    if (!readOnly) {
-      if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-        updateTopBanner(newValue, setTopBanner);
-        debounced(newValue);
-        if (!isInteracted) {
-          setIsInteracted(true);
-        }
+    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+      updateTopBanner(newValue, setTopBanner);
+      debounced(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
       }
     }
   };
@@ -333,7 +330,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com"
   };
-  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -536,7 +532,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         padding: {
                           ...getTRBLBreakPoints(bannerSpacing)
                         },
-                        lineHeight: lineH,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",
@@ -594,9 +589,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -31,7 +31,7 @@ blockquote {
   border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
-  /* padding-left: 10px; */
+  padding-left: 10px;
   margin: 0px;
 }
 
@@ -149,7 +149,7 @@ blockquote {
 .grid-item-toolbar button,
 .element-toolbar button,
 .element-toolbar a {
-  border-radius: 50%;
+  border-radius: 10px;
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
@@ -225,13 +225,9 @@ blockquote {
   background-color: #0052cc;
   padding: 8px 12px;
   color: #ffffff;
-  font-weight: 600;
-  font-size: 14px;
+  font-weight: bold;
   opacity: 1;
   border-radius: 32px;
-  text-transform: math-auto;
-  height: 36px;
-  padding: 0px 12px;
 }
 
 .signature-btn-container button:hover {
@@ -362,10 +358,6 @@ blockquote {
   stroke: #2563eb;
 }
 
-.brushIcon:hover {
-  background: unset;
-}
-
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;
@@ -499,14 +491,6 @@ blockquote {
   text-transform: none;
 }
 
-.MuiButton-root.primaryBtn:disabled {
-  background: #eee !important;
-  box-shadow: none !important;
-  color: #ccc !important;
-  border: 1px solid #ccc !important;
-  cursor: not-allowed;
-}
-
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
   background: #eee;
@@ -532,7 +516,7 @@ blockquote {
 }
 
 .deleteBtn {
-  background: #d32f2f ;
+  background: #ffffff;
   border: 1px solid #d32f2f !important;
   box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
   border-radius: 8px !important;
@@ -542,7 +526,6 @@ blockquote {
   margin-right: 15px !important;
   color: #d32f2f;
   width: auto !important;
-  text-transform: capitalize !important;
 }
 
 @media (max-width: 480px) {
@@ -680,8 +663,7 @@ blockquote {
 }
 
 .resize-br.img-resizer {
-  bottom: 10px;
-  right: 5px;
+  bottom: 8px;
 }
 
 .visible-on-hover {
@@ -1041,11 +1023,11 @@ blockquote {
   width: 200px;
   cursor: pointer;
   color: #464646;
-  /* background-color: #fff; */
+  background-color: #fff;
   padding: 4px 6px;
   border-radius: 12px;
   span {
-    text-transform: math-auto;
+    text-transform: capitalize;
   }
   @media only screen and (max-width: 599px) {
   background-color: unset;
@@ -1067,7 +1049,7 @@ blockquote {
 }
 
 .textFontArrows .MuiIconButton-root {
-  padding: 0px;
+  padding: 2px;
 }
 
 .tools-drawer .MuiTypography-root {
@@ -1254,19 +1236,6 @@ blockquote {
   pointer-events: auto;
 }
 
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1282,6 +1251,20 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+  }
+
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 
@@ -1301,22 +1284,3 @@ blockquote {
   background: #A7AEC1; 
 }
 
-::selection {
-  color: inherit;
-  background: rgba(35, 131, 226, 0.35) !important;
-}
-
-::-moz-selection {
-  background: rgba(35, 131, 226, 0.35) !important;
-  color: inherit;
-}
-
-::-webkit-selection {
-  background: rgba(35, 131, 226, 0.35) !important;
-  color: inherit;
-}
-
-.gradientFillBtn {
-  background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
-  text-transform: math-auto !important;
-}

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -6,8 +6,7 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -79,10 +78,6 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
-  const {
-    theme
-  } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -102,7 +97,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -111,7 +105,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
-          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "none"
                 },
-                [theme?.breakpoints.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 }
               },

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

@@ -11,7 +11,6 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +36,6 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
-  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -138,7 +136,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -148,7 +145,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -161,9 +157,7 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important",
-                ...classes.buttonMoreOption,
-                ...classes.buttonMoreOption3
+                marginBottom: "0px !important"
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {
@@ -265,12 +259,11 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "12px",
+            fontSize: textSize || "inherit",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
-            lineHeight: 1.43,
             "& .element-toolbar": {
               display: "none"
             },

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -109,13 +109,11 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick,
-    defaultColors = []
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const firstRow = defaultColors?.length ? defaultColors : row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -133,7 +131,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [firstRow].map((m, i) => {
+      children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

package/dist/Editor/Elements/Divider/Divider.js

@@ -5,7 +5,6 @@ import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import DividerPopup from "./DividerPopup";
 import { Transforms } from "slate";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
@@ -18,7 +17,6 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const {
     borderColor = theme?.palette?.primary?.main || "#0F172A",
     borderWidth = "1px",
@@ -45,16 +43,11 @@ const Divider = props => {
     showTool,
     onSettings
   }) => {
-    // const hoverStyles = readOnly
-    //   ? {
-    //       "&.MuiIconButton-root:hover": {
-    //         background:
-    //           theme?.palette?.type === "dark"
-    //             ? `${theme?.palette?.greyshades?.light8} !important`
-    //             : `${theme?.palette?.containers?.card} !important`,
-    //       },
-    //     }
-    //   : {};
+    const hoverStyles = readOnly ? {
+      "&.MuiIconButton-root:hover": {
+        background: theme?.palette?.type === "dark" ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
+      }
+    } : {};
     return /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "divider-settings",
@@ -68,22 +61,14 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            // background:
-            //   theme?.palette?.type === "dark"
-            //     ? theme?.palette?.greyshades?.light8
-            //     : theme?.palette?.containers?.card,
-            // border:
-            //   theme?.palette?.type === "dark"
-            //     ? "1px solid #E4E8EB33"
-            //     : "none",
+            background: theme?.palette?.type === "dark" ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
+            border: theme?.palette?.type === "dark" ? "1px solid #E4E8EB33" : "none",
             boxShadow: "0px 0px 4px 0px #00000040",
             borderRadius: "50%",
             "& svg": {
-              width: '16px',
-              height: '16px'
+              stroke: theme?.palette?.text?.secondary3
             },
-            // ...hoverStyles,
-            ...classes.buttonMoreOption
+            ...hoverStyles
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})

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

@@ -14,33 +14,28 @@ import ImageFrame from "./Frames/ImageFrame";
 import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
 import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
-import useCommonStyle from "../../commonStyle";
-import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
   setOpenNav,
-  topM,
-  classes
+  topM
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "-4px",
+      top: "-5px",
       left: topM ? "35px" : "0px",
-      margin: "0px",
-      gap: '3px'
+      margin: "0px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onSettings,
-        sx: classes.buttonMoreOption,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
       title: "Link Settings",
@@ -48,7 +43,6 @@ const ToolBar = ({
       children: /*#__PURE__*/_jsx(IconButton, {
         className: "last-btn",
         onClick: () => setOpenNav(true),
-        sx: classes.buttonMoreOption,
         children: /*#__PURE__*/_jsx(LinkIcon, {})
       })
     })]
@@ -70,8 +64,7 @@ const ImageContent = props => {
     handleImageClick,
     onTouchEnd,
     path,
-    theme,
-    classes
+    theme
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -80,9 +73,6 @@ const ImageContent = props => {
     onClick: () => {
       setOpenSettings(true);
     },
-    sx: {
-      ...classes.emptyThumbBtn
-    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
@@ -193,10 +183,6 @@ const Image = props => {
     onClick,
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCommonStyle(appTheme);
   const handleImageClick = () => {
     try {
       Transforms.select(editor, {
@@ -307,8 +293,7 @@ const Image = props => {
         isEmpty: isEmpty,
         onSettings: onSettings,
         setOpenNav: setOpenNav,
-        topM: size.width < 100,
-        classes: classes
+        topM: size.width < 100
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,
@@ -316,8 +301,7 @@ const Image = props => {
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path,
-        theme: theme,
-        classes: classes
+        theme: theme
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -333,14 +317,11 @@ const Image = props => {
           handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && url && /*#__PURE__*/_jsx(IconButton, {
-        onPointerDown: onMouseDown
-        // style={{
-        //   opacity: 1,
-        //   // background: "#FFF",
-        //   // ...classes.resizeButton
-        // }}
-        ,
-        sx: classes.resizeButton,
+        onPointerDown: onMouseDown,
+        style: {
+          opacity: 1,
+          background: "#FFF"
+        },
         className: "resize-br visible-on-hover img-resizer",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]

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

@@ -11,8 +11,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VideoContent = props => {
@@ -70,16 +68,12 @@ const VideoPlaceholder = props => {
   const {
     url,
     readOnly,
-    onSettings,
-    classes
+    onSettings
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     onClick: onSettings,
-    sx: {
-      ...classes.emptyThumbBtn
-    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
     }), "Embed Video or Other"]
@@ -127,10 +121,6 @@ const Video = ({
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
   const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCommonStyle(appTheme);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -277,8 +267,7 @@ const Video = ({
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
-        resizing: resizing,
-        classes: classes
+        resizing: resizing
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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

@@ -402,7 +402,6 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
-        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -47,22 +47,22 @@ export function wrapThemeBreakpoints(sxProp, prop, theme) {
     const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
       switch (b) {
         case "md":
-          a[theme?.breakpoints?.up("lg")] = {
+          a[theme.breakpoints.up("lg")] = {
             [prop]: sxProp["md"] || sxProp["lg"]
           };
           break;
         case "sm":
-          a[theme?.breakpoints?.up("lg")] = {
+          a[theme.breakpoints.up("lg")] = {
             [prop]: sxProp["sm"] || sxProp["lg"]
           };
           break;
         case "xs":
-          a[theme?.breakpoints?.between("xs", "md")] = {
+          a[theme.breakpoints.between("xs", "md")] = {
             [prop]: sxProp["xs"] || sxProp["lg"]
           };
           break;
         default:
-          a[theme?.breakpoints?.up("lg")] = {
+          a[theme.breakpoints.up("lg")] = {
             [prop]: sxProp["lg"]
           };
       }

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -171,7 +171,6 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
-            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",
@@ -319,7 +318,7 @@ const useFreeGridStyles = ({
         "& .element-toolbar": {
           display: "none"
         },
-        [theme?.breakpoints?.between("xs", "md")]: {
+        [theme.breakpoints.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
       },