@elementor/editor-variables 3.33.0-160 → 3.33.0-162

package/dist/index.js

@@ -43,14 +43,14 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-manager/variables-manager-panel.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_icons5 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_ui12 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
 var React = __toESM(require("react"));
@@ -67,24 +67,71 @@ var DeleteConfirmationDialog = ({
   return /* @__PURE__ */ React.createElement(import_ui.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(import_ui.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React.createElement(import_ui.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n.__)("Not now", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n.__)("Delete", "elementor"))));
 };
 
-// src/components/ui/no-search-results.tsx
+// src/components/ui/empty-state.tsx
 var React2 = __toESM(require("react"));
 var import_ui2 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
+
+// src/hooks/use-permissions.ts
+var import_editor_current_user = require("@elementor/editor-current-user");
+var usePermissions = () => {
+  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
+  return {
+    canAssign: () => canUser("edit_posts"),
+    canUnlink: () => canUser("edit_posts"),
+    canAdd: () => canUser("manage_options"),
+    canDelete: () => canUser("manage_options"),
+    canEdit: () => canUser("manage_options"),
+    canRestore: () => canUser("manage_options"),
+    canManageSettings: () => canUser("manage_options")
+  };
+};
+
+// src/components/ui/empty-state.tsx
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
   return /* @__PURE__ */ React2.createElement(
     import_ui2.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React2.createElement(import_ui2.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n2.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React2.createElement(
+      Content,
+      {
+        title: (0, import_i18n2.__)("There are no variables", "elementor"),
+        message: (0, import_i18n2.__)("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/no-search-results.tsx
+var React3 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React3.createElement(
+    import_ui3.Stack,
     {
       gap: 1,
       alignItems: "center",
       justifyContent: "center",
       p: 2.5,
       color: "text.secondary",
-      sx: { pb: 3.5, pt: 5 }
+      sx: { pb: 3.5, pt: 8 }
     },
     icon,
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n2.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React2.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n2.__)("Try something else.", "elementor"), /* @__PURE__ */ React2.createElement(import_ui2.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n2.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n3.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React3.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n3.__)("Try something else.", "elementor"), /* @__PURE__ */ React3.createElement(import_ui3.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n3.__)("Clear & try again", "elementor")))
   );
 };
 
@@ -109,7 +156,7 @@ var useAutoEdit = () => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var import_react4 = require("react");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/batch-operations.ts
 var generateTempId = () => {
@@ -176,7 +223,7 @@ var import_react3 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_react2 = require("react");
 
 // src/variables-registry/create-variable-type-registry.ts
@@ -184,14 +231,14 @@ var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 
 // src/transformers/inheritance-transformer.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
-var import_ui3 = require("@elementor/ui");
-var ColorIndicator = (0, import_ui3.styled)(import_ui3.UnstableColorIndicator)(({ theme }) => ({
+var import_ui4 = require("@elementor/ui");
+var ColorIndicator = (0, import_ui4.styled)(import_ui4.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`,
   marginRight: theme.spacing(0.25)
 }));
@@ -202,7 +249,7 @@ var import_schema = require("@elementor/schema");
 var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
 
 // src/service.ts
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -407,7 +454,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n3.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n4.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -429,7 +476,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n3.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n4.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -562,11 +609,11 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n4.__)("Missing variable", "elementor"));
+    return /* @__PURE__ */ React4.createElement("span", null, (0, import_i18n5.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React3.createElement(import_ui4.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React3.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React3.createElement(import_ui4.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React4.createElement(import_ui5.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -651,7 +698,7 @@ var { registerVariableType, getVariableType, getVariableTypes, hasVariableType }
 // src/context/variable-type-context.tsx
 var VariableTypeContext = (0, import_react2.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
-  return /* @__PURE__ */ React4.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
   const context = (0, import_react2.useContext)(VariableTypeContext);
@@ -733,15 +780,15 @@ var restoreVariable = (restoreId, label, value) => {
 };
 
 // src/utils/validations.ts
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n5.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n5.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n5.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n5.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n5.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n5.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n5.__)("There was a glitch. Try saving your variable again.", "elementor")
+  MISSING_VARIABLE_NAME: (0, import_i18n6.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n6.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n6.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n6.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n6.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n6.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n6.__)("There was a glitch. Try saving your variable again.", "elementor")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -833,7 +880,7 @@ var useVariablesManagerState = () => {
         setIsSaving(false);
         return { success: true };
       }
-      throw new Error((0, import_i18n6.__)("Failed to save variables. Please try again.", "elementor"));
+      throw new Error((0, import_i18n7.__)("Failed to save variables. Please try again.", "elementor"));
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.UNEXPECTED_ERROR;
       setIsSaving(false);
@@ -862,16 +909,19 @@ var useVariablesManagerState = () => {
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_icons2 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_ui6 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 var SIZE = "tiny";
-var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
-  const menuState = (0, import_ui5.usePopupState)({
-    variant: "popover"
-  });
+var VariableManagerCreateMenu = ({
+  variables,
+  onCreate,
+  disabled,
+  menuState
+}) => {
+  const buttonRef = (0, import_react5.useRef)(null);
   const variableTypes = getVariableTypes();
   const menuOptions = Object.entries(variableTypes).map(([key, variable]) => {
     const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
@@ -885,17 +935,18 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       }
     };
   });
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-    import_ui5.IconButton,
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    import_ui6.IconButton,
     {
-      ...(0, import_ui5.bindTrigger)(menuState),
+      ...(0, import_ui6.bindTrigger)(menuState),
+      ref: buttonRef,
       disabled,
       size: SIZE,
-      "aria-label": (0, import_i18n7.__)("Add variable", "elementor")
+      "aria-label": (0, import_i18n8.__)("Add variable", "elementor")
     },
-    /* @__PURE__ */ React5.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
-  ), /* @__PURE__ */ React5.createElement(
-    import_ui5.Menu,
+    /* @__PURE__ */ React6.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React6.createElement(
+    import_ui6.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -904,8 +955,8 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui5.bindMenu)(menuState),
-      anchorEl: menuState.anchorEl,
+      ...(0, import_ui6.bindMenu)(menuState),
+      anchorEl: buttonRef.current,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -914,11 +965,10 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
         vertical: "top",
         horizontal: "right"
       },
-      open: menuState.isOpen,
-      onClose: menuState.close
+      "data-testid": "variable-manager-create-menu"
     },
-    menuOptions.map((option) => /* @__PURE__ */ React5.createElement(
-      import_ui5.MenuItem,
+    menuOptions.map((option) => /* @__PURE__ */ React6.createElement(
+      import_ui6.MenuItem,
       {
         key: option.key,
         onClick: () => {
@@ -933,7 +983,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
         fontSize: SIZE,
         color: "action"
       }),
-      /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", color: "text.primary" }, option.name)
+      /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", color: "text.primary" }, option.name)
     ))
   ));
 };
@@ -949,18 +999,18 @@ var getDefaultName = (variables, type, baseName) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_ui11 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/fields/label-field.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -997,8 +1047,8 @@ var LabelField = ({
     errorMsg = error.message;
   }
   const hintMsg = !errorMsg ? labelHint(label) : "";
-  const textField = /* @__PURE__ */ React6.createElement(
-    import_ui6.TextField,
+  const textField = /* @__PURE__ */ React7.createElement(
+    import_ui7.TextField,
     {
       ref: fieldRef,
       id: id2,
@@ -1017,7 +1067,7 @@ var LabelField = ({
   );
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       import_editor_ui.WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
@@ -1033,17 +1083,17 @@ var LabelField = ({
   return textField;
 };
 
-// src/components/variables-manager/utils/variable-edit-menu.tsx
-var React7 = __toESM(require("react"));
+// src/components/variables-manager/ui/variable-edit-menu.tsx
+var React8 = __toESM(require("react"));
 var import_react7 = require("react");
 var import_icons3 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
+var import_ui8 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
-  const menuState = (0, import_ui7.usePopupState)({
+  const menuState = (0, import_ui8.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { ...(0, import_ui7.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React7.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React7.createElement(
-    import_ui7.Menu,
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { ...(0, import_ui8.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React8.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React8.createElement(
+    import_ui8.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -1052,7 +1102,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui7.bindMenu)(menuState),
+      ...(0, import_ui8.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -1065,8 +1115,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React7.createElement(
-      import_ui7.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React8.createElement(
+      import_ui8.MenuItem,
       {
         key: action.name,
         onClick: () => {
@@ -1087,9 +1137,9 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   ));
 };
 
-// src/components/variables-manager/utils/variable-table-cell.tsx
-var React8 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
+// src/components/variables-manager/ui/variable-table-cell.tsx
+var React9 = __toESM(require("react"));
+var import_ui9 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -1108,14 +1158,14 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React8.createElement(import_ui8.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React9.createElement(import_ui9.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_ui9 = require("@elementor/ui");
-var VariableEditableCell = React9.memo(
+var import_ui10 = require("@elementor/ui");
+var VariableEditableCell = React10.memo(
   ({
     initialValue,
     children,
@@ -1192,8 +1242,8 @@ var VariableEditableCell = React9.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React9.createElement(import_ui9.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React9.createElement(
-        import_ui9.Stack,
+      return /* @__PURE__ */ React10.createElement(import_ui10.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React10.createElement(
+        import_ui10.Stack,
         {
           ref: rowRef,
           direction: "row",
@@ -1209,8 +1259,8 @@ var VariableEditableCell = React9.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React9.createElement(
-      import_ui9.Stack,
+    return /* @__PURE__ */ React10.createElement(
+      import_ui10.Stack,
       {
         ref: rowRef,
         direction: "row",
@@ -1287,17 +1337,17 @@ var VariablesManagerTable = ({
     });
     handleOnChange(updatedVariables);
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React10.createElement(import_ui10.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React10.createElement(import_ui10.TableHead, null, /* @__PURE__ */ React10.createElement(import_ui10.TableRow, null, /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n8.__)("Name", "elementor")), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n8.__)("Value", "elementor")), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React10.createElement(import_ui10.TableBody, null, /* @__PURE__ */ React10.createElement(
-    import_ui10.UnstableSortableProvider,
+  return /* @__PURE__ */ React11.createElement(import_ui11.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React11.createElement(import_ui11.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React11.createElement(import_ui11.TableHead, null, /* @__PURE__ */ React11.createElement(import_ui11.TableRow, null, /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n9.__)("Name", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n9.__)("Value", "elementor")), /* @__PURE__ */ React11.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React11.createElement(import_ui11.TableBody, null, /* @__PURE__ */ React11.createElement(
+    import_ui11.UnstableSortableProvider,
     {
       value: ids,
       onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React10.createElement(import_ui10.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React10.createElement(import_ui10.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React11.createElement(import_ui11.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React11.createElement(import_ui11.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React10.createElement(
-      import_ui10.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React11.createElement(
+      import_ui11.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
@@ -1314,8 +1364,8 @@ var VariablesManagerTable = ({
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React10.createElement(
-            import_ui10.TableRow,
+          return /* @__PURE__ */ React11.createElement(
+            import_ui11.TableRow,
             {
               ...itemProps,
               selected: isDragged,
@@ -1344,8 +1394,8 @@ var VariablesManagerTable = ({
               },
               style: { ...itemStyle, ...triggerStyle }
             },
-            /* @__PURE__ */ React10.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React10.createElement(
-              import_ui10.IconButton,
+            /* @__PURE__ */ React11.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React11.createElement(
+              import_ui11.IconButton,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -1353,9 +1403,9 @@ var VariablesManagerTable = ({
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React10.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React11.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React10.createElement(VariableTableCell, null, /* @__PURE__ */ React10.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -1373,7 +1423,7 @@ var VariablesManagerTable = ({
                   onChange,
                   onValidationChange,
                   error
-                }) => /* @__PURE__ */ React10.createElement(
+                }) => /* @__PURE__ */ React11.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
@@ -1395,7 +1445,7 @@ var VariablesManagerTable = ({
                 onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0,
                 fieldType: "label"
               },
-              /* @__PURE__ */ React10.createElement(
+              /* @__PURE__ */ React11.createElement(
                 import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.name,
@@ -1404,7 +1454,7 @@ var VariablesManagerTable = ({
                 row.name
               )
             )),
-            /* @__PURE__ */ React10.createElement(VariableTableCell, null, /* @__PURE__ */ React10.createElement(
+            /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
@@ -1435,7 +1485,7 @@ var VariablesManagerTable = ({
                 fieldType: "value"
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React10.createElement(
+              /* @__PURE__ */ React11.createElement(
                 import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.value,
@@ -1448,7 +1498,7 @@ var VariablesManagerTable = ({
                 row.value
               )
             )),
-            /* @__PURE__ */ React10.createElement(
+            /* @__PURE__ */ React11.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -1457,7 +1507,7 @@ var VariablesManagerTable = ({
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React10.createElement(import_ui10.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React10.createElement(
+              /* @__PURE__ */ React11.createElement(import_ui11.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React11.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -1496,6 +1546,9 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui3.useDialog)();
+  const createMenuState = (0, import_ui12.usePopupState)({
+    variant: "popover"
+  });
   const {
     variables,
     isDirty,
@@ -1537,7 +1590,7 @@ function VariablesManagerPanel() {
   );
   const menuActions = [
     {
-      name: (0, import_i18n9.__)("Delete", "elementor"),
+      name: (0, import_i18n10.__)("Delete", "elementor"),
       icon: import_icons5.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
@@ -1547,15 +1600,16 @@ function VariablesManagerPanel() {
       }
     }
   ];
-  const hasVariables = Object.keys(variables).length !== 0;
-  return /* @__PURE__ */ React11.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React11.createElement(import_ui11.ErrorBoundary, { fallback: /* @__PURE__ */ React11.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React11.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React11.createElement(import_ui11.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui11.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui11.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n9.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React11.createElement(import_ui11.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React11.createElement(
+  const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
+  return /* @__PURE__ */ React12.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React12.createElement(import_ui12.ErrorBoundary, { fallback: /* @__PURE__ */ React12.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React12.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n10.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
     VariableManagerCreateMenu,
     {
       onCreate: handleCreateVariable,
-      variables
+      variables,
+      menuState: createMenuState
     }
-  ), /* @__PURE__ */ React11.createElement(
-    import_ui11.CloseButton,
+  ), /* @__PURE__ */ React12.createElement(
+    import_ui12.CloseButton,
     {
       "aria-label": "Close",
       slotProps: { icon: { fontSize: SIZE } },
@@ -1563,7 +1617,7 @@ function VariablesManagerPanel() {
         handleClosePanel();
       }
     }
-  ))))), /* @__PURE__ */ React11.createElement(
+  ))))), /* @__PURE__ */ React12.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1572,16 +1626,16 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       import_editor_ui3.SearchField,
       {
-        placeholder: (0, import_i18n9.__)("Search", "elementor"),
+        placeholder: (0, import_i18n10.__)("Search", "elementor"),
         value: searchValue,
         onSearch: handleSearch
       }
     ),
-    /* @__PURE__ */ React11.createElement(import_ui11.Divider, { sx: { width: "100%" } }),
-    hasVariables && /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(import_ui12.Divider, { sx: { width: "100%" } }),
+    hasVariables && /* @__PURE__ */ React12.createElement(
       VariablesManagerTable,
       {
         menuActions,
@@ -1592,16 +1646,28 @@ function VariablesManagerPanel() {
         onFieldError: setHasValidationErrors
       }
     ),
-    !hasVariables && /* @__PURE__ */ React11.createElement(
+    !hasVariables && searchValue && /* @__PURE__ */ React12.createElement(
       NoSearchResults,
       {
         searchValue,
         onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React11.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
+        icon: /* @__PURE__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
+      }
+    ),
+    !hasVariables && !searchValue && /* @__PURE__ */ React12.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__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }),
+        onAdd: createMenuState.open
       }
     )
-  ), /* @__PURE__ */ React11.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React11.createElement(
-    import_ui11.Button,
+  ), /* @__PURE__ */ React12.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React12.createElement(
+    import_ui12.Button,
     {
       fullWidth: true,
       size: "small",
@@ -1611,8 +1677,8 @@ function VariablesManagerPanel() {
       onClick: handleSave,
       loading: isSaving
     },
-    (0, import_i18n9.__)("Save changes", "elementor")
-  ))), deleteConfirmation && /* @__PURE__ */ React11.createElement(
+    (0, import_i18n10.__)("Save changes", "elementor")
+  ))), deleteConfirmation && /* @__PURE__ */ React12.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1620,19 +1686,19 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  )), isSaveChangesDialogOpen && /* @__PURE__ */ React11.createElement(import_editor_ui3.SaveChangesDialog, null, /* @__PURE__ */ React11.createElement(import_editor_ui3.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React11.createElement(import_editor_ui3.SaveChangesDialog.Content, null, /* @__PURE__ */ React11.createElement(import_editor_ui3.SaveChangesDialog.ContentText, null, (0, import_i18n9.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React11.createElement(
+  )), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n10.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.ContentText, null, (0, import_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
     import_editor_ui3.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n9.__)("Discard", "elementor"),
+          label: (0, import_i18n10.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n9.__)("Save", "elementor"),
+          label: (0, import_i18n10.__)("Save", "elementor"),
           action: async () => {
             await handleSave();
             closeSaveChangesDialog();
@@ -1643,7 +1709,7 @@ function VariablesManagerPanel() {
     }
   )));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React11.createElement(import_ui11.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React11.createElement(import_ui11.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React11.createElement("strong", null, (0, import_i18n9.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React12.createElement(import_ui12.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React12.createElement(import_ui12.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React12.createElement("strong", null, (0, import_i18n10.__)("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
   (0, import_react10.useEffect)(() => {
     const handleBeforeUnload = (event) => {
@@ -1691,42 +1757,27 @@ var import_react16 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react11 = require("react");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 var PopoverContentRefContext = (0, import_react11.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = (0, import_react11.useState)(null);
-  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(import_ui13.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return (0, import_react11.useContext)(PopoverContentRefContext);
 };
 
-// src/hooks/use-permissions.ts
-var import_editor_current_user = require("@elementor/editor-current-user");
-var usePermissions = () => {
-  const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  return {
-    canAssign: () => canUser("edit_posts"),
-    canUnlink: () => canUser("edit_posts"),
-    canAdd: () => canUser("manage_options"),
-    canDelete: () => canUser("manage_options"),
-    canEdit: () => canUser("manage_options"),
-    canRestore: () => canUser("manage_options"),
-    canManageSettings: () => canUser("manage_options")
-  };
-};
-
 // src/components/variable-creation.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react12 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_ui15 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -1787,10 +1838,10 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/components/ui/form-field.tsx
-var React13 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
+var React14 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React13.createElement(import_ui13.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React13.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React13.createElement(import_ui13.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React13.createElement(import_ui13.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React13.createElement(import_ui13.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React13.createElement(import_ui13.FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React14.createElement(import_ui14.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React14.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React14.createElement(import_ui14.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React14.createElement(import_ui14.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -1854,22 +1905,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React14.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(import_ui14.IconButton, { size: SIZE2, "aria-label": (0, import_i18n10.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React14.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: (0, import_i18n10.__)("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n11.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: (0, import_i18n11.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(import_ui15.Divider, null), /* @__PURE__ */ React15.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n10.__)("Name", "elementor"),
+      label: (0, import_i18n11.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1887,7 +1938,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n11.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
     ValueField,
     {
       value,
@@ -1899,8 +1950,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(
-    import_ui14.Button,
+  ))), errorMessage && /* @__PURE__ */ React15.createElement(import_ui15.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(import_ui15.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(
+    import_ui15.Button,
     {
       id: "create-variable-button",
       size: "small",
@@ -1908,27 +1959,27 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    (0, import_i18n10.__)("Create", "elementor")
+    (0, import_i18n11.__)("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react14 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
-var import_ui16 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_icons7 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_ui16 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -1942,23 +1993,23 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React15.createElement(import_ui15.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React15.createElement(import_ui15.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n11.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React15.createElement(import_ui15.DialogContent, null, /* @__PURE__ */ React15.createElement(import_ui15.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n11.__)(
+  return /* @__PURE__ */ React16.createElement(import_ui16.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(import_ui16.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n12.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui16.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n12.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React15.createElement(import_ui15.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React15.createElement(
-    import_ui15.FormControlLabel,
+  ))), /* @__PURE__ */ React16.createElement(import_ui16.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
+    import_ui16.FormControlLabel,
     {
-      control: /* @__PURE__ */ React15.createElement(
-        import_ui15.Checkbox,
+      control: /* @__PURE__ */ React16.createElement(
+        import_ui16.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "body2" }, (0, import_i18n11.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n12.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(import_ui15.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n11.__)("Keep editing", "elementor")), /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n11.__)("Save", "elementor")))));
+  ), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(import_ui16.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n12.__)("Keep editing", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n12.__)("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -2043,15 +2094,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React16.createElement(
-        import_ui16.IconButton,
+      /* @__PURE__ */ React17.createElement(
+        import_ui17.IconButton,
         {
           key: "delete",
           size: SIZE3,
-          "aria-label": (0, import_i18n12.__)("Delete", "elementor"),
+          "aria-label": (0, import_i18n13.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React16.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
+        /* @__PURE__ */ React17.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
       )
     );
   }
@@ -2071,31 +2122,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     import_editor_ui5.PopoverHeader,
     {
-      title: (0, import_i18n12.__)("Edit variable", "elementor"),
+      title: (0, import_i18n13.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, onGoBack && /* @__PURE__ */ React16.createElement(
-        import_ui16.IconButton,
+      icon: /* @__PURE__ */ React17.createElement(React17.Fragment, null, onGoBack && /* @__PURE__ */ React17.createElement(
+        import_ui17.IconButton,
         {
           size: SIZE3,
-          "aria-label": (0, import_i18n12.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n13.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React16.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
-      ), /* @__PURE__ */ React16.createElement(VariableIcon, { fontSize: SIZE3 })),
+        /* @__PURE__ */ React17.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React16.createElement(import_ui16.Divider, null), /* @__PURE__ */ React16.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n12.__)("Name", "elementor"),
+      label: (0, import_i18n13.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2113,7 +2164,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React16.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n12.__)("Value", "elementor") }, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "h5" }, /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n13.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
       value,
@@ -2125,7 +2176,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React16.createElement(import_ui16.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React16.createElement(import_ui16.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React16.createElement(import_ui16.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n12.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React16.createElement(
+  ))), errorMessage && /* @__PURE__ */ React17.createElement(import_ui17.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React17.createElement(import_ui17.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React17.createElement(import_ui17.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n13.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React17.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2133,7 +2184,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React16.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React17.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -2152,36 +2203,6 @@ var import_icons10 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 
-// src/components/ui/empty-state.tsx
-var React17 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
-var EmptyState = ({ icon, title, message, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React17.createElement(
-    import_ui17.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
-    },
-    icon,
-    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n13.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      Content,
-      {
-        title: (0, import_i18n13.__)("There are no variables", "elementor"),
-        message: (0, import_i18n13.__)("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
-  );
-};
-function Content({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
-
 // src/components/ui/menu-item-content.tsx
 var React18 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");