@flozy/editor 9.9.6 → 9.9.7

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

@@ -1,8 +1,9 @@
 const useElementSettingsStyle = theme => ({
   root: {
     zIndex: 1200,
-    background: theme?.palette?.editor?.background,
-    borderRadius: "10px",
+    background: theme?.palette?.editor?.miniToolBarBackground,
+    border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+    borderRadius: "20px",
     overflow: "hidden",
     boxShadow: "0px 0px 12px 4px #00000014",
     padding: "10px 16px",
@@ -58,28 +59,34 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      background: theme?.palette?.editor?.background,
-      paddingLeft: "4px",
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      paddingLeft: "2px",
+      paddingRight: "6px",
+      overflow: "hidden",
+      "&:hover": {
+        overflowY: "auto",
+        "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiInputBase-root, input": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`
-      },
       "& .borderInput": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiCheckbox-root": {
-        "& svg": {
-          fill: theme?.palette?.editor?.textColor
-        }
-      },
       "& .fillPath": {
         fill: theme?.palette?.editor?.textColor
       },
       "& .MuiIconButton-root": {
         color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiFormHelperText-root": {
+        color: theme?.palette?.editor?.textColor
       }
     },
     "& .item-wrapper": {
@@ -104,6 +111,134 @@ const useElementSettingsStyle = theme => ({
           }
         }
       }
+    },
+    "& .settingsPopUp": {
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      "& .text-formatter-popup": {
+        paddingRight: "10px",
+        overflow: "hidden",
+        "&:hover": {
+          overflow: "auto",
+          "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
+            background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+          },
+          "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
+            visibility: "hidden"
+          }
+        },
+        "& .more-btn-cbs": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          paddingTop: "10px",
+          "& svg": {
+            width: "20px",
+            height: "24px"
+          }
+        },
+        "& .MuiInputBase-root": {
+          height: "36px"
+        }
+      },
+      "& .popUpHeader": {
+        fontSize: "16px",
+        fontFamily: "'Inter',sans-serif",
+        fontWeight: "700",
+        fontSize: "16px",
+        lineHeight: "25px",
+        "& button": {
+          background: theme?.palette?.editor?.closeButtonBackground,
+          borderRadius: "8px",
+          "& svg": {
+            fill: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      },
+      "& .MuiTypography-root": {
+        color: `${theme?.palette?.editor?.textColor} !important`
+      },
+      "& .MuiInputBase-root": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        fontSize: "12px",
+        height: "36px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        "& fieldset": {
+          border: `1px solid transparent !important`,
+          background: "transparent",
+          borderRadius: "8px"
+          // fontSize: "12px",
+        },
+
+        "& input": {
+          // border: `1px solid transparent`,
+          // background: theme?.palette?.editor?.inputFieldBgColor,
+          borderRadius: "8px"
+          // fontSize: "12px",
+        }
+      },
+
+      "& .editor-dd": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid transparent !important`
+        }
+      },
+      "& .MuiAutocomplete-root": {
+        "& fieldset": {
+          border: `1px solid transparent !important`
+        }
+      },
+      "& .sliderInput": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "10px",
+        paddingLeft: "10px",
+        width: "50px !important"
+      },
+      "& .selctedBtnIcon": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "10px",
+        height: "36px",
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        }
+      },
+      "& .muiIconsListParent": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .menu-item-app-header": {
+        paddingBottom: "5px",
+        "& .text-field1": {
+          marginRight: "5px"
+        },
+        "& .settingsIcon, .deleteIcon": {
+          width: "20px",
+          height: "20px",
+          "& path": {
+            stroke: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      },
+      "& .MuiPaper-root": {
+        background: theme?.palette?.editor?.miniToolBarBackground
+      },
+      "& .iconRadioButton": {
+        "& svg": {
+          height: "24px",
+          width: "24px"
+        },
+        "& .MuiRadio-root": {
+          paddingLeft: "0px"
+        }
+      }
     }
   },
   dialog: {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import { Box, Paper, Popper, Typography, Tooltip, IconButton, Grid } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import useOptionsPopupStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ const OptionsPopup = props => {
       className: "papper-root",
       children: [/*#__PURE__*/_jsxs(Typography, {
         variant: "div",
-        className: "item-wrapper title",
+        className: "item-wrapper title sectionOptionTitle",
         children: [translation(title), /*#__PURE__*/_jsx(Box, {
           component: "div",
           children: /*#__PURE__*/_jsx(Tooltip, {
@@ -38,11 +38,14 @@ const OptionsPopup = props => {
             arrow: true,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: handleClose,
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
+              children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
             })
           })
         })]
-      }), children]
+      }), /*#__PURE__*/_jsx(Grid, {
+        className: "sectionOptionChild",
+        children: children
+      })]
     })
   }) : null;
 };

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -3,31 +3,139 @@ const useOptionsPopupStyle = ({
 }) => ({
   root: {
     zIndex: 1200,
-    background: theme?.palette?.editor?.background,
-    borderRadius: "7px",
+    background: theme?.palette?.editor?.miniToolBarBackground,
+    border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+    borderRadius: "20px",
     overflow: "hidden",
-    boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+    boxShadow: "0px 0px 12px 4px #00000014",
     marginRight: "4px !important",
+    padding: "0px 5px",
+    fontFamily: "'Inter',sans-serif",
+    "& .MuiPaper-root": {
+      background: theme?.palette?.editor?.miniToolBarBackground
+    },
+    "& .sectionOptionTitle": {
+      fontSize: "16px",
+      fontFamily: "'Inter',sans-serif",
+      fontWeight: "700",
+      fontSize: "16px",
+      lineHeight: "25px",
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      "& button": {
+        background: theme?.palette?.editor?.closeButtonBackground,
+        borderRadius: "8px",
+        "& svg": {
+          fill: theme?.palette?.editor?.closeButtonSvgStroke
+        }
+      }
+    },
+    "& .sectionOptionChild": {
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      "& .MuiBox-root": {
+        maxHeight: "unset"
+      },
+      "& .MuiInputBase-root, fieldset": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        "& fieldset": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          background: "transparent",
+          borderRadius: "8px"
+        },
+        "& input": {
+          border: `1px solid transparent`,
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          borderRadius: "8px",
+          fontSize: "12px",
+          color: theme?.palette?.editor?.textColor
+        }
+      },
+      "& p": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .sliderInput": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "10px"
+      },
+      "& .style-settings-wrpr": {
+        overflow: "hidden",
+        "&:hover": {
+          overflowY: "auto",
+          "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
+            background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+          },
+          "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
+            visibility: "hidden"
+          }
+        }
+      },
+      "& svg": {
+        width: "17.5px",
+        height: "17.5px"
+      }
+    },
+    "& .MuiList-root": {
+      "& .MuiButtonBase-root": {
+        padding: "8px 12px",
+        "& .MuiTypography-root": {
+          color: `${theme?.palette?.editor?.textColor} !important`,
+          fontSize: "14px",
+          fontWeight: "500",
+          fontFamily: "'Inter',sans-serif"
+        },
+        "&:hover": {
+          background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
+          "& .MuiTypography-root": {
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .MuiListItemIcon-root": {
+            "& .signatureElementIcon, & .newLineElementIcon": {
+              "& path": {
+                fill: `${theme?.palette?.editor?.textColor}`
+              }
+            },
+            "& .commonSvgStyle, & .commonSvgStyle2": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.textColor}`
+              }
+            },
+            "& .colorBoxElementIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.textColor}`,
+                fill: "none"
+              }
+            },
+            "& .gridElementIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.textColor}`,
+                fill: `${theme?.palette?.editor?.textColor}`
+              }
+            }
+          }
+        }
+      }
+    },
+    "& .sectionMoreOption": {
+      "& .MuiButtonBase-root": {
+        padding: "12px 12px",
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        fontSize: "14px",
+        fontWeight: "500",
+        fontFamily: "'Inter',sans-serif"
+      }
+    },
     "& .papper-root": {
       width: "344px",
       boxShadow: "none",
-      border: `1px solid ${theme?.palette?.editor?.borderColor}`,
       borderRadius: "7px",
       background: theme?.palette?.editor?.background,
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiInputBase-root, input": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`
-      },
       "& .borderInput": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiCheckbox-root": {
-        "& svg": {
-          fill: theme?.palette?.editor?.textColor
-        }
       }
     },
     "& .item-list-wrpr": {
@@ -37,13 +145,7 @@ const useOptionsPopupStyle = ({
       "& .MuiListItemButton-root": {
         borderRadius: "7px",
         color: theme?.palette?.editor?.textColor,
-        "&:hover": {
-          color: theme?.palette?.editor?.activeColor,
-          background: "rgba(233, 243, 254, 1)",
-          "& .MuiTypography-root": {
-            color: theme?.palette?.editor?.activeColor
-          }
-        }
+        alignItems: "center"
       }
     },
     "& .item-wrapper": {

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

@@ -1,6 +1,7 @@
 import { Select as Core } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Select(props) {
   const {
@@ -13,6 +14,7 @@ function Select(props) {
   const classes = SelectStyles(theme);
   return /*#__PURE__*/_jsx(Core, {
     MenuProps: classes.MenuProps,
+    IconComponent: KeyboardArrowDownRoundedIcon,
     ...rest,
     children: children
   });

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Settings from "@mui/icons-material/Settings";
 import LinkSettings from "../../LinkSettings";
 import { getLinkType } from "../../../utils/helper";
+import SettingsIcon from "../../../assets/svg/SettingsIcon";
+import { DeleteIcon } from "../../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -126,6 +126,7 @@ const MenusArray = props => {
           display: "flex",
           alignItems: "center"
         },
+        className: "menu-item-app-header",
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "text",
           type: "text",
@@ -134,7 +135,8 @@ const MenusArray = props => {
           size: "small",
           sx: {
             mb: 0
-          }
+          },
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(TextField, {
           name: "url",
           type: "text",
@@ -142,7 +144,8 @@ const MenusArray = props => {
           onChange: handleChange(i),
           size: "small",
           fullWidth: true,
-          disabled: true
+          disabled: true,
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Link Settings"),
           arrow: true,
@@ -151,14 +154,18 @@ const MenusArray = props => {
               menu: m,
               index: i
             }),
-            children: /*#__PURE__*/_jsx(Settings, {})
+            children: /*#__PURE__*/_jsx(SettingsIcon, {
+              className: "settingsIcon"
+            })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Delete Menu"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onDelete(i),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              className: "deleteIcon"
+            })
           })
         })]
       }, `add-m-${i}`);

package/dist/Editor/common/iconListV2.js

@@ -1236,27 +1236,37 @@ export function ToggleFullScreenIcon() {
 }
 export function CodeElementIcon() {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "12",
-    height: "9",
-    viewBox: "0 0 12 9",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "commonSvgStyle",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M6.83331 1L4.83331 8",
+      d: "M8 10L6 12L8 14",
       stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M8.83331 2.32983L10.6666 4.32983L8.83331 6.32983",
+      d: "M16 10L18 12L16 14",
       stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.83333 2.32983L1 4.32983L2.83333 6.32983",
+      d: "M13 9.66992L11 14.33",
       stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -1431,4 +1441,89 @@ export function SectionDragIcon() {
       fill: "#94A3B8"
     })]
   });
+}
+export function PenIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.74898 3.14435L3.93357 9.29977C3.71398 9.53352 3.50148 9.99393 3.45898 10.3127L3.1969 12.6077C3.10482 13.4364 3.69982 14.0031 4.52148 13.8614L6.80232 13.4719C7.12107 13.4152 7.56732 13.1814 7.7869 12.9406L13.6023 6.78518C14.6081 5.72268 15.0615 4.51143 13.4961 3.03102C11.9377 1.56477 10.7548 2.08185 9.74898 3.14435Z",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.77734 4.17188C9.08193 6.12688 10.6686 7.62146 12.6378 7.81979",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function SaveTemplIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9 1.5V6.75L10.5 5.25",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9 6.75L7.5 5.25",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.48438 9.75H4.79187C5.07687 9.75 5.33188 9.9075 5.45938 10.1625L6.33687 11.9175C6.59187 12.4275 7.10938 12.75 7.67938 12.75H10.3269C10.8969 12.75 11.4144 12.4275 11.6694 11.9175L12.5469 10.1625C12.6744 9.9075 12.9369 9.75 13.2144 9.75H16.4844",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.25 3.09766C2.595 3.48766 1.5 5.04766 1.5 8.25016V11.2502C1.5 15.0002 3 16.5002 6.75 16.5002H11.25C15 16.5002 16.5 15.0002 16.5 11.2502V8.25016C16.5 5.04766 15.405 3.48766 12.75 3.09766",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function UploadIconCloud() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "commonSvgStyle uploadIcon",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6.00065 14.6673H4.66732C2.00065 14.6673 1.33398 14.0007 1.33398 11.334V4.66732C1.33398 2.00065 2.00065 1.33398 4.66732 1.33398H5.66732C6.66732 1.33398 6.88733 1.62733 7.26733 2.13399L8.26733 3.46733C8.52067 3.80066 8.66732 4.00065 9.33398 4.00065H11.334C14.0007 4.00065 14.6673 4.66732 14.6673 7.33398V8.66732",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.17305 12.2136C7.60638 12.3269 7.60638 14.5936 9.17305 14.7069H12.8797C13.3264 14.7069 13.7664 14.5402 14.093 14.2402C15.193 13.2802 14.6064 11.3602 13.1597 11.1802C12.6397 8.05358 8.11973 9.24024 9.18639 12.2202",
+      stroke: "#64748B",
+      strokeWidth: "1.2",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
 }

package/dist/Editor/common/iconslist.js

@@ -1273,6 +1273,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "22",
   viewBox: "0 0 22 22",
   fill: "none",
+  className: "commonSvgStyle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
     stroke: "#64748B",
@@ -1341,6 +1342,7 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
+  className: "addIconCircle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z",
     stroke: "#64748B",
@@ -1807,6 +1809,7 @@ export const Text = props => /*#__PURE__*/_jsxs("svg", {
   viewBox: "0 0 15 14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  className: "commonSvgStyle",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M2.5 4.1825V3.12083C2.5 2.45 3.0425 1.91333 3.7075 1.91333H12.1775C12.8483 1.91333 13.385 2.45583 13.385 3.12083V4.1825",
     stroke: props?.stroke || "#000",