@ivanholiak/easy-email-extensions 4.16.22 → 4.16.24

package/lib/AttributePanel/components/attributes/FontFamily.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './FontFamily.scss';
 export declare function FontFamily({ name }: {
     name?: string;
 }): React.JSX.Element;

package/lib/index2.js

@@ -59,10 +59,8 @@ import { Field, useForm as useForm$1, useField, Form as Form$3, version as versi
 import { v4 } from "uuid";
 import mjml from "mjml-browser";
 var index$3 = "";
-const ee$b = "_ee_1f523_1";
-const title = "_title_1f523_1";
+const title = "_title_1dstd_1";
 var styles$b = {
-  ee: ee$b,
   title
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -35197,12 +35195,10 @@ function CacheTree(props) {
   }, [props]);
   return useMemo(() => /* @__PURE__ */ React__default.createElement(Tree$1, __spreadValues({}, cacheProps)), [cacheProps]);
 }
-const ee$a = "_ee_1x927_1";
 const wrap$1 = "_wrap_1x927_1";
 const listItem = "_listItem_1x927_13";
 const contextmenuMark = "_contextmenuMark_1x927_23";
 var styles$a = {
-  ee: ee$a,
   wrap: wrap$1,
   listItem,
   contextmenuMark
@@ -35267,7 +35263,6 @@ IconAt.defaultProps = {
 };
 IconAt.displayName = "IconAt";
 var IconAt$1 = IconAt;
-const ee$9 = "_ee_jzksr_1";
 const container = "_container_jzksr_1";
 const error = "_error_jzksr_6";
 const item = "_item_jzksr_10";
@@ -35277,7 +35272,6 @@ const upload = "_upload_jzksr_68";
 const wrap = "_wrap_jzksr_80";
 const urlInput = "_urlInput_jzksr_80";
 var styles$9 = {
-  ee: ee$9,
   container,
   error,
   item,
@@ -35905,17 +35899,15 @@ function CheckBoxGroup(props) {
 function classnames(...rest) {
   return rest.filter((item2) => typeof item2 === "string").join(" ");
 }
-const ee$8 = "_ee_rfjsd_1";
-const helperText = "_helperText_rfjsd_1";
-const labelHidden = "_label-hidden_rfjsd_9";
-const editTab = "_editTab_rfjsd_20";
-const inputWithUnit = "_inputWithUnit_rfjsd_27";
-const inputWithUnitSelectOption = "_inputWithUnitSelectOption_rfjsd_35";
-const colorPicker = "_colorPicker_rfjsd_40";
+const helperText = "_helperText_1v9zz_1";
+const labelHidden = "_label-hidden_1v9zz_9";
+const editTab = "_editTab_1v9zz_20";
+const inputWithUnit = "_inputWithUnit_1v9zz_27";
+const inputWithUnitSelectOption = "_inputWithUnitSelectOption_1v9zz_35";
+const colorPicker = "_colorPicker_1v9zz_40";
 var styles$8 = {
-  ee: ee$8,
   helperText,
-  "label-hidden": "_label-hidden_rfjsd_9",
+  "label-hidden": "_label-hidden_1v9zz_9",
   labelHidden,
   editTab,
   inputWithUnit,
@@ -38401,8 +38393,8 @@ function useFontFamily() {
     fontList: fontList2
   };
 }
-var styleText$2 = ".ee .easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.ee .easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.ee .easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
-function FontFamily$1(props) {
+var styleText$2 = ".easy-email-extensions-Tools-Popover .ee-popover-content{padding:0}.easy-email-extensions-Tools-Popover .ee-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .ee-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
+function FontFamily$2(props) {
   const { fontList: fontList2 } = useFontFamily();
   const { execCommand } = props;
   const [visible, setVisible] = React__default.useState(false);
@@ -38704,11 +38696,13 @@ function EyeIcon() {
     onClick: onToggleVisible
   });
 }
+var FontFamily$1 = "";
 function FontFamily({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { fontList: defaultFontList } = useEditorProps();
   const { pageData: pageData2 } = useEditorContext();
   const [searchValue, setSearchValue] = useState("");
+  const loadedRef = useRef(/* @__PURE__ */ new Set());
   const addFonts = pageData2.data.value.fonts;
   const allOptions = useMemo(() => {
     const options2 = [];
@@ -38737,21 +38731,38 @@ function FontFamily({ name: name2 }) {
     }
     return options2;
   }, [addFonts, defaultFontList]);
-  useEffect(() => {
+  const filteredOptions = useMemo(() => {
+    if (!searchValue)
+      return allOptions;
     const search = searchValue.toLowerCase();
-    const visible = search ? allOptions.filter((opt2) => opt2.value.toLowerCase().includes(search)) : allOptions;
-    const fontsToLoad = visible.slice(0, 15).map((opt2) => opt2.value).filter((f2) => GOOGLE_FONTS.includes(f2));
-    if (fontsToLoad.length > 0) {
-      loadGoogleFontsPreview(fontsToLoad);
-    }
+    return allOptions.filter((opt2) => opt2.value.toLowerCase().includes(search));
   }, [searchValue, allOptions]);
+  const loadFontsBatch = useCallback((fonts) => {
+    const toLoad = fonts.map((f2) => f2.value).filter((f2) => GOOGLE_FONTS.includes(f2) && !loadedRef.current.has(f2));
+    if (toLoad.length > 0) {
+      toLoad.forEach((f2) => loadedRef.current.add(f2));
+      loadGoogleFontsPreview(toLoad);
+    }
+  }, []);
+  useEffect(() => {
+    loadFontsBatch(filteredOptions.slice(0, 20));
+  }, [filteredOptions, loadFontsBatch]);
   const handleSearch = useCallback((val) => {
     setSearchValue(val);
   }, []);
+  const handlePopupScroll = useCallback((e2) => {
+    const target2 = e2.target;
+    const scrollRatio = (target2.scrollTop + target2.clientHeight) / target2.scrollHeight;
+    if (scrollRatio > 0.7) {
+      const approxIndex = Math.floor(target2.scrollTop / target2.scrollHeight * filteredOptions.length);
+      loadFontsBatch(filteredOptions.slice(approxIndex, approxIndex + 20));
+    }
+  }, [filteredOptions, loadFontsBatch]);
   const fieldName = name2 || `${focusIdx2}.attributes.font-family`;
   return /* @__PURE__ */ React__default.createElement(Field, {
     name: fieldName
   }, ({ input: { onChange, onBlur: onBlur3, value } }) => /* @__PURE__ */ React__default.createElement(Form.Item, {
+    className: "easy-email-font-family-field",
     label: t("Font family"),
     labelCol: { span: 24, style: { paddingRight: 0 } },
     wrapperCol: { span: 24 },
@@ -38769,12 +38780,20 @@ function FontFamily({ name: name2 }) {
       onBlur3();
       setSearchValue("");
     },
+    onVisibleChange: (visible) => {
+      if (visible) {
+        loadFontsBatch(filteredOptions.slice(0, 20));
+      }
+    },
     filterOption: (inputValue, option) => {
       var _a2;
       const optValue = (((_a2 = option.props) == null ? void 0 : _a2.value) || "").toLowerCase();
       return optValue.includes(inputValue.toLowerCase());
     },
-    virtualListProps: { height: 256 },
+    virtualListProps: {
+      height: 256,
+      onScroll: handlePopupScroll
+    },
     style: { width: "100%" },
     dropdownMenuClassName: "easy-email-overlay",
     allowClear: true
@@ -41698,7 +41717,7 @@ const getMaxTdCount = (tableData) => {
   });
   return tdCount;
 };
-var styleText$1 = ".ee .easy-email-table-operation-menu{background-color:#fff;box-shadow:0 2px 8px #00000026;font-size:14px;z-index:100;overflow:hidden;border-radius:4px;padding:4px 0}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-dividing{height:1px;background-color:#efefef}.ee .easy-email-table-operation-menu .easy-email-table-operation-color-picker{display:flex;align-items:center;flex-wrap:wrap;padding:0 16px 10px;background-color:#fff;overflow:hidden}.ee .easy-email-table-operation-menu .easy-email-table-operation-color-picker .easy-email-table-operation-color-picker-item{width:20px;height:20px;border:1px solid #595959;margin-right:5px;margin-bottom:5px;cursor:pointer}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-item{display:flex;align-items:center;padding:10px 16px;line-height:18px;background-color:#fff;cursor:pointer;color:#595959;overflow:hidden;text-overflow:ellipsis}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-item:hover{background-color:#efefef}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-item .easy-email-table-operation-menu-icon{margin-right:8px;height:20px;width:20px;font-size:0}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item{padding:10px 16px;background-color:#fff;color:#595959}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2){margin-top:4px;display:flex;align-items:center;flex-shrink:0}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-inner-wrapper{box-shadow:none}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-btn-size-default{padding:0 12px}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group{display:flex}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group .arco-input-inner-wrapper{flex:1}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group .arco-input-group-addafter{height:100%;width:auto}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color{height:28px;width:28px;flex-shrink:0;border:1px solid var(--color-neutral-3, rgb(229, 230, 235));border-right:none;padding:4px;cursor:pointer;position:relative}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color>div{height:100%;width:100%;border:1px solid var(--color-neutral-3, rgb(229, 230, 235));border-radius:2px}.ee .easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color input{cursor:pointer;position:absolute;width:100%;height:100%;z-index:1;left:0;top:0;opacity:0}\n";
+var styleText$1 = ".easy-email-table-operation-menu{background-color:#fff;box-shadow:0 2px 8px #00000026;font-size:14px;z-index:100;overflow:hidden;border-radius:4px;padding:4px 0}.easy-email-table-operation-menu .easy-email-table-operation-menu-dividing{height:1px;background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-color-picker{display:flex;align-items:center;flex-wrap:wrap;padding:0 16px 10px;background-color:#fff;overflow:hidden}.easy-email-table-operation-menu .easy-email-table-operation-color-picker .easy-email-table-operation-color-picker-item{width:20px;height:20px;border:1px solid #595959;margin-right:5px;margin-bottom:5px;cursor:pointer}.easy-email-table-operation-menu .easy-email-table-operation-menu-item{display:flex;align-items:center;padding:10px 16px;line-height:18px;background-color:#fff;cursor:pointer;color:#595959;overflow:hidden;text-overflow:ellipsis}.easy-email-table-operation-menu .easy-email-table-operation-menu-item:hover{background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-menu-item .easy-email-table-operation-menu-icon{margin-right:8px;height:20px;width:20px;font-size:0}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item{padding:10px 16px;background-color:#fff;color:#595959}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2){margin-top:4px;display:flex;align-items:center;flex-shrink:0}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .ee-input-inner-wrapper{box-shadow:none}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .ee-btn-size-default{padding:0 12px}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .ee-input-group{display:flex}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .ee-input-group .ee-input-inner-wrapper{flex:1}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .ee-input-group .ee-input-group-addafter{height:100%;width:auto}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color{height:28px;width:28px;flex-shrink:0;border:1px solid var(--color-neutral-3, rgb(229, 230, 235));border-right:none;padding:4px;cursor:pointer;position:relative}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color>div{height:100%;width:100%;border:1px solid var(--color-neutral-3, rgb(229, 230, 235));border-radius:2px}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color input{cursor:pointer;position:absolute;width:100%;height:100%;z-index:1;left:0;top:0;opacity:0}\n";
 var client = { exports: {} };
 var reactDomClient_production = {};
 var scheduler = { exports: {} };
@@ -55054,7 +55073,7 @@ function Tools(props) {
         ];
       case AvailableTools.FontFamily:
         return [
-          /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+          /* @__PURE__ */ React__default.createElement(FontFamily$2, {
             key: tool,
             execCommand,
             getPopupContainer: getPopoverMountNode
@@ -55220,7 +55239,7 @@ function Tools(props) {
     key: `divider-${index2}`
   })))), (_b2 = toolbar == null ? void 0 : toolbar.suffix) == null ? void 0 : _b2.call(toolbar, execCommand));
 }
-var styleText = ".ee .easy-email-extensions-emailToolItem{display:inline-flex;align-items:center;justify-content:center;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;border-radius:2px;border:none;background-color:transparent;color:#fff;width:28px;height:27px}.ee .easy-email-extensions-emailToolItem:hover,.ee .easy-email-extensions-emailToolItem-active{background-color:#f2f3f5;color:#4e5969}.ee .easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
+var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;align-items:center;justify-content:center;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;border-radius:2px;border:none;background-color:transparent;color:#fff;width:28px;height:27px}.easy-email-extensions-emailToolItem:hover,.easy-email-extensions-emailToolItem-active{background-color:#f2f3f5;color:#4e5969}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
 function RichTextToolBar(props) {
   const { initialized } = useEditorContext();
   const root2 = initialized && getPluginElement();
@@ -55932,12 +55951,10 @@ function BlockLayer(props) {
     contextMenuData
   }));
 }
-const ee$7 = "_ee_15fho_1";
 const BlocksPanel$1 = "_BlocksPanel_15fho_1";
 const blockItem$1 = "_blockItem_15fho_5";
 const closeBtn = "_closeBtn_15fho_12";
 var styles$7 = {
-  ee: ee$7,
   BlocksPanel: BlocksPanel$1,
   blockItem: blockItem$1,
   closeBtn
@@ -55993,11 +56010,9 @@ class BlockMarketManager {
 }
 BlockMarketManager.category = [];
 BlockMarketManager.subscriptHandles = [];
-const ee$6 = "_ee_1a0xw_1";
 const mask = "_mask_1a0xw_1";
 const drag = "_drag_1a0xw_12";
 var styles$6 = {
-  ee: ee$6,
   mask,
   drag
 };
@@ -58529,10 +58544,8 @@ function formatPadding(attributes, attributeName) {
     attributes[attributeName] = newPadding;
   }
 }
-const ee$5 = "_ee_xcz5w_1";
 const customTextArea = "_customTextArea_xcz5w_1";
 var styles$5 = {
-  ee: ee$5,
   customTextArea
 };
 function SourceCodePanel({ jsonReadOnly, mjmlReadOnly }) {
@@ -59070,12 +59083,10 @@ function InteractivePrompt() {
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HoverTooltip, null), /* @__PURE__ */ React__default.createElement(FocusTooltip, null));
 }
-const ee$4 = "_ee_pu31r_1";
-const SimpleLayout$1 = "_SimpleLayout_pu31r_1";
-const customScrollBar = "_customScrollBar_pu31r_20";
-const customScrollBarV2 = "_customScrollBarV2_pu31r_36";
+const SimpleLayout$1 = "_SimpleLayout_1wk83_1";
+const customScrollBar = "_customScrollBar_1wk83_20";
+const customScrollBarV2 = "_customScrollBarV2_1wk83_36";
 var styles$4 = {
-  ee: ee$4,
   SimpleLayout: SimpleLayout$1,
   customScrollBar,
   customScrollBarV2
@@ -59265,7 +59276,7 @@ var enUS = {
     gradientColor: "Gradient Colors"
   }
 };
-var stylesText = ".ee .easy-email-merge-tag{font-size:inherit;outline:1px solid rgb(78,89,105)!important;outline-offset:0px;padding:0 8px;border-radius:4px;cursor:default!important;transition:all .1s linear;border:none;font-weight:inherit;font-style:inherit;outline-color:#00a0ac!important;color:inherit;background-color:#ebf9fc}.ee .easy-email-merge-tag-popover{position:absolute;top:-10px;left:50%;transform:translate(-50%,-100%)}.ee .easy-email-merge-tag-popover{line-height:1.3;background-color:#fff;width:360px;border:1px solid rgb(229,230,235);border-radius:8px;position:absolute;top:calc(100% + 20px);left:50%;transform:translate(-50%);z-index:10;padding:20px;font-family:-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif}.ee .easy-email-merge-tag-popover h3{margin:0;font-size:12px;color:#202223;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc{font-size:14px;color:#6d7175}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label{font-weight:400;line-height:15px;border:1px solid rgb(109,113,117);border-radius:4px;text-transform:none;letter-spacing:normal;position:relative;display:flex;align-items:center;color:#202223;cursor:text;font-size:14px}.ee .easy-email-merge-tag-popover input{text-transform:none;letter-spacing:normal;position:relative;z-index:20;display:block;flex:1 1;width:100%;min-width:0;min-height:25px;margin:0;padding:5px 12px;background:none;border:1px solid transparent;font-family:inherit;font-size:inherit;font-weight:inherit;appearance:none;caret-color:#202223;color:#202223}.ee .easy-email-merge-tag-popover input:focus{outline:none}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-count{color:#6d7175;z-index:20;margin:0 12px 0 3.5px;pointer-events:none;text-align:right}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button{font-size:14px;text-align:right;margin-top:10px;font-weight:400;margin-bottom:5px}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button{color:var(--selected-color);padding:4px 8px;border-radius:4px;transition:all .1s linear;cursor:pointer;outline:none;background-color:transparent;border:1px solid transparent}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button:focus{color:var(--selected-color);background-color:#f2f3f5}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button:hover{color:var(--selected-color);background-color:#f2f3f5}.ee .easy-email-merge-tag-popover .easy-email-merge-tag-popover-container{position:relative;z-index:2}\n";
+var stylesText = ".easy-email-merge-tag{font-size:inherit;outline:1px solid rgb(78,89,105)!important;outline-offset:0px;padding:0 8px;border-radius:4px;cursor:default!important;transition:all .1s linear;border:none;font-weight:inherit;font-style:inherit;outline-color:#00a0ac!important;color:inherit;background-color:#ebf9fc}.easy-email-merge-tag-popover{position:absolute;top:-10px;left:50%;transform:translate(-50%,-100%)}.easy-email-merge-tag-popover{line-height:1.3;background-color:#fff;width:360px;border:1px solid rgb(229,230,235);border-radius:8px;position:absolute;top:calc(100% + 20px);left:50%;transform:translate(-50%);z-index:10;padding:20px;font-family:-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif}.easy-email-merge-tag-popover h3{margin:0;font-size:12px;color:#202223;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc{font-size:14px;color:#6d7175}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label{font-weight:400;line-height:15px;border:1px solid rgb(109,113,117);border-radius:4px;text-transform:none;letter-spacing:normal;position:relative;display:flex;align-items:center;color:#202223;cursor:text;font-size:14px}.easy-email-merge-tag-popover input{text-transform:none;letter-spacing:normal;position:relative;z-index:20;display:block;flex:1 1;width:100%;min-width:0;min-height:25px;margin:0;padding:5px 12px;background:none;border:1px solid transparent;font-family:inherit;font-size:inherit;font-weight:inherit;appearance:none;caret-color:#202223;color:#202223}.easy-email-merge-tag-popover input:focus{outline:none}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-count{color:#6d7175;z-index:20;margin:0 12px 0 3.5px;pointer-events:none;text-align:right}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button{font-size:14px;text-align:right;margin-top:10px;font-weight:400;margin-bottom:5px}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button{color:var(--selected-color);padding:4px 8px;border-radius:4px;transition:all .1s linear;cursor:pointer;outline:none;background-color:transparent;border:1px solid transparent}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button:focus{color:var(--selected-color);background-color:#f2f3f5}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-desc-label-button button:hover{color:var(--selected-color);background-color:#f2f3f5}.easy-email-merge-tag-popover .easy-email-merge-tag-popover-container{position:relative;z-index:2}\n";
 const removeAllActiveBadge = () => {
   getShadowRoot().querySelectorAll(".easy-email-merge-tag").forEach((item2) => {
     item2.classList.remove("easy-email-merge-tag-focus");
@@ -59398,7 +59409,8 @@ const SimpleLayout = (props) => {
   const { showSourceCode = true, defaultShowLayer = true, jsonReadOnly: jsonReadOnly2 = false, mjmlReadOnly: mjmlReadOnly2 = true } = props;
   const [collapsed, setCollapsed] = useState(!defaultShowLayer);
   return /* @__PURE__ */ React__default.createElement(ConfigProvider, {
-    locale: enUS
+    locale: enUS,
+    prefixCls: "ee"
   }, /* @__PURE__ */ React__default.createElement(Layout$1, {
     className: styles$4.SimpleLayout,
     style: {
@@ -59482,18 +59494,14 @@ const SimpleLayout = (props) => {
     mjmlReadOnly: mjmlReadOnly2
   }))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-const ee$3 = "_ee_xv0bc_1";
-const StandardLayout$1 = "_StandardLayout_xv0bc_1";
+const StandardLayout$1 = "_StandardLayout_17l3r_1";
 var styles$3 = {
-  ee: ee$3,
   StandardLayout: StandardLayout$1
 };
-const ee$2 = "_ee_1ajtj_1";
-const layoutItem = "_layoutItem_1ajtj_1";
-const blockItem = "_blockItem_1ajtj_6";
-const blockItemContainer = "_blockItemContainer_1ajtj_16";
+const layoutItem = "_layoutItem_vahqy_1";
+const blockItem = "_blockItem_vahqy_6";
+const blockItemContainer = "_blockItemContainer_vahqy_16";
 var styles$2 = {
-  ee: ee$2,
   layoutItem,
   blockItem,
   blockItemContainer
@@ -62296,16 +62304,12 @@ const FullHeightOverlayScrollbars = (props) => {
     style: { height: props.height }
   }, props.children));
 };
-const ee$1 = "_ee_d2sio_1";
-const largeTabsHeader$1 = "_largeTabsHeader_d2sio_1";
+const largeTabsHeader$1 = "_largeTabsHeader_1oxiy_1";
 var styles$1 = {
-  ee: ee$1,
   largeTabsHeader: largeTabsHeader$1
 };
-const ee = "_ee_d2sio_1";
-const largeTabsHeader = "_largeTabsHeader_d2sio_1";
+const largeTabsHeader = "_largeTabsHeader_1oxiy_1";
 var styles = {
-  ee,
   largeTabsHeader
 };
 function ConfigurationPanel({
@@ -62542,7 +62546,8 @@ const StandardLayout = (props) => {
   return /* @__PURE__ */ React__default.createElement(ExtensionProvider, __spreadProps(__spreadValues({}, props), {
     categories
   }), /* @__PURE__ */ React__default.createElement(ConfigProvider, {
-    locale: enUS
+    locale: enUS,
+    prefixCls: "ee"
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
     style: { padding: 0 },
     bodyStyle: {