@elementor/editor-variables 4.1.0 → 4.2.0-840

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   GLOBAL_VARIABLES_URI: () => GLOBAL_VARIABLES_URI,
   Utils: () => Utils,
+  VariablesManagerPanelEmbedded: () => VariablesManagerPanelEmbedded,
   getMenuActionsForVariable: () => getMenuActionsForVariable,
   hasVariable: () => hasVariable,
   init: () => init,
@@ -42,19 +43,193 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/init.ts
-var import_editor = require("@elementor/editor");
-var import_editor_controls18 = require("@elementor/editor-controls");
-var import_editor_mcp = require("@elementor/editor-mcp");
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_props10 = require("@elementor/editor-props");
-var import_menus = require("@elementor/menus");
+// src/components/variables-manager/variables-manager-panel.tsx
+var React14 = __toESM(require("react"));
+var import_react13 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_icons5 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
-// src/components/global-styles-import-listener.tsx
-var import_react = require("react");
+// src/utils/tracking.ts
+var import_events = require("@elementor/events");
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
+var trackVariableSyncToV3 = ({ variableLabel, action }) => {
+  try {
+    const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+    if (!config?.names?.variables?.variableSyncToV3) {
+      return;
+    }
+    const name = config.names.variables.variableSyncToV3;
+    const isSync = action === "sync";
+    dispatchEvent?.(name, {
+      interaction_type: "click",
+      target_type: variableLabel,
+      target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+      interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
+      target_location: "widget_panel",
+      location_l1: "var_manager",
+      interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
+    });
+  } catch {
+  }
+};
 
-// src/service.ts
+// src/utils/validations.ts
+var import_icons = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: (0, import_i18n.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      (0, import_i18n.sprintf)((0, import_i18n.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: (0, import_i18n.__)("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n.__)("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n.__)("Try saving your variables again.", "elementor")
+  }
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  if (error?.response?.data?.code === "batch_duplicated_label") {
+    const errorData = error?.response?.data?.data ?? {};
+    const count = Object.keys(errorData).length;
+    const name = count === 1 ? "name" : "names";
+    const duplicatedIds = Object.keys(errorData);
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: import_icons.AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: import_icons.InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
+
+// src/variables-registry/create-variable-type-registry.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+
+// src/transformers/inheritance-transformer.tsx
+var React = __toESM(require("react"));
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/ui/color-indicator.tsx
+var import_ui = require("@elementor/ui");
+var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/prop-types/color-variable-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
+
+// src/service.ts
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -219,9 +394,9 @@ var Storage = class {
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
 // src/prop-types/font-variable-prop-type.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_schema = require("@elementor/schema");
-var fontVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-font-variable", import_schema.z.string());
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
 
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
@@ -333,7 +508,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -355,7 +530,7 @@ var service = {
     return apiClient.update(id2, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -458,225 +633,12 @@ var service = {
   }
 };
 var handleWatermark = (operation, newWatermark) => {
-  if (storage.watermarkDiff(operation, newWatermark)) {
-    setTimeout(() => service.load(), 500);
-  }
-  storage.watermark(newWatermark);
-};
-
-// src/components/global-styles-import-listener.tsx
-function GlobalStylesImportListener() {
-  (0, import_react.useEffect)(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedVars = event.detail?.global_variables;
-      if (!importedVars) {
-        return;
-      }
-      if (importedVars.data && typeof importedVars.data === "object") {
-        styleVariablesRepository.update(importedVars.data);
-      }
-      service.load();
-    };
-    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
-    return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
-    };
-  }, []);
-  return null;
-}
-
-// src/components/open-panel-from-event.tsx
-var import_react15 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-
-// src/components/variables-manager/variables-manager-panel.tsx
-var React14 = __toESM(require("react"));
-var import_react14 = require("react");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons5 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
-
-// src/utils/tracking.ts
-var import_events = require("@elementor/events");
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
-};
-var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
-  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  const eventData = {
-    location: config?.locations?.variablesManager || "",
-    trigger: config?.triggers?.click || "",
-    action_type: name
-  };
-  if (varType) {
-    eventData.var_type = varType;
-  }
-  if (controlPath) {
-    eventData.style_control_path = controlPath;
-  }
-  dispatchEvent?.(name, eventData);
-};
-var trackVariableSyncToV3 = ({ variableLabel, action }) => {
-  try {
-    const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-    if (!config?.names?.variables?.variableSyncToV3) {
-      return;
-    }
-    const name = config.names.variables.variableSyncToV3;
-    const isSync = action === "sync";
-    dispatchEvent?.(name, {
-      interaction_type: "click",
-      target_type: variableLabel,
-      target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
-      interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
-      target_location: "widget_panel",
-      location_l1: "var_manager",
-      interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
-    });
-  } catch {
-  }
-};
-
-// src/utils/validations.ts
-var import_icons = require("@elementor/icons");
-var import_i18n2 = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n2.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n2.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n2.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n2.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n2.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n2.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n2.__)("There was a glitch. Try saving your variable again.", "elementor"),
-  BATCH: {
-    DUPLICATED_LABELS: (count, name) => (
-      // eslint-disable-next-line @wordpress/i18n-translator-comments
-      (0, import_i18n2.sprintf)((0, import_i18n2.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
-    ),
-    UNEXPECTED_ERROR: (0, import_i18n2.__)("There was a glitch.", "elementor"),
-    DUPLICATED_LABEL_ACTION: (0, import_i18n2.__)("Take me there", "elementor"),
-    DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n2.__)("Please rename the variables.", "elementor"),
-    UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n2.__)("Try saving your variables again.", "elementor")
-  }
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
-    };
-  }
-  if (error?.response?.data?.code === "batch_duplicated_label") {
-    const errorData = error?.response?.data?.data ?? {};
-    const count = Object.keys(errorData).length;
-    const name = count === 1 ? "name" : "names";
-    const duplicatedIds = Object.keys(errorData);
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
-      severity: "error",
-      IconComponent: import_icons.AlertTriangleFilledIcon,
-      action: {
-        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
-        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
-        data: {
-          duplicatedIds
-        }
-      }
-    };
-  }
-  if (error?.response?.data?.code === "batch_operation_failed") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
-      severity: "secondary",
-      IconComponent: import_icons.InfoCircleFilledIcon,
-      action: {
-        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
-      }
-    };
-  }
-  return void 0;
-};
-var validateLabel = (name, variables) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
-    return ERROR_MESSAGES.DUPLICATED_LABEL;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  if (storage.watermarkDiff(operation, newWatermark)) {
+    setTimeout(() => service.load(), 500);
   }
-  return "";
+  storage.watermark(newWatermark);
 };
 
-// src/variables-registry/create-variable-type-registry.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
-
-// src/transformers/inheritance-transformer.tsx
-var React = __toESM(require("react"));
-var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
-
-// src/components/ui/color-indicator.tsx
-var import_ui = require("@elementor/ui");
-var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var colorVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-color-variable", import_schema2.z.string());
-
 // src/transformers/utils/resolve-css-variable.ts
 var resolveCssVariable = (id2, variable) => {
   let name = id2;
@@ -879,13 +841,13 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
 };
 
 // src/components/variables-manager/hooks/use-auto-edit.ts
-var import_react2 = require("react");
+var import_react = require("react");
 var useAutoEdit = () => {
-  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react2.useState)(void 0);
-  const startAutoEdit = (0, import_react2.useCallback)((variableId) => {
+  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react.useState)(void 0);
+  const startAutoEdit = (0, import_react.useCallback)((variableId) => {
     setAutoEditVariableId(variableId);
   }, []);
-  const handleAutoEditComplete = (0, import_react2.useCallback)(() => {
+  const handleAutoEditComplete = (0, import_react.useCallback)(() => {
     setTimeout(() => {
       setAutoEditVariableId(void 0);
     }, 100);
@@ -898,10 +860,10 @@ var useAutoEdit = () => {
 };
 
 // src/components/variables-manager/hooks/use-error-navigation.ts
-var import_react3 = require("react");
+var import_react2 = require("react");
 var useErrorNavigation = () => {
-  const currentIndexRef = (0, import_react3.useRef)(0);
-  const createNavigationCallback = (0, import_react3.useCallback)(
+  const currentIndexRef = (0, import_react2.useRef)(0);
+  const createNavigationCallback = (0, import_react2.useCallback)(
     (ids, onNavigate, onComplete) => {
       return () => {
         if (!ids?.length) {
@@ -923,7 +885,7 @@ var useErrorNavigation = () => {
     },
     []
   );
-  const resetNavigation = (0, import_react3.useCallback)(() => {
+  const resetNavigation = (0, import_react2.useCallback)(() => {
     currentIndexRef.current = 0;
   }, []);
   return {
@@ -933,21 +895,21 @@ var useErrorNavigation = () => {
 };
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/use-prop-variables.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
 var React5 = __toESM(require("react"));
-var import_react4 = require("react");
-var VariableTypeContext = (0, import_react4.createContext)(null);
+var import_react3 = require("react");
+var VariableTypeContext = (0, import_react3.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
   return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = (0, import_react4.useContext)(VariableTypeContext);
+  const context = (0, import_react3.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
@@ -1033,7 +995,7 @@ var useVariableSelectionFilter = (variables) => {
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react5.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
 var getMatchingTypes = (propKey) => {
   const matchingTypes = [];
@@ -1091,20 +1053,20 @@ var generateDuplicateLabel = (originalLabel, existingLabels) => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
-  const [variables, setVariables] = (0, import_react6.useState)(() => getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react6.useState)([]);
-  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react6.useState)(false);
-  const [isDirty, setIsDirty] = (0, import_react6.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react6.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react6.useState)("");
-  const handleOnChange = (0, import_react6.useCallback)(
+  const [variables, setVariables] = (0, import_react5.useState)(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react5.useState)([]);
+  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react5.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react5.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  const handleOnChange = (0, import_react5.useCallback)(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
       setIsDirty(true);
     },
     [variables]
   );
-  const createVariable2 = (0, import_react6.useCallback)((type, defaultName, defaultValue) => {
+  const createVariable2 = (0, import_react5.useCallback)((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
       id: newId,
@@ -1116,7 +1078,7 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const duplicateVariable = (0, import_react6.useCallback)((sourceId) => {
+  const duplicateVariable = (0, import_react5.useCallback)((sourceId) => {
     const newId = generateTempId();
     setVariables((prev) => {
       const source = prev[sourceId];
@@ -1136,19 +1098,19 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const handleDeleteVariable = (0, import_react6.useCallback)((itemId) => {
+  const handleDeleteVariable = (0, import_react5.useCallback)((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
   }, []);
-  const handleStartSync = (0, import_react6.useCallback)((itemId) => {
+  const handleStartSync = (0, import_react5.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: true }
     }));
     setIsDirty(true);
   }, []);
-  const handleStopSync = (0, import_react6.useCallback)((itemId) => {
+  const handleStopSync = (0, import_react5.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: false }
@@ -1158,7 +1120,7 @@ var useVariablesManagerState = () => {
   const handleSearch = (searchTerm) => {
     setSearchValue(searchTerm);
   };
-  const handleSave = (0, import_react6.useCallback)(async () => {
+  const handleSave = (0, import_react5.useCallback)(async () => {
     const originalVariables = getVariables(false);
     setIsSaving(true);
     const result = await service.batchSave(originalVariables, variables, deletedVariables);
@@ -1171,7 +1133,7 @@ var useVariablesManagerState = () => {
     }
     return { success: result.success };
   }, [variables, deletedVariables]);
-  const filteredVariables = (0, import_react6.useCallback)(() => {
+  const filteredVariables = (0, import_react5.useCallback)(() => {
     const list = variablesToList(variables).filter((v) => !v.deleted);
     const typeFiltered = applySelectionFilters(list, getVariableTypes());
     const searchFiltered = filterBySearch(typeFiltered, searchValue);
@@ -1199,7 +1161,7 @@ var useVariablesManagerState = () => {
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var React7 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
@@ -1222,17 +1184,17 @@ var useQuotaPermissions = (variableType) => {
 
 // src/components/ui/variable-promotion-chip.tsx
 var React6 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_utils = require("@elementor/utils");
 var import_i18n7 = require("@wordpress/i18n");
-var VariablePromotionChip = (0, import_react7.forwardRef)(
+var VariablePromotionChip = (0, import_react6.forwardRef)(
   ({ variableType, upgradeUrl, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
     (0, import_editor_ui2.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-    const toggle = (0, import_react7.useCallback)(() => {
+    const toggle = (0, import_react6.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           (0, import_editor_controls2.trackViewPromotion)(trackingData);
@@ -1240,7 +1202,7 @@ var VariablePromotionChip = (0, import_react7.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react7.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react6.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     const title = (0, import_i18n7.sprintf)(
       /* translators: %s: Variable Type. */
       (0, import_i18n7.__)("%s variables", "elementor"),
@@ -1287,10 +1249,15 @@ var TRACKING_DATA = {
   location_l1: "create variable menu"
 };
 var SIZE = "tiny";
-var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
-  const buttonRef = (0, import_react8.useRef)(null);
+var VariableManagerCreateMenu = ({
+  variables,
+  onCreate,
+  menuState,
+  outlinedTrigger = false
+}) => {
+  const buttonRef = (0, import_react7.useRef)(null);
   const variableTypes = getVariableTypes();
-  const menuOptionConfigs = (0, import_react8.useMemo)(
+  const menuOptionConfigs = (0, import_react7.useMemo)(
     () => Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => ({
       key,
       propTypeKey: variable.propTypeUtil.key,
@@ -1306,6 +1273,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
       ...(0, import_ui7.bindTrigger)(menuState),
       ref: buttonRef,
       size: SIZE,
+      variant: outlinedTrigger ? "outlined" : void 0,
       "aria-label": (0, import_i18n8.__)("Add variable", "elementor")
     },
     /* @__PURE__ */ React7.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
@@ -1349,7 +1317,7 @@ var MenuOption = ({
   onCreate,
   onClose
 }) => {
-  const promotionRef = (0, import_react8.useRef)(null);
+  const promotionRef = (0, import_react7.useRef)(null);
   const userQuotaPermissions = useQuotaPermissions(config.propTypeKey);
   const displayName = (0, import_utils2.capitalize)(config.variableType);
   const isDisabled = !userQuotaPermissions.canAdd();
@@ -1363,7 +1331,7 @@ var MenuOption = ({
     trackVariablesManagerEvent({ action: "add", varType: config.variableType });
     onClose();
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react8.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui7.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react7.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
     VariablePromotionChip,
     {
       variableType: config.variableType,
@@ -1391,7 +1359,7 @@ var getDefaultName = (variables, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 var React13 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_ui13 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
@@ -1421,21 +1389,21 @@ var VariableTableCell = ({
 
 // src/components/variables-manager/ui/variable-table-row.tsx
 var React12 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 
 // src/components/fields/label-field.tsx
 var React9 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react9.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react8.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -1454,9 +1422,9 @@ var LabelField = ({
   variables,
   onKeyDown
 }) => {
-  const [label, setLabel] = (0, import_react9.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
-  const fieldRef = (0, import_react9.useRef)(null);
+  const [label, setLabel] = (0, import_react8.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  const fieldRef = (0, import_react8.useRef)(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue, variables);
@@ -1508,7 +1476,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 var React10 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_ui10 = require("@elementor/ui");
 var VariableEditableCell = React10.memo(
   ({
@@ -1524,22 +1492,22 @@ var VariableEditableCell = React10.memo(
     fieldType,
     disabled = false
   }) => {
-    const [value, setValue] = (0, import_react10.useState)(initialValue);
-    const [isEditing, setIsEditing] = (0, import_react10.useState)(false);
+    const [value, setValue] = (0, import_react9.useState)(initialValue);
+    const [isEditing, setIsEditing] = (0, import_react9.useState)(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
-    const [valueFieldError, setValueFieldError] = (0, import_react10.useState)("");
-    const rowRef = (0, import_react10.useRef)(null);
-    const handleSave = (0, import_react10.useCallback)(() => {
+    const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
+    const rowRef = (0, import_react9.useRef)(null);
+    const handleSave = (0, import_react9.useCallback)(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1565,10 +1533,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = (0, import_react10.useCallback)((newValue) => {
+    const handleChange = (0, import_react9.useCallback)((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = (0, import_react10.useCallback)(
+    const handleValidationChange = (0, import_react9.useCallback)(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1632,7 +1600,7 @@ var VariableEditableCell = React10.memo(
 
 // src/components/variables-manager/ui/variable-edit-menu.tsx
 var React11 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
@@ -1689,7 +1657,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react11.createElement)(action.icon, {
+      action.icon && (0, import_react10.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1720,7 +1688,7 @@ var VariableRow = (props) => {
     setTriggerRef,
     isSorting
   } = props;
-  const promotionRef = (0, import_react12.useRef)(null);
+  const promotionRef = (0, import_react11.useRef)(null);
   const isDisabled = !useQuotaPermissions(row.type).canEdit();
   const showIndicationBefore = showDropIndication && dropPosition === "before";
   const showIndicationAfter = showDropIndication && dropPosition === "after";
@@ -1778,7 +1746,7 @@ var VariableRow = (props) => {
             });
           }
         },
-        prefixElement: (0, import_react12.createElement)(row.icon, {
+        prefixElement: (0, import_react11.createElement)(row.icon, {
           fontSize: "inherit",
           color: isDisabled ? "disabled" : "inherit"
         }),
@@ -1878,9 +1846,9 @@ var VariablesManagerTable = ({
   onAutoEditComplete,
   onFieldError
 }) => {
-  const tableContainerRef = (0, import_react13.useRef)(null);
-  const variableRowRefs = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react13.useEffect)(() => {
+  const tableContainerRef = (0, import_react12.useRef)(null);
+  const variableRowRefs = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react12.useEffect)(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -1986,8 +1954,33 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   },
   isOpenPreviousElement: true
 });
+function VariablesManagerPanelEmbedded({
+  onRequestClose,
+  onExposeCloseAttempt
+}) {
+  return /* @__PURE__ */ React14.createElement(
+    VariablesManagerPanelRoot,
+    {
+      embedded: true,
+      onRequestClose,
+      onExposeCloseAttempt
+    }
+  );
+}
 function VariablesManagerPanel() {
-  const { close: closePanel } = usePanelActions();
+  return /* @__PURE__ */ React14.createElement(VariablesManagerPanelRoot, null);
+}
+function VariablesManagerPanelRoot({
+  embedded = false,
+  onRequestClose,
+  onExposeCloseAttempt
+} = {}) {
+  const { close: closeStandalonePanel } = usePanelActions();
+  const closePanel = (0, import_react13.useMemo)(
+    () => embedded ? onRequestClose ?? (async () => {
+    }) : closeStandalonePanel,
+    [embedded, onRequestClose, closeStandalonePanel]
+  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui5.useDialog)();
   const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
   const createMenuState = (0, import_ui14.usePopupState)({
@@ -2012,18 +2005,25 @@ function VariablesManagerPanel() {
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
   const { createNavigationCallback, resetNavigation } = useErrorNavigation();
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react14.useState)(null);
-  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react14.useState)(null);
-  const [serverError, setServerError] = (0, import_react14.useState)(null);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react13.useState)(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react13.useState)(null);
+  const [serverError, setServerError] = (0, import_react13.useState)(null);
   usePreventUnload(isDirty);
-  const handleClosePanel = () => {
+  const handleClosePanel = (0, import_react13.useCallback)(() => {
     if (isDirty) {
       openSaveChangesDialog();
       return;
     }
-    closePanel();
-  };
-  const handleCreateVariable = (0, import_react14.useCallback)(
+    void closePanel();
+  }, [isDirty, openSaveChangesDialog, closePanel]);
+  (0, import_react13.useEffect)(() => {
+    if (!embedded || !onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  const handleCreateVariable = (0, import_react13.useCallback)(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -2057,14 +2057,14 @@ function VariablesManagerPanel() {
       setIsSaving(false);
     }
   };
-  const handleDeleteVariableWithConfirmation = (0, import_react14.useCallback)(
+  const handleDeleteVariableWithConfirmation = (0, import_react13.useCallback)(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
     },
     [handleDeleteVariable]
   );
-  const commitStopSync = (0, import_react14.useCallback)(
+  const commitStopSync = (0, import_react13.useCallback)(
     (itemId) => {
       stopSyncFromState(itemId);
       const variable = variables[itemId];
@@ -2074,7 +2074,7 @@ function VariablesManagerPanel() {
     },
     [stopSyncFromState, variables]
   );
-  const handleStartSync = (0, import_react14.useCallback)(
+  const handleStartSync = (0, import_react13.useCallback)(
     (itemId) => {
       startSyncFromState(itemId);
       const variable = variables[itemId];
@@ -2084,7 +2084,7 @@ function VariablesManagerPanel() {
     },
     [startSyncFromState, variables]
   );
-  const handleStopSync = (0, import_react14.useCallback)(
+  const handleStopSync = (0, import_react13.useCallback)(
     (itemId) => {
       if (!isStopSyncSuppressed) {
         setStopSyncConfirmation(itemId);
@@ -2094,7 +2094,7 @@ function VariablesManagerPanel() {
     },
     [isStopSyncSuppressed, commitStopSync]
   );
-  const buildMenuActions = (0, import_react14.useCallback)(
+  const buildMenuActions = (0, import_react13.useCallback)(
     (variableId) => {
       const variable = variables[variableId];
       if (!variable) {
@@ -2140,82 +2140,57 @@ function VariablesManagerPanel() {
     [variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit]
   );
   const hasVariables = Object.keys(variables).length > 0;
-  return /* @__PURE__ */ React14.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(
-    import_editor_panels.PanelHeader,
+  const variablesSearchFieldSx = embedded ? {
+    flex: 1,
+    minWidth: 0,
+    px: 0,
+    py: 0,
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "stretch"
+  } : {
+    display: "flex",
+    flex: 1
+  };
+  const searchField = /* @__PURE__ */ React14.createElement(
+    import_editor_ui5.SearchField,
     {
-      sx: {
-        height: "unset"
-      }
-    },
-    /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n10.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
-      VariableManagerCreateMenu,
-      {
-        onCreate: handleCreateVariable,
-        variables,
-        menuState: createMenuState
-      }
-    ), /* @__PURE__ */ React14.createElement(
-      import_ui14.CloseButton,
-      {
-        "aria-label": "Close",
-        slotProps: { icon: { fontSize: SIZE } },
-        onClick: () => {
-          handleClosePanel();
-        }
-      }
-    ))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(
-      import_editor_ui5.SearchField,
-      {
-        sx: {
-          display: "flex",
-          flex: 1
-        },
-        placeholder: (0, import_i18n10.__)("Search", "elementor"),
-        value: searchValue,
-        onSearch: handleSearch
-      }
-    )), /* @__PURE__ */ React14.createElement(import_ui14.Divider, { sx: { width: "100%" } }))
-  ), /* @__PURE__ */ React14.createElement(
-    import_editor_panels.PanelBody,
+      placeholder: (0, import_i18n10.__)("Search", "elementor"),
+      value: searchValue,
+      onSearch: handleSearch,
+      sx: variablesSearchFieldSx
+    }
+  );
+  const bodyInner = /* @__PURE__ */ React14.createElement(React14.Fragment, null, hasVariables && /* @__PURE__ */ React14.createElement(
+    VariablesManagerTable,
     {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    hasVariables && /* @__PURE__ */ React14.createElement(
-      VariablesManagerTable,
-      {
-        menuActions: buildMenuActions,
-        variables,
-        onChange: handleOnChange,
-        autoEditVariableId,
-        onAutoEditComplete: handleAutoEditComplete,
-        onFieldError: setIsSaveDisabled
-      }
-    ),
-    !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
-      NoSearchResults,
-      {
-        searchValue,
-        onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
-      }
-    ),
-    !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
-      EmptyState,
-      {
-        title: (0, import_i18n10.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n10.__)(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        ),
-        icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }),
-        onAdd: createMenuState.open
-      }
-    )
-  ), /* @__PURE__ */ React14.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React14.createElement(
+      menuActions: buildMenuActions,
+      variables,
+      onChange: handleOnChange,
+      autoEditVariableId,
+      onAutoEditComplete: handleAutoEditComplete,
+      onFieldError: setIsSaveDisabled
+    }
+  ), !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: () => handleSearch(""),
+      icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
+    EmptyState,
+    {
+      title: (0, import_i18n10.__)("Create your first variable", "elementor"),
+      message: (0, import_i18n10.__)(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }),
+      onAdd: createMenuState.open
+    }
+  ));
+  const saveFooter = /* @__PURE__ */ React14.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React14.createElement(
     import_ui14.Infotip,
     {
       placement: "right",
@@ -2259,7 +2234,8 @@ function VariablesManagerPanel() {
       },
       (0, import_i18n10.__)("Save changes", "elementor")
     )
-  ))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ));
+  const dialogs = /* @__PURE__ */ React14.createElement(React14.Fragment, null, deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2285,7 +2261,7 @@ function VariablesManagerPanel() {
           label: (0, import_i18n10.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
-            closePanel();
+            void closePanel();
           }
         },
         confirm: {
@@ -2294,16 +2270,104 @@ function VariablesManagerPanel() {
             const result = await handleSaveClick();
             closeSaveChangesDialog();
             if (result?.success) {
-              closePanel();
+              void closePanel();
             }
           }
         }
       }
     }
   )));
+  const panelChrome = embedded ? /* @__PURE__ */ React14.createElement(
+    import_ui14.Stack,
+    {
+      direction: "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      import_ui14.Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        spacing: 1,
+        width: "100%",
+        sx: {
+          flexShrink: 0,
+          px: 2,
+          pb: 1
+        }
+      },
+      searchField,
+      /* @__PURE__ */ React14.createElement(import_ui14.Box, { sx: { display: "flex", flexShrink: 0, alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
+        VariableManagerCreateMenu,
+        {
+          outlinedTrigger: true,
+          onCreate: handleCreateVariable,
+          variables,
+          menuState: createMenuState
+        }
+      ))
+    ),
+    /* @__PURE__ */ React14.createElement(import_ui14.Divider, { sx: { width: "100%" } }),
+    /* @__PURE__ */ React14.createElement(
+      import_editor_panels.PanelBody,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0,
+          overflow: "hidden"
+        }
+      },
+      bodyInner
+    ),
+    saveFooter
+  ) : /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(
+    import_editor_panels.PanelHeader,
+    {
+      sx: {
+        height: "unset"
+      }
+    },
+    /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n10.__)("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
+      VariableManagerCreateMenu,
+      {
+        onCreate: handleCreateVariable,
+        variables,
+        menuState: createMenuState
+      }
+    ), /* @__PURE__ */ React14.createElement(
+      import_ui14.CloseButton,
+      {
+        "aria-label": "Close",
+        slotProps: { icon: { fontSize: SIZE } },
+        onClick: () => {
+          handleClosePanel();
+        }
+      }
+    ))), /* @__PURE__ */ React14.createElement(import_ui14.Stack, { width: "100%", direction: "row", gap: 1 }, searchField), /* @__PURE__ */ React14.createElement(import_ui14.Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React14.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    bodyInner
+  ), saveFooter);
+  const core = /* @__PURE__ */ React14.createElement(React14.Fragment, null, panelChrome, dialogs);
+  return embedded ? core : /* @__PURE__ */ React14.createElement(import_editor_ui5.ThemeProvider, null, core);
 }
 var usePreventUnload = (isDirty) => {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2334,7 +2398,41 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   ));
 };
 
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_controls18 = require("@elementor/editor-controls");
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_menus = require("@elementor/menus");
+
+// src/components/global-styles-import-listener.tsx
+var import_react14 = require("react");
+var import_editor_canvas4 = require("@elementor/editor-canvas");
+function GlobalStylesImportListener() {
+  (0, import_react14.useEffect)(() => {
+    const handleGlobalStylesImported = (event) => {
+      const importedVars = event.detail?.global_variables;
+      if (!importedVars) {
+        return;
+      }
+      if (importedVars.data && typeof importedVars.data === "object") {
+        styleVariablesRepository.update(importedVars.data);
+      }
+      service.load();
+    };
+    window.addEventListener(import_editor_canvas4.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
+    return () => {
+      window.removeEventListener(import_editor_canvas4.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
+    };
+  }, []);
+  return null;
+}
+
 // src/components/open-panel-from-event.tsx
+var import_react15 = require("react");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var EVENT_NAME = "elementor/open-variables-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements/categories";
 function OpenPanelFromEvent() {
@@ -3155,9 +3253,15 @@ var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
   const [currentView, setCurrentView] = (0, import_react22.useState)(VIEW_LIST);
   const [editId, setEditId] = (0, import_react22.useState)("");
-  const { open } = usePanelActions();
+  const { open: openStandaloneVariablesPanel } = usePanelActions();
   const onSettingsAvailable = (0, import_editor_v1_adapters5.isExperimentActive)("e_variables_manager") ? () => {
-    open();
+    if ((0, import_editor_v1_adapters5.isExperimentActive)("e_editor_design_system_panel")) {
+      window.dispatchEvent(
+        new CustomEvent("elementor/toggle-design-system", { detail: { tab: "variables" } })
+      );
+    } else {
+      openStandaloneVariablesPanel();
+    }
   } : void 0;
   return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
@@ -3172,7 +3276,7 @@ var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable })
 };
 function RenderView(props) {
   const userPermissions = usePermissions();
-  const userQuotaPremissions = useQuotaPermissions(props.propTypeKey);
+  const userQuotaPermissions = useQuotaPermissions(props.propTypeKey);
   const handlers = {
     onClose: () => {
       props.closePopover();
@@ -3213,7 +3317,7 @@ function RenderView(props) {
         onAdd: handlers.onAdd,
         onEdit: handlers.onEdit,
         onSettings: handlers.onSettings,
-        disabled: !userQuotaPremissions.canAdd()
+        disabled: !userQuotaPermissions.canAdd()
       }
     );
   }
@@ -3818,33 +3922,42 @@ var trackOpenVariablePopover = (path, variableType) => {
 var import_schema3 = require("@elementor/schema");
 
 // src/mcp/variables-resource.ts
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
+var buildGlobalVariablesPayload = async () => {
+  const merged = {};
+  Object.entries(service.variables()).forEach(([id2, variable]) => {
+    if (!variable.deleted) {
+      merged[id2] = { ...variable, version: "v4" };
+    }
+  });
+  return merged;
+};
 var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
   [canvasMcpEntry, variablesMcpEntry].forEach((entry) => {
     const { resource, sendResourceUpdated } = entry;
+    const notifyGlobalVariablesUpdated = () => {
+      sendResourceUpdated({
+        uri: GLOBAL_VARIABLES_URI
+      });
+    };
     resource(
       "global-variables",
       GLOBAL_VARIABLES_URI,
       {
-        description: "List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)"
+        description: "Global variables available (v4)"
       },
       async () => {
-        const variables = {};
-        Object.entries(service.variables()).forEach(([id2, variable]) => {
-          if (!variable.deleted) {
-            variables[id2] = variable;
-          }
-        });
+        const variables = await buildGlobalVariablesPayload();
         return {
-          contents: [{ uri: GLOBAL_VARIABLES_URI, text: JSON.stringify(variables) }]
+          contents: [
+            { uri: GLOBAL_VARIABLES_URI, mimeType: "application/json", text: JSON.stringify(variables) }
+          ]
         };
       }
     );
-    window.addEventListener("variables:updated", () => {
-      sendResourceUpdated({
-        uri: GLOBAL_VARIABLES_URI
-      });
-    });
+    window.addEventListener("variables:updated", notifyGlobalVariablesUpdated);
+    (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
 
@@ -3903,12 +4016,20 @@ function getServiceActions(svc) {
       if (!type || !label || !value) {
         throw new Error("Create requires type, label, and value");
       }
+      const labelError = validateLabel(label);
+      if (labelError) {
+        throw new Error(labelError);
+      }
       return svc.create({ type, label, value });
     },
     update({ id: id2, label, value }) {
       if (!id2 || !label || !value) {
         throw new Error("Update requires id, label, and value");
       }
+      const labelError = validateLabel(label);
+      if (labelError) {
+        throw new Error(labelError);
+      }
       return svc.update(id2, { label, value });
     },
     delete({ id: id2 }) {
@@ -4063,8 +4184,8 @@ var import_schema4 = require("@elementor/schema");
 var sizeVariablePropTypeUtil = (0, import_editor_props4.createPropUtils)("global-size-variable", import_schema4.z.string());
 
 // src/transformers/empty-transformer.tsx
-var import_editor_canvas4 = require("@elementor/editor-canvas");
-var EmptyTransformer = (0, import_editor_canvas4.createTransformer)((_value) => {
+var import_editor_canvas5 = require("@elementor/editor-canvas");
+var EmptyTransformer = (0, import_editor_canvas5.createTransformer)((_value) => {
   return null;
 });
 
@@ -4139,7 +4260,7 @@ function registerVariableTypes() {
 // src/renderers/style-variables-renderer.tsx
 var React38 = __toESM(require("react"));
 var import_react30 = require("react");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = ":root";
 function StyleVariablesRenderer() {
@@ -4154,7 +4275,7 @@ function StyleVariablesRenderer() {
   return /* @__PURE__ */ React38.createElement(import_ui35.Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters6.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters7.__privateUseListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters7.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
   const [variables, setVariables] = (0, import_react30.useState)({});
@@ -4272,6 +4393,20 @@ var BoxShadowRepeaterLabel = ({ value }) => {
   const positionLabel = position?.value || "outset";
   return /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span", style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
 };
+var TransformRepeaterLabel = ({ value }) => {
+  const labels = [];
+  if (import_editor_props8.moveTransformPropTypeUtil.isValid(value)) {
+    labels.push((0, import_i18n27.__)("Move:", "elementor"));
+    const { x, y, z: z6 } = import_editor_props8.moveTransformPropTypeUtil.extract(value) || {};
+    for (const val of [x, y, z6]) {
+      const rendered = sizeValue(val);
+      if (rendered) {
+        labels.push(rendered);
+      }
+    }
+  }
+  return /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span" }, labels.join(" "));
+};
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
   const variableId = prop?.value?.size?.value || "";
@@ -4291,6 +4426,7 @@ function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
   boxShadowRepeaterInjections();
   transitionsRepeaterInjections();
+  transformRepeaterInjections();
   filterRepeaterInjections();
 }
 function backgroundOverlayRepeaterInjections() {
@@ -4327,6 +4463,19 @@ function boxShadowRepeaterInjections() {
     }
   });
 }
+function transformRepeaterInjections() {
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
+    id: "transform-size-variables-label",
+    component: TransformRepeaterLabel,
+    condition: ({ value }) => {
+      if (import_editor_props9.moveTransformPropTypeUtil.isValid(value)) {
+        const { x: xAxis, y: yAxis, z: zAxis } = import_editor_props9.moveTransformPropTypeUtil.extract(value) || {};
+        return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(zAxis);
+      }
+      return false;
+    }
+  });
+}
 function transitionsRepeaterInjections() {
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
     id: "transition-size-variables-label",
@@ -4424,15 +4573,17 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
-  (0, import_editor.injectIntoLogic)({
-    id: "variables-open-panel-from-url",
-    component: OpenPanelFromUrl
-  });
-  (0, import_editor.injectIntoLogic)({
-    id: "variables-open-panel-from-event",
-    component: OpenPanelFromEvent
-  });
-  (0, import_editor_panels2.__registerPanel)(panel);
+  if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
+    (0, import_editor.injectIntoLogic)({
+      id: "variables-open-panel-from-url",
+      component: OpenPanelFromUrl
+    });
+    (0, import_editor.injectIntoLogic)({
+      id: "variables-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
+    (0, import_editor_panels2.__registerPanel)(panel);
+  }
 }
 function hasVariableAssigned(value) {
   if ((0, import_editor_props10.isTransformable)(value)) {
@@ -4463,6 +4614,7 @@ var Utils = {
 0 && (module.exports = {
   GLOBAL_VARIABLES_URI,
   Utils,
+  VariablesManagerPanelEmbedded,
   getMenuActionsForVariable,
   hasVariable,
   init,