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

package/dist/index.mjs

@@ -1,30 +1,11 @@
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React14 from "react";
-import { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { PanelBody, PanelFooter } from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, useDialog } from "@elementor/editor-ui";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, CopyIcon, TrashIcon } from "@elementor/icons";
-import {
-  Alert,
-  AlertAction,
-  AlertTitle,
-  Box as Box2,
-  Button as Button2,
-  CloseButton,
-  Divider,
-  Infotip,
-  Stack as Stack6,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
+import { Alert, AlertAction, AlertTitle, Box as Box2, Button as Button2, Divider, Infotip, Stack as Stack6, usePopupState as usePopupState2 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
@@ -221,19 +202,19 @@ var apiClient = {
       value
     });
   },
-  update: (id2, label, value, type) => {
+  update: (id, label, value, type) => {
     return httpService().put(BASE_PATH + "/update", {
-      id: id2,
+      id,
       label,
       value,
       type
     });
   },
-  delete: (id2) => {
-    return httpService().post(BASE_PATH + "/delete", { id: id2 });
+  delete: (id) => {
+    return 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;
     }
@@ -256,34 +237,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 },
@@ -295,15 +276,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);
   });
 };
 
@@ -339,15 +320,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();
   }
@@ -503,8 +484,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 || __2("Unexpected response from server", "elementor");
@@ -525,8 +506,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");
@@ -546,8 +527,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");
@@ -617,8 +598,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;
@@ -637,14 +618,14 @@ var resolveCssVariable = (id2, variable) => {
 };
 
 // src/transformers/inheritance-transformer.tsx
-var inheritanceTransformer = createTransformer((id2) => {
+var inheritanceTransformer = createTransformer((id) => {
   const variables = service.variables();
-  const variable = variables[id2];
+  const variable = variables[id];
   if (!variable) {
     return /* @__PURE__ */ React.createElement("span", null, __3("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
-  const css = resolveCssVariable(id2, variable);
+  const css = resolveCssVariable(id, variable);
   return /* @__PURE__ */ React.createElement(Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React.createElement(Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
@@ -660,8 +641,8 @@ var variableTransformer = createTransformer2((idOrLabel, { key }) => {
     const count = parseInt((targetVariable.value ?? "").trim(), 10);
     return 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
@@ -994,7 +975,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);
 };
@@ -1053,8 +1034,17 @@ var useVariablesManagerState = () => {
   }, []);
   const handleOnChange = useCallback3(
     (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]
   );
@@ -1413,7 +1403,7 @@ var LabelField = ({
   value,
   error,
   onChange,
-  id: id2,
+  id,
   onErrorChange,
   size = "tiny",
   focusOnShow = false,
@@ -1441,7 +1431,7 @@ var LabelField = ({
     TextField,
     {
       ref: fieldRef,
-      id: id2,
+      id,
       size,
       fullWidth: true,
       value: label,
@@ -1792,7 +1782,7 @@ var VariableRow = (props) => {
           value,
           onChange,
           onPropTypeKeyChange: (type) => {
-            if (!isDisabled) {
+            if (!isDisabled && type !== row.type) {
               handleOnChange({
                 ...variables,
                 [row.id]: { ...variables[row.id], type }
@@ -1862,22 +1852,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,
@@ -1890,12 +1880,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);
   };
@@ -1940,47 +1930,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 } = createPanel({
-  id,
-  component: VariablesManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    changeEditMode(id);
-  },
-  onClose: async () => {
-    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 = useMemo3(
-    () => embedded ? onRequestClose ?? (async () => {
-    }) : closeStandalonePanel,
-    [embedded, onRequestClose, closeStandalonePanel]
-  );
+function VariablesManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const [isStopSyncSuppressed] = useSuppressedMessage(STOP_SYNC_MESSAGE_KEY);
   const createMenuState = usePopupState2({
@@ -2014,15 +1971,15 @@ function VariablesManagerPanelRoot({
       openSaveChangesDialog();
       return;
     }
-    void closePanel();
-  }, [isDirty, openSaveChangesDialog, closePanel]);
+    void onRequestClose();
+  }, [isDirty, openSaveChangesDialog, onRequestClose]);
   useEffect4(() => {
-    if (!embedded || !onExposeCloseAttempt) {
+    if (!onExposeCloseAttempt) {
       return;
     }
     onExposeCloseAttempt(() => handleClosePanel());
     return () => onExposeCloseAttempt(null);
-  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   const handleCreateVariable = useCallback6(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
@@ -2140,144 +2097,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(
-    SearchField,
-    {
-      placeholder: __10("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(ColorFilterIcon, { fontSize: "large" })
-    }
-  ), !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
-    EmptyState,
-    {
-      title: __10("Create your first variable", "elementor"),
-      message: __10(
-        "Variables are saved attributes that you can apply anywhere on your site.",
-        "elementor"
-      ),
-      icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" }),
-      onAdd: createMenuState.open
-    }
-  ));
-  const saveFooter = /* @__PURE__ */ React14.createElement(PanelFooter, null, /* @__PURE__ */ React14.createElement(
-    Infotip,
-    {
-      placement: "right",
-      open: !!serverError,
-      content: serverError ? /* @__PURE__ */ React14.createElement(
-        Alert,
-        {
-          severity: serverError.severity ?? "error",
-          action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(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(AlertTriangleFilledIcon2, null)
-        },
-        /* @__PURE__ */ React14.createElement(AlertTitle, null, serverError.message),
-        serverError.action?.message
-      ) : null,
-      arrow: false,
-      slotProps: {
-        popper: {
-          modifiers: [
-            {
-              name: "offset",
-              options: { offset: [-10, 10] }
-            }
-          ]
-        }
-      }
-    },
-    /* @__PURE__ */ React14.createElement(
-      Button2,
-      {
-        fullWidth: true,
-        size: "small",
-        color: "global",
-        variant: "contained",
-        disabled: isSaveDisabled || !isDirty || isSaving,
-        onClick: handleSaveClick,
-        loading: isSaving
-      },
-      __10("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(SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __10("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.ContentText, null, __10("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
-    SaveChangesDialog.Actions,
-    {
-      actions: {
-        discard: {
-          label: __10("Discard", "elementor"),
-          action: () => {
-            closeSaveChangesDialog();
-            void closePanel();
-          }
-        },
-        confirm: {
-          label: __10("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(
     Stack6,
     {
       direction: "column",
@@ -2302,7 +2122,23 @@ function VariablesManagerPanelRoot({
           pb: 1
         }
       },
-      searchField,
+      /* @__PURE__ */ React14.createElement(
+        SearchField,
+        {
+          placeholder: __10("Search", "elementor"),
+          value: searchValue,
+          onSearch: handleSearch,
+          sx: {
+            flex: 1,
+            minWidth: 0,
+            px: 0,
+            py: 0,
+            display: "flex",
+            alignItems: "center",
+            alignSelf: "stretch"
+          }
+        }
+      ),
       /* @__PURE__ */ React14.createElement(Box2, { sx: { display: "flex", flexShrink: 0, alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
         VariableManagerCreateMenu,
         {
@@ -2324,46 +2160,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(ColorFilterIcon, { fontSize: "large" })
+        }
+      ),
+      !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
+        EmptyState,
+        {
+          title: __10("Create your first variable", "elementor"),
+          message: __10(
+            "Variables are saved attributes that you can apply anywhere on your site.",
+            "elementor"
+          ),
+          icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" }),
+          onAdd: createMenuState.open
+        }
+      )
     ),
-    saveFooter
-  ) : /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(
-    PanelHeader,
-    {
-      sx: {
-        height: "unset"
-      }
-    },
-    /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "inherit" }), __10("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
-      VariableManagerCreateMenu,
+    /* @__PURE__ */ React14.createElement(PanelFooter, null, /* @__PURE__ */ React14.createElement(
+      Infotip,
       {
-        onCreate: handleCreateVariable,
-        variables,
-        menuState: createMenuState
-      }
-    ), /* @__PURE__ */ React14.createElement(
-      CloseButton,
-      {
-        "aria-label": "Close",
-        slotProps: { icon: { fontSize: SIZE } },
-        onClick: () => {
-          handleClosePanel();
+        placement: "right",
+        open: !!serverError,
+        content: serverError ? /* @__PURE__ */ React14.createElement(
+          Alert,
+          {
+            severity: serverError.severity ?? "error",
+            action: serverError.action?.label ? /* @__PURE__ */ React14.createElement(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(AlertTriangleFilledIcon2, null)
+          },
+          /* @__PURE__ */ React14.createElement(AlertTitle, null, serverError.message),
+          serverError.action?.message
+        ) : null,
+        arrow: false,
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: { offset: [-10, 10] }
+              }
+            ]
+          }
         }
+      },
+      /* @__PURE__ */ React14.createElement(
+        Button2,
+        {
+          fullWidth: true,
+          size: "small",
+          color: "global",
+          variant: "contained",
+          disabled: isSaveDisabled || !isDirty || isSaving,
+          onClick: handleSaveClick,
+          loading: isSaving
+        },
+        __10("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(Stack6, { width: "100%", direction: "row", gap: 1 }, searchField), /* @__PURE__ */ React14.createElement(Divider, { sx: { width: "100%" } }))
-  ), /* @__PURE__ */ React14.createElement(
-    PanelBody,
+    }
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __10("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.ContentText, null, __10("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
+    SaveChangesDialog.Actions,
     {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
+      actions: {
+        discard: {
+          label: __10("Discard", "elementor"),
+          action: () => {
+            closeSaveChangesDialog();
+            void onRequestClose();
+          }
+        },
+        confirm: {
+          label: __10("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(ThemeProvider, null, core);
+    }
+  )));
 }
 var usePreventUnload = (isDirty) => {
   useEffect4(() => {
@@ -2401,9 +2316,7 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { registerControlReplacement } from "@elementor/editor-controls";
 import { getMCPByDomain } from "@elementor/editor-mcp";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { controlActionsMenu } from "@elementor/menus";
 
 // src/components/global-styles-import-listener.tsx
@@ -2422,79 +2335,12 @@ function GlobalStylesImportListener() {
   return null;
 }
 
-// src/components/open-panel-from-event.tsx
-import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
-import {
-  __privateListenTo as listenTo,
-  __privateOpenRoute as openRoute,
-  routeOpenEvent
-} from "@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 = useRef7(false);
-  const [readyToOpen, setReadyToOpen] = useState7(false);
-  useEffect6(() => {
-    if (readyToOpen) {
-      setReadyToOpen(false);
-      open();
-    }
-  }, [readyToOpen, open]);
-  useEffect6(() => {
-    return listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
-      if (pendingRef.current) {
-        pendingRef.current = false;
-        setReadyToOpen(true);
-      }
-    });
-  }, []);
-  useEffect6(() => {
-    const handler = () => {
-      pendingRef.current = true;
-      openRoute(DEFAULT_PANEL_ROUTE);
-    };
-    window.addEventListener(EVENT_NAME, handler);
-    return () => window.removeEventListener(EVENT_NAME, handler);
-  }, []);
-  return null;
-}
-
-// src/components/open-panel-from-url.tsx
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { __privateListenTo as listenTo2, routeOpenEvent as routeOpenEvent2 } from "@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 = useRef8(false);
-  useEffect7(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
-    if (activePanel !== PANEL_ID) {
-      return;
-    }
-    const cleanup = listenTo2(routeOpenEvent2(DEFAULT_PANEL_ROUTE2), () => {
-      if (hasOpened.current) {
-        return;
-      }
-      hasOpened.current = true;
-      requestAnimationFrame(() => {
-        open();
-      });
-    });
-    return cleanup;
-  }, [open]);
-  return null;
-}
-
 // src/controls/variable-control.tsx
 import * as React33 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId, useRef as useRef9 } from "react";
+import { useId, useRef as useRef7 } from "react";
 import * as React24 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
@@ -2518,16 +2364,16 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 import * as React22 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
 import * as React15 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState7 } from "react";
 import { Box as Box3 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState8(null);
+  const [anchorRef, setAnchorRef] = useState7(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box3, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
@@ -2536,7 +2382,7 @@ var usePopoverContentRef = () => {
 
 // src/components/variable-creation.tsx
 import * as React17 from "react";
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverHeader, SectionPopoverBody } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
@@ -2586,8 +2432,8 @@ var unwrapValue = (input) => {
 // src/components/ui/form-field.tsx
 import * as React16 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
-var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React16.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(FormHelperText, null, noticeMsg)));
+var FormField = ({ id, label, errorMsg, noticeMsg, children }) => {
+  return /* @__PURE__ */ React16.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(FormLabel, { htmlFor: id, size: "tiny" }, label)), /* @__PURE__ */ React16.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React16.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React16.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -2597,11 +2443,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState9(initialValue);
-  const [label, setLabel] = useState9("");
-  const [errorMessage, setErrorMessage] = useState9("");
-  const [valueFieldError, setValueFieldError] = useState9("");
-  const [propTypeKey, setPropTypeKey] = useState9(propTypeUtil.key);
+  const [value, setValue] = useState8(initialValue);
+  const [label, setLabel] = useState8("");
+  const [errorMessage, setErrorMessage] = useState8("");
+  const [valueFieldError, setValueFieldError] = useState8("");
+  const [propTypeKey, setPropTypeKey] = useState8(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2722,7 +2568,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect6, useState as useState10 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2732,7 +2578,7 @@ import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
 import * as React18 from "react";
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import {
   Button as Button4,
@@ -2752,7 +2598,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState10(false);
+  const [dontShowAgain, setDontShowAgain] = useState9(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2786,20 +2632,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage2(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState11(false);
-  const [editConfirmation, setEditConfirmation] = useState11(false);
-  const [errorMessage, setErrorMessage] = useState11("");
-  const [valueFieldError, setValueFieldError] = useState11("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState10(false);
+  const [editConfirmation, setEditConfirmation] = useState10(false);
+  const [errorMessage, setErrorMessage] = useState10("");
+  const [valueFieldError, setValueFieldError] = useState10("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = useState11(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = useState10(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState11(() => variable.value);
-  const [label, setLabel] = useState11(() => variable.label);
-  useEffect8(() => {
+  const [value, setValue] = useState10(() => variable.value);
+  const [label, setLabel] = useState10(() => variable.label);
+  useEffect6(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2964,7 +2810,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useEffect as useEffect9, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 import * as React21 from "react";
 import { trackUpgradePromotionClick as trackUpgradePromotionClick2, trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
@@ -3077,7 +2923,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] = useState12("");
+  const [searchValue, setSearchValue] = useState11("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -3154,7 +3000,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  useEffect9(() => {
+  useEffect7(() => {
     if (disabled) {
       trackViewPromotion2({
         target_name: "variables_popover",
@@ -3262,17 +3108,12 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState13(VIEW_LIST);
-  const [editId, setEditId] = useState13("");
-  const { open: openStandaloneVariablesPanel } = usePanelActions();
+  const [currentView, setCurrentView] = useState12(VIEW_LIST);
+  const [editId, setEditId] = useState12("");
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
-    if (isExperimentActive("e_editor_design_system_panel")) {
-      window.dispatchEvent(
-        new CustomEvent("elementor/toggle-design-system", { detail: { tab: "variables" } })
-      );
-    } else {
-      openStandaloneVariablesPanel();
-    }
+    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,
@@ -3380,7 +3221,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
-  const anchorRef = useRef9(null);
+  const anchorRef = useRef7(null);
   const popupId = useId();
   const popupState = usePopupState3({
     variant: "popover",
@@ -3421,14 +3262,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React28 from "react";
-import { useId as useId2, useRef as useRef10, useState as useState15 } from "react";
+import { useId as useId2, useRef as useRef8, useState as useState14 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box8, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
 import * as React25 from "react";
-import { useState as useState14 } from "react";
+import { useState as useState13 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader4, SectionPopoverBody as SectionPopoverBody4 } from "@elementor/editor-ui";
 import { Button as Button6, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
@@ -3442,11 +3283,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState14("");
-  const [valueFieldError, setValueFieldError] = useState14("");
-  const [label, setLabel] = useState14(variable.label);
-  const [value, setValue] = useState14(variable.value);
-  const [propTypeKey, setPropTypeKey] = useState14(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = useState13("");
+  const [valueFieldError, setValueFieldError] = useState13("");
+  const [label, setLabel] = useState13(variable.label);
+  const [value, setValue] = useState13(variable.value);
+  const [propTypeKey, setPropTypeKey] = useState13(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3603,10 +3444,10 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState15(false);
+  const [showInfotip, setShowInfotip] = useState14(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = useRef10(null);
+  const deletedChipAnchorRef = useRef8(null);
   const popupId = useId2();
   const popupState = usePopupState4({
     variant: "popover",
@@ -3621,8 +3462,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();
@@ -3694,7 +3535,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React30 from "react";
-import { useId as useId3, useRef as useRef11, useState as useState16 } from "react";
+import { useId as useId3, useRef as useRef9, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
@@ -3732,13 +3573,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = useBoundProp9();
-  const anchorRef = useRef11(null);
+  const anchorRef = useRef9(null);
   const popupId = useId3();
   const popupState = usePopupState5({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState16(false);
+  const [infotipVisible, setInfotipVisible] = useState15(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3811,7 +3652,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 import * as React32 from "react";
-import { useState as useState17 } from "react";
+import { useState as useState16 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip4 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
@@ -3841,7 +3682,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState17(false);
+  const [infotipVisible, setInfotipVisible] = useState16(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -4011,13 +3852,13 @@ Delete a variable:
 };
 
 // src/mcp/variables-resource.ts
-import { __privateListenTo as listenTo3, commandEndEvent } from "@elementor/editor-v1-adapters";
+import { __privateListenTo as listenTo, commandEndEvent } from "@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;
@@ -4046,7 +3887,7 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
       }
     );
     window.addEventListener(STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
-    listenTo3(commandEndEvent("document/save/update"), notifyGlobalVariablesUpdated);
+    listenTo(commandEndEvent("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
 
@@ -4141,28 +3982,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);
     }
   };
 }
@@ -4183,12 +4024,12 @@ import { __ as __26 } from "@wordpress/i18n";
 
 // src/components/fields/color-field.tsx
 import * as React35 from "react";
-import { useRef as useRef12, useState as useState18 } from "react";
+import { useRef as useRef10, useState as useState17 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState18(value);
-  const [errorMessage, setErrorMessage] = useState18("");
-  const defaultRef = useRef12(null);
+  const [color, setColor] = useState17(value);
+  const [errorMessage, setErrorMessage] = useState17("");
+  const defaultRef = useRef10(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -4227,20 +4068,20 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React36 from "react";
-import { useId as useId4, useMemo as useMemo4, useRef as useRef13, useState as useState19 } from "react";
+import { useId as useId4, useMemo as useMemo3, useRef as useRef11, useState as useState18 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector, useFontFamilies } from "@elementor/editor-controls";
 import { useSectionWidth } from "@elementor/editor-ui";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState19(value);
-  const defaultRef = useRef13(null);
+  const [fontFamily, setFontFamily] = useState18(value);
+  const defaultRef = useRef11(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth();
-  const mapFontSubs = useMemo4(() => {
+  const mapFontSubs = useMemo3(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -4256,11 +4097,11 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = useId4();
+  const id = useId4();
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     UnstableTag,
     {
-      id: id2,
+      id,
       variant: "outlined",
       label: fontFamily,
       endIcon: /* @__PURE__ */ React36.createElement(ChevronDownIcon, { fontSize: "tiny" }),
@@ -4376,7 +4217,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect10, useState as useState20 } from "react";
+import { useEffect as useEffect8, useState as useState19 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent as commandEndEvent2,
@@ -4399,8 +4240,8 @@ function usePortalContainer() {
   return useListenTo(commandEndEvent2("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState20({});
-  useEffect10(() => {
+  const [variables, setVariables] = useState19({});
+  useEffect8(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4714,17 +4555,6 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
-  if (!isExperimentActive2("e_editor_design_system_panel")) {
-    injectIntoLogic({
-      id: "variables-open-panel-from-url",
-      component: OpenPanelFromUrl
-    });
-    injectIntoLogic({
-      id: "variables-open-panel-from-event",
-      component: OpenPanelFromEvent
-    });
-    registerPanel(panel);
-  }
 }
 function hasVariableAssigned(value) {
   if (isTransformable2(value)) {