@flozy/editor 5.5.6 → 5.5.8

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,35 +3,24 @@ 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,
-    show
+    onChange
   } = props;
   const classes = useSwitchViewport();
-  const {
-    setSelectedElement,
-    setActiveBreakPoint
-  } = useEditorContext();
   useEffect(() => {
-    // to reset selection on viewport changes - FS-6589
-    setSelectedElement({});
+    console.log(breakpoint);
   }, [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, {})
@@ -41,7 +30,6 @@ 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,6 +1,5 @@
 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,
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props, appenBp) {
+function isContainerElement(editor, moveTopath, props) {
   try {
     const {
       path,
@@ -92,7 +91,6 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
       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
@@ -100,10 +98,10 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
           return props.calX;
         } else {
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
         }
       } else {
-        return props.calX - leftOfMoveToNode;
+        return props.calX - moveToNode?.left;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
@@ -135,16 +133,14 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
-    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
-
+    const cCalx = isContainerElement(editor, moveTo, props);
     // 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 = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
+    const y = endPosition.y - startPosition.diffY - rect.top;
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -154,6 +150,7 @@ 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,11 +141,7 @@ 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, clearSelectionOnly } from "../../helper";
+import { focusSelection, clearSelection } 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,7 +163,6 @@ const RnD = props => {
       }
       switch (e.detail) {
         case 1:
-          clearSelectionOnly(editor); //for selection removal on click outside
           if (!enable) {
             setSelectedElement({
               path: str_path,
@@ -367,7 +366,7 @@ const RnD = props => {
     // some cases
     if (dragOverEle?.dataset?.dragovertype === undefined) {
       // means check for parent element
-      dragOverEle = e?.toElement?.closest(".freegrid-container-parent");
+      dragOverEle = e?.toElement?.parentElement;
     }
     if (dragOverEle?.dataset?.dragovertype !== "child") {
       const oldPath = dragging.dragOver;
@@ -534,7 +533,7 @@ const RnD = props => {
       children: [/*#__PURE__*/_jsx("div", {
         id: `opt_ref_${str_path}`,
         style: {
-          display: readOnly ? "none" : "block",
+          display: "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: "1px"
+        top: "3px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
+          children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
       })
     }) : null;

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

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

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

@@ -13,7 +13,6 @@ 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 = [{
@@ -159,7 +158,7 @@ const ELEMENTS_LIST = [{
   renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
     ...rest,
     element: {
-      name: "Brain"
+      name: 'Brain'
     },
     icoBtnType: "cmd"
   })
@@ -263,17 +262,6 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertInfinityAI(editor);
   }
-}, {
-  name: "Dynamic Table",
-  group: "Dynamic Table",
-  desc: "",
-  type: "dataView",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "dataTable"
-  }),
-  onInsert: editor => {
-    insertDataView(editor);
-  }
 }];
 const elements = props => {
   const {

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

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

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

@@ -60,10 +60,9 @@ 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",
@@ -73,11 +72,6 @@ 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",
@@ -92,7 +86,7 @@ const BackgroundImage = props => {
                 style: {
                   paddingLeft: "8px"
                 },
-                children: "Upload a image"
+                children: "upload your image"
               })]
             })
           })

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

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

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

@@ -1,9 +1,8 @@
 import React from "react";
-import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton } from "@mui/material";
+import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } 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"];
@@ -91,22 +90,10 @@ const BorderRadius = props => {
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
-      sx: {
-        ...classes.customCheckBox
-      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: !lockRadius,
         checked: !lockRadius,
-        onChange: onLockRadius,
-        variant: "outlined",
-        className: "checkBox",
-        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
-          className: "checkedIcon",
-          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
-        }),
-        icon: /*#__PURE__*/_jsx(IconButton, {
-          className: "unCheckedIcon"
-        })
+        onChange: onLockRadius
       }),
       label: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",

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

@@ -1,7 +1,6 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px",
-      '& .MuiCheckbox-root svg': {
-        fill: 'unset !important'
-      }
+      padding: "10px"
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
-  const {
-    theme
-  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        background: theme?.palette?.editor?.miniToolBarBackground,
-        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -16,7 +16,6 @@ const Color = props => {
     hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
-  const getLable = label === 'Text' ? 'Select text color' : label === 'Background' ? 'Select background color' : label;
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
@@ -74,7 +73,7 @@ const Color = props => {
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,
-      placeholder: getLable || `${label} color code`,
+      placeholder: `${label} color code`,
       InputLabelProps: {
         shrink: true
       },

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

@@ -73,7 +73,7 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            // textAlign: "center", 
+            textAlign: "center",
             padding: "11px"
           }
         },

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

@@ -91,14 +91,12 @@ const Icons = props => {
         overflowY: "auto",
         paddingTop: "5px"
       },
-      className: "muiIconsListParent",
       children: list.map(m => {
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
-            className: "muiIconsList",
             children: /*#__PURE__*/_jsx(MUIIcon, {
               iconName: m,
               props: customProps

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

@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
-import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing
+  metadatamapping: MetaDataMapping
 };
 export default FieldMap;

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

@@ -53,7 +53,7 @@ export const radiusStyle = {
 export const squreStyle = {
   topLeft: {
     position: "absolute",
-    left: "-37px",
+    left: "-35px",
     top: "50%",
     transform: "translateY(-50%)",
     width: "30px",
@@ -61,7 +61,7 @@ export const squreStyle = {
     margin: "auto",
     // borderTop: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    // border: `1px solid transparent`,
+    border: `none`,
     // borderBottom: `none`,
     fontSize: "14px",
     textAlign: "center"
@@ -71,13 +71,13 @@ export const squreStyle = {
     // top: "-28px",
     left: "50%",
     transform: "translateX(-50%)",
-    top: "-37px",
+    top: "-35px",
     width: "30px",
     height: "30px",
     // borderTop: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    // border: `none`,
-    // borderLeft: `none`,
+    border: `none`,
+    borderLeft: `none`,
     fontSize: "14px"
   },
   bottomLeft: {
@@ -85,18 +85,18 @@ export const squreStyle = {
     // left: "-25px",
     top: "50%",
     transform: "translateY(-50%)",
-    right: "-37px",
+    right: "-35px",
     width: "30px",
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    // border: `none`,
-    // borderTop: `none`,
+    border: `none`,
+    borderTop: `none`,
     fontSize: "14px"
   },
   bottomRight: {
     position: "absolute",
-    bottom: "-37px",
+    bottom: "-35px",
     // right: "-25px",
     left: "50%",
     transform: "translateX(-50%)",
@@ -104,8 +104,8 @@ export const squreStyle = {
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    // border: "none",
-    // borderLeft: "none",
+    border: "none",
+    borderLeft: "none",
     fontSize: "14px"
   }
 };