@elementor/editor-variables 4.2.0-880 → 4.2.0-882

package/dist/index.js

@@ -49,7 +49,6 @@ 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");
@@ -245,19 +244,19 @@ var apiClient = {
       value
     });
   },
-  update: (id2, label, value, type) => {
+  update: (id, label, value, type) => {
     return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
-      id: id2,
+      id,
       label,
       value,
       type
     });
   },
-  delete: (id2) => {
-    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id: id2 });
+  delete: (id) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id });
   },
-  restore: (id2, label, value, type) => {
-    const payload = { id: id2 };
+  restore: (id, label, value, type) => {
+    const payload = { id };
     if (label) {
       payload.label = label;
     }
@@ -280,34 +279,34 @@ var generateTempId = () => {
   const random = Math.random().toString(36).substring(2, 8);
   return `tmp-${timestamp}-${random}`;
 };
-var isTempId = (id2) => {
-  return id2.startsWith("tmp-");
+var isTempId = (id) => {
+  return id.startsWith("tmp-");
 };
 var buildOperationsArray = (originalVariables, currentVariables, deletedVariables) => {
   const operations = [];
-  Object.entries(currentVariables).forEach(([id2, variable]) => {
-    if (isTempId(id2)) {
+  Object.entries(currentVariables).forEach(([id, variable]) => {
+    if (isTempId(id)) {
       operations.push({
         type: "create",
         variable: {
           ...variable,
-          id: id2
+          id
         }
       });
-    } else if (originalVariables[id2]) {
-      const original = originalVariables[id2];
+    } else if (originalVariables[id]) {
+      const original = originalVariables[id];
       const syncChanged = original.sync_to_v3 !== variable.sync_to_v3;
       if (original.deleted && !variable.deleted) {
         operations.push({
           type: "restore",
-          id: id2,
+          id,
           ...original.label !== variable.label && { label: variable.label },
           ...original.value !== variable.value && { value: variable.value }
         });
       } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value || original.order !== variable.order || original.type !== variable.type || syncChanged)) {
         operations.push({
           type: "update",
-          id: id2,
+          id,
           variable: {
             ...original.label !== variable.label && { label: variable.label },
             ...original.value !== variable.value && { value: variable.value },
@@ -319,15 +318,15 @@ var buildOperationsArray = (originalVariables, currentVariables, deletedVariable
       }
     }
   });
-  deletedVariables.forEach((id2) => {
+  deletedVariables.forEach((id) => {
     operations.push({
       type: "delete",
-      id: id2
+      id
     });
   });
   return operations.filter((op) => {
-    const id2 = op.id || op.variable?.id;
-    return id2 && !(isTempId(id2) && currentVariables[id2]?.deleted);
+    const id = op.id || op.variable?.id;
+    return id && !(isTempId(id) && currentVariables[id]?.deleted);
   });
 };
 
@@ -363,15 +362,15 @@ var Storage = class {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
     this.notifyChange();
   }
-  add(id2, variable) {
+  add(id, variable) {
     this.load();
-    this.state.variables[id2] = variable;
+    this.state.variables[id] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
     this.notifyChange();
   }
-  update(id2, variable) {
+  update(id, variable) {
     this.load();
-    this.state.variables[id2] = variable;
+    this.state.variables[id] = variable;
     localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
     this.notifyChange();
   }
@@ -527,8 +526,8 @@ var service = {
       };
     });
   },
-  update: (id2, { label, value, type }) => {
-    return apiClient.update(id2, label, value, type).then((response) => {
+  update: (id, { label, value, type }) => {
+    return apiClient.update(id, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
         const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
@@ -549,8 +548,8 @@ var service = {
       };
     });
   },
-  delete: (id2) => {
-    return apiClient.delete(id2).then((response) => {
+  delete: (id) => {
+    return apiClient.delete(id).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
         throw new Error("Unexpected response from server");
@@ -570,8 +569,8 @@ var service = {
       };
     });
   },
-  restore: (id2, label, value, type) => {
-    return apiClient.restore(id2, label, value, type).then((response) => {
+  restore: (id, label, value, type) => {
+    return apiClient.restore(id, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
         throw new Error("Unexpected response from server");
@@ -641,8 +640,8 @@ var handleWatermark = (operation, newWatermark) => {
 };
 
 // src/transformers/utils/resolve-css-variable.ts
-var resolveCssVariable = (id2, variable) => {
-  let name = id2;
+var resolveCssVariable = (id, variable) => {
+  let name = id;
   let fallbackValue = "";
   if (variable) {
     fallbackValue = variable.value;
@@ -661,14 +660,14 @@ var resolveCssVariable = (id2, variable) => {
 };
 
 // src/transformers/inheritance-transformer.tsx
-var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) => {
+var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id) => {
   const variables = service.variables();
-  const variable = variables[id2];
+  const variable = variables[id];
   if (!variable) {
     return /* @__PURE__ */ React.createElement("span", null, (0, import_i18n3.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
-  const css = resolveCssVariable(id2, variable);
+  const css = resolveCssVariable(id, variable);
   return /* @__PURE__ */ React.createElement(import_ui2.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(import_ui2.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
@@ -684,8 +683,8 @@ var variableTransformer = (0, import_editor_canvas2.createTransformer)((idOrLabe
     const count = parseInt((targetVariable.value ?? "").trim(), 10);
     return (0, import_editor_canvas2.formatGridTrackRepeat)(count);
   }
-  const id2 = service.findIdByLabel(targetVariable.label);
-  return resolveCssVariable(id2, targetVariable);
+  const id = service.findIdByLabel(targetVariable.label);
+  return resolveCssVariable(id, targetVariable);
 });
 
 // src/variables-registry/create-variable-type-registry.ts
@@ -1018,7 +1017,7 @@ var normalizeVariables = (propKey) => {
   const matchingTypes = getMatchingTypes(propKey);
   return variablesToList(variables).filter((variable) => matchingTypes.includes(variable.type)).map(toNormalizedVariable);
 };
-var extractId = ({ id: id2 }) => id2;
+var extractId = ({ id }) => id;
 var createVariable = (newVariable) => {
   return service.create(newVariable).then(extractId);
 };
@@ -1077,8 +1076,17 @@ var useVariablesManagerState = () => {
   }, []);
   const handleOnChange = (0, import_react5.useCallback)(
     (newVariables) => {
-      setVariables({ ...variables, ...newVariables });
-      setIsDirty(true);
+      const hasChanges = Object.entries(newVariables).some(([id, newVar]) => {
+        const existingVar = variables[id];
+        if (!existingVar) {
+          return true;
+        }
+        return existingVar.label !== newVar.label || existingVar.value !== newVar.value || existingVar.order !== newVar.order || existingVar.type !== newVar.type || (existingVar.sync_to_v3 ?? false) !== (newVar.sync_to_v3 ?? false);
+      });
+      if (hasChanges) {
+        setVariables({ ...variables, ...newVariables });
+        setIsDirty(true);
+      }
     },
     [variables]
   );
@@ -1429,7 +1437,7 @@ var LabelField = ({
   value,
   error,
   onChange,
-  id: id2,
+  id,
   onErrorChange,
   size = "tiny",
   focusOnShow = false,
@@ -1457,7 +1465,7 @@ var LabelField = ({
     import_ui9.TextField,
     {
       ref: fieldRef,
-      id: id2,
+      id,
       size,
       fullWidth: true,
       value: label,
@@ -1808,7 +1816,7 @@ var VariableRow = (props) => {
           value,
           onChange,
           onPropTypeKeyChange: (type) => {
-            if (!isDisabled) {
+            if (!isDisabled && type !== row.type) {
               handleOnChange({
                 ...variables,
                 [row.id]: { ...variables[row.id], type }
@@ -1878,22 +1886,22 @@ var VariablesManagerTable = ({
       }
     }
   }, [autoEditVariableId]);
-  const handleRowRef = (id2) => (ref) => {
+  const handleRowRef = (id) => (ref) => {
     if (ref) {
-      variableRowRefs.current.set(id2, ref);
+      variableRowRefs.current.set(id, ref);
     } else {
-      variableRowRefs.current.delete(id2);
+      variableRowRefs.current.delete(id);
     }
   };
   const ids = Object.keys(variables).sort(sortVariablesOrder(variables));
-  const rows = ids.map((id2) => {
-    const variable = variables[id2];
+  const rows = ids.map((id) => {
+    const variable = variables[id];
     const variableType = getVariableType(variable.type);
     if (!variableType) {
       return null;
     }
     return {
-      id: id2,
+      id,
       type: variable.type,
       name: variable.label,
       value: variable.value,
@@ -1906,12 +1914,12 @@ var VariablesManagerTable = ({
   };
   const handleReorder = (newIds) => {
     const updatedVariables = { ...variables };
-    newIds.forEach((id2, index) => {
-      const current = updatedVariables[id2];
+    newIds.forEach((id, index) => {
+      const current = updatedVariables[id];
       if (!current) {
         return;
       }
-      updatedVariables[id2] = Object.assign({}, current, { order: index + 1 });
+      updatedVariables[id] = Object.assign({}, current, { order: index + 1 });
     });
     handleOnChange(updatedVariables);
   };
@@ -1956,47 +1964,14 @@ function sortVariablesOrder(variables) {
 }
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var id = "variables-manager";
 var STOP_SYNC_MESSAGE_KEY = "stop-sync-variable";
-var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
-  id,
-  component: VariablesManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(id);
-  },
-  onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
-  },
-  isOpenPreviousElement: true
-});
 function VariablesManagerPanelEmbedded({
   onRequestClose,
   onExposeCloseAttempt
 }) {
-  return /* @__PURE__ */ React14.createElement(
-    VariablesManagerPanelRoot,
-    {
-      embedded: true,
-      onRequestClose,
-      onExposeCloseAttempt
-    }
-  );
+  return /* @__PURE__ */ React14.createElement(VariablesManagerPanelContent, { onRequestClose, onExposeCloseAttempt });
 }
-function VariablesManagerPanel() {
-  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]
-  );
+function VariablesManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
   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)({
@@ -2030,15 +2005,15 @@ function VariablesManagerPanelRoot({
       openSaveChangesDialog();
       return;
     }
-    void closePanel();
-  }, [isDirty, openSaveChangesDialog, closePanel]);
+    void onRequestClose();
+  }, [isDirty, openSaveChangesDialog, onRequestClose]);
   (0, import_react13.useEffect)(() => {
-    if (!embedded || !onExposeCloseAttempt) {
+    if (!onExposeCloseAttempt) {
       return;
     }
     onExposeCloseAttempt(() => handleClosePanel());
     return () => onExposeCloseAttempt(null);
-  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   const handleCreateVariable = (0, import_react13.useCallback)(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
@@ -2156,144 +2131,7 @@ function VariablesManagerPanelRoot({
     [variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit]
   );
   const hasVariables = Object.keys(variables).length > 0;
-  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,
-    {
-      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,
-    {
-      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",
-      open: !!serverError,
-      content: serverError ? /* @__PURE__ */ React14.createElement(
-        import_ui14.Alert,
-        {
-          severity: serverError.severity ?? "error",
-          action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(import_ui14.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
-          onClose: !serverError.action?.label ? () => {
-            setServerError(null);
-            setIsSaveDisabled(false);
-          } : void 0,
-          icon: serverError.IconComponent ? /* @__PURE__ */ React14.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React14.createElement(import_icons5.AlertTriangleFilledIcon, null)
-        },
-        /* @__PURE__ */ React14.createElement(import_ui14.AlertTitle, null, serverError.message),
-        serverError.action?.message
-      ) : null,
-      arrow: false,
-      slotProps: {
-        popper: {
-          modifiers: [
-            {
-              name: "offset",
-              options: { offset: [-10, 10] }
-            }
-          ]
-        }
-      }
-    },
-    /* @__PURE__ */ React14.createElement(
-      import_ui14.Button,
-      {
-        fullWidth: true,
-        size: "small",
-        color: "global",
-        variant: "contained",
-        disabled: isSaveDisabled || !isDirty || isSaving,
-        onClick: handleSaveClick,
-        loading: isSaving
-      },
-      (0, import_i18n10.__)("Save changes", "elementor")
-    )
-  ));
-  const dialogs = /* @__PURE__ */ React14.createElement(React14.Fragment, null, deleteConfirmation && /* @__PURE__ */ React14.createElement(
-    DeleteConfirmationDialog,
-    {
-      open: true,
-      label: deleteConfirmation.label,
-      onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
-      closeDialog: () => setDeleteConfirmation(null)
-    }
-  ), stopSyncConfirmation && /* @__PURE__ */ React14.createElement(
-    StopSyncConfirmationDialog,
-    {
-      open: true,
-      onClose: () => setStopSyncConfirmation(null),
-      onConfirm: () => {
-        commitStopSync(stopSyncConfirmation);
-        setStopSyncConfirmation(null);
-      }
-    }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n10.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.ContentText, null, (0, import_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
-    import_editor_ui5.SaveChangesDialog.Actions,
-    {
-      actions: {
-        discard: {
-          label: (0, import_i18n10.__)("Discard", "elementor"),
-          action: () => {
-            closeSaveChangesDialog();
-            void closePanel();
-          }
-        },
-        confirm: {
-          label: (0, import_i18n10.__)("Save", "elementor"),
-          action: async () => {
-            const result = await handleSaveClick();
-            closeSaveChangesDialog();
-            if (result?.success) {
-              void closePanel();
-            }
-          }
-        }
-      }
-    }
-  )));
-  const panelChrome = embedded ? /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
     import_ui14.Stack,
     {
       direction: "column",
@@ -2318,7 +2156,23 @@ function VariablesManagerPanelRoot({
           pb: 1
         }
       },
-      searchField,
+      /* @__PURE__ */ React14.createElement(
+        import_editor_ui5.SearchField,
+        {
+          placeholder: (0, import_i18n10.__)("Search", "elementor"),
+          value: searchValue,
+          onSearch: handleSearch,
+          sx: {
+            flex: 1,
+            minWidth: 0,
+            px: 0,
+            py: 0,
+            display: "flex",
+            alignItems: "center",
+            alignSelf: "stretch"
+          }
+        }
+      ),
       /* @__PURE__ */ React14.createElement(import_ui14.Box, { sx: { display: "flex", flexShrink: 0, alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
         VariableManagerCreateMenu,
         {
@@ -2340,46 +2194,125 @@ function VariablesManagerPanelRoot({
           minHeight: 0
         }
       },
-      bodyInner
+      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
+        }
+      )
     ),
-    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,
+    /* @__PURE__ */ React14.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React14.createElement(
+      import_ui14.Infotip,
       {
-        onCreate: handleCreateVariable,
-        variables,
-        menuState: createMenuState
-      }
-    ), /* @__PURE__ */ React14.createElement(
-      import_ui14.CloseButton,
-      {
-        "aria-label": "Close",
-        slotProps: { icon: { fontSize: SIZE } },
-        onClick: () => {
-          handleClosePanel();
+        placement: "right",
+        open: !!serverError,
+        content: serverError ? /* @__PURE__ */ React14.createElement(
+          import_ui14.Alert,
+          {
+            severity: serverError.severity ?? "error",
+            action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(import_ui14.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+            onClose: !serverError.action?.label ? () => {
+              setServerError(null);
+              setIsSaveDisabled(false);
+            } : void 0,
+            icon: serverError.IconComponent ? /* @__PURE__ */ React14.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React14.createElement(import_icons5.AlertTriangleFilledIcon, null)
+          },
+          /* @__PURE__ */ React14.createElement(import_ui14.AlertTitle, null, serverError.message),
+          serverError.action?.message
+        ) : null,
+        arrow: false,
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: { offset: [-10, 10] }
+              }
+            ]
+          }
         }
+      },
+      /* @__PURE__ */ React14.createElement(
+        import_ui14.Button,
+        {
+          fullWidth: true,
+          size: "small",
+          color: "global",
+          variant: "contained",
+          disabled: isSaveDisabled || !isDirty || isSaving,
+          onClick: handleSaveClick,
+          loading: isSaving
+        },
+        (0, import_i18n10.__)("Save changes", "elementor")
+      )
+    ))
+  ), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+    DeleteConfirmationDialog,
+    {
+      open: true,
+      label: deleteConfirmation.label,
+      onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
+      closeDialog: () => setDeleteConfirmation(null)
+    }
+  ), stopSyncConfirmation && /* @__PURE__ */ React14.createElement(
+    StopSyncConfirmationDialog,
+    {
+      open: true,
+      onClose: () => setStopSyncConfirmation(null),
+      onConfirm: () => {
+        commitStopSync(stopSyncConfirmation);
+        setStopSyncConfirmation(null);
       }
-    ))), /* @__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,
+    }
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n10.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.ContentText, null, (0, import_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
+    import_editor_ui5.SaveChangesDialog.Actions,
     {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
+      actions: {
+        discard: {
+          label: (0, import_i18n10.__)("Discard", "elementor"),
+          action: () => {
+            closeSaveChangesDialog();
+            void onRequestClose();
+          }
+        },
+        confirm: {
+          label: (0, import_i18n10.__)("Save", "elementor"),
+          action: async () => {
+            const result = await handleSaveClick();
+            closeSaveChangesDialog();
+            if (result?.success) {
+              void onRequestClose();
+            }
+          }
+        }
       }
-    },
-    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_react13.useEffect)(() => {
@@ -2417,9 +2350,7 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
 var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
 var import_editor_mcp2 = 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
@@ -2438,75 +2369,12 @@ function GlobalStylesImportListener() {
   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() {
-  const { open } = usePanelActions();
-  const pendingRef = (0, import_react15.useRef)(false);
-  const [readyToOpen, setReadyToOpen] = (0, import_react15.useState)(false);
-  (0, import_react15.useEffect)(() => {
-    if (readyToOpen) {
-      setReadyToOpen(false);
-      open();
-    }
-  }, [readyToOpen, open]);
-  (0, import_react15.useEffect)(() => {
-    return (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
-      if (pendingRef.current) {
-        pendingRef.current = false;
-        setReadyToOpen(true);
-      }
-    });
-  }, []);
-  (0, import_react15.useEffect)(() => {
-    const handler = () => {
-      pendingRef.current = true;
-      (0, import_editor_v1_adapters3.__privateOpenRoute)(DEFAULT_PANEL_ROUTE);
-    };
-    window.addEventListener(EVENT_NAME, handler);
-    return () => window.removeEventListener(EVENT_NAME, handler);
-  }, []);
-  return null;
-}
-
-// src/components/open-panel-from-url.tsx
-var import_react16 = require("react");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var ACTIVE_PANEL_PARAM = "active-panel";
-var PANEL_ID = "variables-manager";
-var DEFAULT_PANEL_ROUTE2 = "panel/elements";
-function OpenPanelFromUrl() {
-  const { open } = usePanelActions();
-  const hasOpened = (0, import_react16.useRef)(false);
-  (0, import_react16.useEffect)(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
-    if (activePanel !== PANEL_ID) {
-      return;
-    }
-    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE2), () => {
-      if (hasOpened.current) {
-        return;
-      }
-      hasOpened.current = true;
-      requestAnimationFrame(() => {
-        open();
-      });
-    });
-    return cleanup;
-  }, [open]);
-  return null;
-}
-
 // src/controls/variable-control.tsx
 var React33 = __toESM(require("react"));
 var import_editor_controls13 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react23 = require("react");
+var import_react21 = require("react");
 var React24 = __toESM(require("react"));
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
@@ -2530,25 +2398,25 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 var React22 = __toESM(require("react"));
-var import_react22 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_react20 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
 var React15 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react15 = require("react");
 var import_ui15 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react17.createContext)(null);
+var PopoverContentRefContext = (0, import_react15.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react17.useState)(null);
+  const [anchorRef, setAnchorRef] = (0, import_react15.useState)(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react17.useContext)(PopoverContentRefContext);
+  return (0, import_react15.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
 var React17 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
@@ -2598,8 +2466,8 @@ var unwrapValue = (input) => {
 // src/components/ui/form-field.tsx
 var React16 = __toESM(require("react"));
 var import_ui16 = require("@elementor/ui");
-var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React16.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui16.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, null, noticeMsg)));
+var FormField = ({ id, label, errorMsg, noticeMsg, children }) => {
+  return /* @__PURE__ */ React16.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui16.FormLabel, { htmlFor: id, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(import_ui16.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -2609,11 +2477,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react18.useState)(initialValue);
-  const [label, setLabel] = (0, import_react18.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
-  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(propTypeUtil.key);
+  const [value, setValue] = (0, import_react16.useState)(initialValue);
+  const [label, setLabel] = (0, import_react16.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react16.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react16.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2734,7 +2602,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 var React19 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react18 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_ui7 = require("@elementor/editor-ui");
@@ -2744,7 +2612,7 @@ var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React18 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2754,7 +2622,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react19.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react17.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2788,20 +2656,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls6.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react20.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react20.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react20.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react20.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react18.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react18.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = (0, import_react20.useState)(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react20.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react20.useState)(() => variable.label);
-  (0, import_react20.useEffect)(() => {
+  const [value, setValue] = (0, import_react18.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react18.useState)(() => variable.label);
+  (0, import_react18.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2966,7 +2834,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var import_react21 = require("react");
+var import_react19 = require("react");
 var React21 = __toESM(require("react"));
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
@@ -3074,7 +2942,7 @@ var getProUpgradeUrl = (variableType) => `https://go.elementor.com/renew-license
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react21.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react19.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -3151,7 +3019,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (disabled) {
       (0, import_editor_controls7.trackViewPromotion)({
         target_name: "variables_popover",
@@ -3259,17 +3127,12 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 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: openStandaloneVariablesPanel } = usePanelActions();
-  const onSettingsAvailable = (0, import_editor_v1_adapters5.isExperimentActive)("e_variables_manager") ? () => {
-    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();
-    }
+  const [currentView, setCurrentView] = (0, import_react20.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react20.useState)("");
+  const onSettingsAvailable = (0, import_editor_v1_adapters2.isExperimentActive)("e_variables_manager") ? () => {
+    window.dispatchEvent(
+      new CustomEvent("elementor/toggle-design-system", { detail: { tab: "variables" } })
+    );
   } : void 0;
   return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
@@ -3377,8 +3240,8 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls8.useBoundProp)();
-  const anchorRef = (0, import_react23.useRef)(null);
-  const popupId = (0, import_react23.useId)();
+  const anchorRef = (0, import_react21.useRef)(null);
+  const popupId = (0, import_react21.useId)();
   const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -3418,14 +3281,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React25 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react22 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
@@ -3439,11 +3302,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react24.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react24.useState)("");
-  const [label, setLabel] = (0, import_react24.useState)(variable.label);
-  const [value, setValue] = (0, import_react24.useState)(variable.value);
-  const [propTypeKey, setPropTypeKey] = (0, import_react24.useState)(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = (0, import_react22.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react22.useState)("");
+  const [label, setLabel] = (0, import_react22.useState)(variable.label);
+  const [value, setValue] = (0, import_react22.useState)(variable.value);
+  const [propTypeKey, setPropTypeKey] = (0, import_react22.useState)(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3600,11 +3463,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls10.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react25.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react23.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react25.useRef)(null);
-  const popupId = (0, import_react25.useId)();
+  const deletedChipAnchorRef = (0, import_react23.useRef)(null);
+  const popupId = (0, import_react23.useId)();
   const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
@@ -3618,8 +3481,8 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
       if (!variable.key) {
         return;
       }
-      restoreVariable(variable.key).then((id2) => {
-        resolveBoundPropAndSetValue(propTypeUtil.create(id2), boundProp);
+      restoreVariable(variable.key).then((id) => {
+        resolveBoundPropAndSetValue(propTypeUtil.create(id), boundProp);
         closeInfotip();
       }).catch(() => {
         closeInfotip();
@@ -3691,7 +3554,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React30 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react24 = require("react");
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
@@ -3729,13 +3592,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls11.useBoundProp)();
-  const anchorRef = (0, import_react26.useRef)(null);
-  const popupId = (0, import_react26.useId)();
+  const anchorRef = (0, import_react24.useRef)(null);
+  const popupId = (0, import_react24.useId)();
   const popupState = (0, import_ui30.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react26.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react24.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3808,7 +3671,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var React32 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react25 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
@@ -3838,7 +3701,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls12.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react27.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -4008,13 +3871,13 @@ Delete a variable:
 };
 
 // src/mcp/variables-resource.ts
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
 var buildGlobalVariablesPayload = async () => {
   const merged = {};
-  Object.entries(service.variables()).forEach(([id2, variable]) => {
+  Object.entries(service.variables()).forEach(([id, variable]) => {
     if (!variable.deleted) {
-      merged[id2] = { ...variable, version: "v4" };
+      merged[id] = { ...variable, version: "v4" };
     }
   });
   return merged;
@@ -4043,7 +3906,7 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
       }
     );
     window.addEventListener(STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
-    (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("document/save/update"), notifyGlobalVariablesUpdated);
+    (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
 
@@ -4138,28 +4001,28 @@ function getServiceActions(svc) {
       }
       return svc.create({ type, label, value });
     },
-    update({ id: id2, label, value }) {
-      if (!id2 || !label || !value) {
+    update({ id, label, value }) {
+      if (!id || !label || !value) {
         throw new Error("Update requires id, label, and value");
       }
       const labelError = validateLabel(label);
       if (labelError) {
         throw new Error(labelError);
       }
-      const existingVariable = svc.variables()[id2];
+      const existingVariable = svc.variables()[id];
       if (existingVariable) {
         const valueError = validateValueForType(existingVariable.type, value);
         if (valueError) {
           throw new Error(valueError);
         }
       }
-      return svc.update(id2, { label, value });
+      return svc.update(id, { label, value });
     },
-    delete({ id: id2 }) {
-      if (!id2) {
+    delete({ id }) {
+      if (!id) {
         throw new Error("delete requires id");
       }
-      return svc.delete(id2);
+      return svc.delete(id);
     }
   };
 }
@@ -4180,12 +4043,12 @@ var import_i18n26 = require("@wordpress/i18n");
 
 // src/components/fields/color-field.tsx
 var React35 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react26 = require("react");
 var import_ui33 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react28.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react28.useState)("");
-  const defaultRef = (0, import_react28.useRef)(null);
+  const [color, setColor] = (0, import_react26.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react26.useState)("");
+  const defaultRef = (0, import_react26.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -4224,20 +4087,20 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 var React36 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react27 = require("react");
 var import_editor_controls15 = require("@elementor/editor-controls");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons15 = require("@elementor/icons");
 var import_ui34 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react29.useState)(value);
-  const defaultRef = (0, import_react29.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react27.useState)(value);
+  const defaultRef = (0, import_react27.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_controls15.useFontFamilies)();
   const sectionWidth = (0, import_editor_ui12.useSectionWidth)();
-  const mapFontSubs = (0, import_react29.useMemo)(() => {
+  const mapFontSubs = (0, import_react27.useMemo)(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -4253,11 +4116,11 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react29.useId)();
+  const id = (0, import_react27.useId)();
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     import_ui34.UnstableTag,
     {
-      id: id2,
+      id,
       variant: "outlined",
       label: fontFamily,
       endIcon: /* @__PURE__ */ React36.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
@@ -4373,8 +4236,8 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 var React38 = __toESM(require("react"));
-var import_react30 = require("react");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_react28 = require("react");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = ":root";
 function StyleVariablesRenderer() {
@@ -4389,11 +4252,11 @@ 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_adapters7.__privateUseListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters7.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters4.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react30.useState)({});
-  (0, import_react30.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react28.useState)({});
+  (0, import_react28.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4694,17 +4557,6 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
-  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)) {