@elementor/editor-canvas 3.33.0-291 → 3.33.0-293

package/dist/index.js

@@ -480,10 +480,10 @@ var getMultiPropsValue = (multiProps) => {
 // src/renderers/create-props-resolver.ts
 var TRANSFORM_DEPTH_LIMIT = 3;
 function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema, signal }) {
-    schema = schema ?? initialSchema;
+  async function resolve({ props, schema: schema2, signal }) {
+    schema2 = schema2 ?? initialSchema;
     const promises = Promise.all(
-      Object.entries(schema).map(async ([key, type]) => {
+      Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal });
         onPropResolve?.({ key, value: transformed });
@@ -1148,11 +1148,11 @@ function getVal2(val) {
 var transformOriginTransformer = createTransformer((value) => {
   const x = getVal2(value.x);
   const y = getVal2(value.y);
-  const z3 = getVal2(value.z);
-  if (x === DEFAULT_XY && y === DEFAULT_XY && z3 === DEFAULT_Z) {
+  const z4 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z4 === DEFAULT_Z) {
     return null;
   }
-  return `${x} ${y} ${z3}`;
+  return `${x} ${y} ${z4}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -1501,8 +1501,24 @@ var import_editor_props2 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
 var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
+var BEST_PRACTICES_URI = "elementor://styles/best-practices";
 var initWidgetsSchemaResource = (reg) => {
   const { mcpServer } = reg;
+  mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
+    return {
+      contents: [
+        {
+          uri: BEST_PRACTICES_URI,
+          text: `# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
+When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
+        }
+      ]
+    };
+  });
   mcpServer.resource(
     "styles-schema",
     new import_editor_mcp.ResourceTemplate(STYLE_SCHEMA_URI, {
@@ -1579,9 +1595,9 @@ var initWidgetsSchemaResource = (reg) => {
           import_editor_props2.Schema.propTypeToJsonSchema(propType)
         ])
       );
-      delete asJson.classes;
-      delete asJson._cssid;
-      delete asJson.attributes;
+      import_editor_props2.Schema.nonConfigurablePropKeys.forEach((key) => {
+        delete asJson[key];
+      });
       return {
         contents: [
           {
@@ -1669,8 +1685,12 @@ var doUpdateElementProperty = (params) => {
     Object.keys(propertyMapValue).forEach((stylePropName) => {
       const propertyRawSchema = styleSchema[stylePropName];
       if (stylePropName === "custom_css") {
+        let customCssValue = propertyMapValue[stylePropName];
+        if (typeof customCssValue === "object") {
+          customCssValue = import_editor_props3.stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
+        }
         customCss = {
-          raw: btoa(propertyMapValue[stylePropName])
+          raw: btoa(customCssValue)
         };
         return;
       }
@@ -1692,7 +1712,7 @@ var doUpdateElementProperty = (params) => {
     if (!localStyle) {
       (0, import_editor_elements4.createElementStyle)({
         elementId,
-        custom_css: customCss,
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
         label: "local",
         meta: {
@@ -1711,6 +1731,7 @@ var doUpdateElementProperty = (params) => {
           breakpoint: "desktop",
           state: null
         },
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         props: {
           ...transformedStyleValues
         }
@@ -1775,6 +1796,7 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    For easy execution, USE ONLY "custom_css" category from the styles schema resource to apply styles.
 5. Ensure the XML structure is valid and parsable.
 6. Do not add any attribute nodes, classes, id's, and no text nodes allowed, for inline styles prefer USE the [${CUSTOM_CSS_URI}] resource for custom_css.
+   Layout properties, such as margin, padding, align, etc. must be applied using the [${STYLE_SCHEMA_URI}] PropValues.
 7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
 9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
@@ -1789,6 +1811,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 - Always aim for a clean and professional look that aligns with modern design principles.
 - When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
 - Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
+- Attempt to use layout, margin, padding, size properties from the styles schema and not the custom_css, unless necessary.
+- If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
 When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
@@ -1820,7 +1844,7 @@ A Heading and a button inside a flexbox
         "value": "section"
       },
   },
-  styleConfig: {
+  stylesConfig: {
     "heading1": {
       "custom_css": "font-size: 24px; color: #333;"
     }
@@ -1836,7 +1860,7 @@ A Heading and a button inside a flexbox
     `**MANDATORY** A record mapping configuration IDs to their corresponding configuration objects, defining the PropValues for each element created.`
   );
   buildCompositionsToolPrompt.parameter(
-    "styleConfig",
+    "stylesConfig",
     `**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
   );
   buildCompositionsToolPrompt.instruction(
@@ -1884,16 +1908,9 @@ var initBuildCompositionsTool = (reg) => {
       const { xmlStructure, elementConfig, stylesConfig } = params;
       const errors = [];
       const softErrors = [];
+      const rootContainers = [];
       const widgetsCache = (0, import_editor_elements5.getWidgetsCache)() || {};
       const documentContainer = (0, import_editor_elements5.getContainer)("document");
-      const rootContainer = (0, import_editor_elements5.createElement)({
-        containerId: documentContainer.id,
-        model: {
-          elType: "container",
-          id: (0, import_editor_elements5.generateElementId)()
-        },
-        options: { useHistory: false }
-      });
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -1902,7 +1919,7 @@ var initBuildCompositionsTool = (reg) => {
           throw new Error("Failed to parse XML structure: " + errorNode.textContent);
         }
         const children = Array.from(xml.children);
-        const iterate = (node, containerElement) => {
+        const iterate = (node, containerElement = documentContainer) => {
           const elementTag = node.tagName;
           if (!widgetsCache[elementTag]) {
             errors.push(new Error(`Unknown widget type: ${elementTag}`));
@@ -1924,6 +1941,9 @@ var initBuildCompositionsTool = (reg) => {
             },
             options: { useHistory: false }
           });
+          if (containerElement === documentContainer) {
+            rootContainers.push(newElement);
+          }
           node.setAttribute("id", newElement.id);
           const configId = node.getAttribute("configuration-id") || "";
           try {
@@ -1932,7 +1952,7 @@ var initBuildCompositionsTool = (reg) => {
             configObject._styles = styleObject;
             for (const [propertyName, propertyValue] of Object.entries(configObject)) {
               const widgetSchema = widgetsCache[elementTag];
-              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles") {
+              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles" && propertyName !== "custom_css") {
                 softErrors.push(
                   new Error(
                     `Property "${propertyName}" does not exist on element type "${elementTag}".`
@@ -1944,7 +1964,7 @@ var initBuildCompositionsTool = (reg) => {
                 doUpdateElementProperty({
                   elementId: newElement.id,
                   propertyName,
-                  propertyValue,
+                  propertyValue: propertyName === "custom_css" ? { _styles: propertyValue } : propertyValue,
                   elementType: elementTag
                 });
               } catch (error) {
@@ -1963,7 +1983,7 @@ var initBuildCompositionsTool = (reg) => {
           }
         };
         for (const childNode of children) {
-          iterate(childNode, rootContainer);
+          iterate(childNode, documentContainer);
           try {
           } catch (error) {
             errors.push(error);
@@ -1973,9 +1993,11 @@ var initBuildCompositionsTool = (reg) => {
         errors.push(error);
       }
       if (errors.length) {
-        (0, import_editor_elements5.deleteElement)({
-          elementId: rootContainer.id,
-          options: { useHistory: false }
+        rootContainers.forEach((rootContainer) => {
+          (0, import_editor_elements5.deleteElement)({
+            elementId: rootContainer.id,
+            options: { useHistory: false }
+          });
         });
       }
       if (errors.length > 0) {
@@ -2009,19 +2031,20 @@ Next Steps:
 // src/mcp/tools/configure-element/prompt.ts
 var configureElementToolPrompt = `Configure an existing element on the page.
 
-# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+# **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
    Required to understand which widgets are available, and what are their configuration schemas.
    Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
 2. [${STYLE_SCHEMA_URI}]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
    Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retreive the current PropValues configuration of the element.
 
 Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-Unless specifically noted, attempt to use the _style property "custom_css" for any styling, read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
+Attempt to use the _style property "custom_css" for any styling that have complicated schemas (such as backgrounds), read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
 
 # Parameters
 - propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
@@ -2066,6 +2089,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
 \`\`\`json
 {
   propertiesToChange: {
+    // List of properties TO CHANGE, following the PropType schema for the element as defined in the resource [${WIDGET_SCHEMA_URI}]
     title: {
       $$type: 'string',
       value: 'New Title Text'
@@ -2075,8 +2099,9 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
       value: false
     },
     _styles: {
+      // List of available keys available at the [${STYLE_SCHEMA_URI}] dynamic resource
       'line-height': {
-        $$type: 'size',
+        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
         value: {
           size: {
             $$type: 'number',
@@ -2170,6 +2195,70 @@ Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace
 Now that you have this information, ensure you have the schema and try again.`;
 }
 
+// src/mcp/tools/get-element-config/tool.ts
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_props4 = require("@elementor/editor-props");
+var import_schema5 = require("@elementor/schema");
+var import_utils4 = require("@elementor/utils");
+var schema = {
+  elementId: import_schema5.z.string()
+};
+var outputSchema3 = {
+  propValues: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe(
+    "A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues"
+  ),
+  customCss: import_schema5.z.string().optional().describe("The custom CSS string associated with the element, if any.")
+};
+var initGetElementConfigTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "get-element-configuration-values",
+    description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
+    schema,
+    outputSchema: outputSchema3,
+    handler: async ({ elementId }) => {
+      const element = (0, import_editor_elements6.getContainer)(elementId);
+      if (!element) {
+        throw new Error(`Element with ID ${elementId} not found.`);
+      }
+      const elementRawSettings = element.settings;
+      const propSchema = (0, import_editor_elements6.getWidgetsCache)()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
+      if (!elementRawSettings || !propSchema) {
+        throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
+      }
+      const propValues = {};
+      const stylePropValues = {};
+      import_editor_props4.Schema.configurableKeys(propSchema).forEach((key) => {
+        propValues[key] = structuredClone(elementRawSettings.get(key));
+      });
+      const elementStyles = (0, import_editor_elements6.getElementStyles)(elementId) || {};
+      const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
+      if (localStyle) {
+        const defaultVariant = localStyle.variants.find(
+          (variant) => variant.meta.breakpoint === "desktop" && !variant.meta.state
+        );
+        if (defaultVariant) {
+          const styleProps = defaultVariant.props || {};
+          Object.keys(styleProps).forEach((stylePropName) => {
+            if (typeof styleProps[stylePropName] !== "undefined") {
+              stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
+            }
+          });
+          if (defaultVariant.custom_css?.raw) {
+            stylePropValues.custom_css = (0, import_utils4.decodeString)(defaultVariant.custom_css.raw, void 0);
+          }
+        }
+      }
+      return {
+        propValues: {
+          ...propValues,
+          _styles: stylePropValues
+        }
+      };
+    }
+  });
+};
+
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
   const { setMCPDescription } = reg;
@@ -2178,6 +2267,7 @@ var initCanvasMcp = (reg) => {
   );
   initWidgetsSchemaResource(reg);
   initBuildCompositionsTool(reg);
+  initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
 };
 
@@ -2186,36 +2276,46 @@ var mcpDescription = `Canvas MCP - Working with widgets and styles: how to use t
 
 # Elementor's PropValue configuration system
 
-Every widget in Elementor has a set of properties that can be configured. These properties are defined using a strict schema, which specifies the type and structure of each property's value.
-All values are wrapped in a special structure called a "PropValue", which includes data and additional information about the type of the value.
+Every widget in Elementor has a set of properties that can be configured, defined in a STRICT SCHEMA we call "PropType".
+All widget configuration values are represented using a structure we call "PropValue".
 
-To correctly configure a widget's properties, you must follow the PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
+To correctly configure a widget's properties, FOLLOW THE PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
 Every widget has it's own PropType schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
 ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
 The style schema is grouped by categories, such as "typography", "background", "border", etc.
 
+# Tools and usage
+- Use the "get-element-configuration-values" tool to retrieve the current configuration of a specific element, including its PropValues and styles. It is recommended to use this tool when you are required to make changes to an existing element, to ensure you have the correct current configuration schema.
+  If a PropValue changes it's type (only on union PropTypes), read the new schema from the resources mentioned above, and adjust the PropValue structure accordingly.
+- Use the "build-composition" tool to create a NEW ELEMENTS in a composition on the page. You can use this tool to also create a new single element.
+- Use the "configure-element" tool to update the configuration of an EXISTING element on the page.
+
 All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
 Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
 All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
 
+# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
 When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 
-# Note about null values
-If a PropValue's value is null, omit the entire PropValue object.
+Example of null values:
+{
+  $$type: 'as-defined-for-propValue',
+  value: null
+}
 
 Example of "image" PropValue structure:
-
-PropValue structure:
 {$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
 
-Example of 
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
@@ -2286,13 +2386,13 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements6.isElementAnchored)(src.id) || !!(0, import_editor_elements6.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements7.isElementAnchored)(src.id) || !!(0, import_editor_elements7.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements6.isElementAnchored)(target.id) || !!(0, import_editor_elements6.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements7.isElementAnchored)(target.id) || !!(0, import_editor_elements7.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
@@ -2301,14 +2401,14 @@ function shouldBlock(sourceElements, targetElements) {
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_i18n2 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -2326,13 +2426,13 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props4.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props5.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements7.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements8.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -2345,7 +2445,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements7.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements8.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -2358,7 +2458,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements8.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements9.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -2367,7 +2467,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements8.updateElementStyle)({
+            (0, import_editor_elements9.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -2378,7 +2478,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements8.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements9.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -2396,7 +2496,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements8.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements9.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -2405,7 +2505,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements8.createElementStyle)({
+        (0, import_editor_elements9.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -2457,7 +2557,7 @@ function pasteStyles(args, pasteCallback) {
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -2466,9 +2566,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements9.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements10.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements9.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements10.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -2484,7 +2584,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements9.createElementStyle)({
+          (0, import_editor_elements10.createElementStyle)({
             elementId,
             classesProp,
             styleId,