@elementor/editor-variables 3.33.0-156 → 3.33.0-157

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 React10 = __toESM(require("react"));
+var React11 = __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_ui10 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_ui11 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/ui/delete-confirmation-dialog.tsx
 var React = __toESM(require("react"));
@@ -67,6 +67,27 @@ 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
+var React2 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5, pt: 5 }
+    },
+    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")))
+  );
+};
+
 // src/components/variables-manager/hooks/use-auto-edit.ts
 var import_react = require("react");
 var useAutoEdit = () => {
@@ -88,7 +109,7 @@ var useAutoEdit = () => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var import_react4 = require("react");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/batch-operations.ts
 var generateTempId = () => {
@@ -155,7 +176,7 @@ var import_react3 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react2 = require("react");
 
 // src/variables-registry/create-variable-type-registry.ts
@@ -163,14 +184,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 React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/ui/color-indicator.tsx
-var import_ui2 = require("@elementor/ui");
-var ColorIndicator = (0, import_ui2.styled)(import_ui2.UnstableColorIndicator)(({ theme }) => ({
+var import_ui3 = require("@elementor/ui");
+var ColorIndicator = (0, import_ui3.styled)(import_ui3.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`,
   marginRight: theme.spacing(0.25)
 }));
@@ -181,7 +202,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_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -386,7 +407,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_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n3.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -408,7 +429,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_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n3.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -541,11 +562,11 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React2.createElement("span", null, (0, import_i18n3.__)("Missing variable", "elementor"));
+    return /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n4.__)("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React2.createElement(import_ui3.Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(import_ui3.Typography, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  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));
 });
 
 // src/transformers/variable-transformer.ts
@@ -630,7 +651,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__ */ React3.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
+  return /* @__PURE__ */ React4.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
   const context = (0, import_react2.useContext)(VariableTypeContext);
@@ -640,6 +661,12 @@ function useVariableType() {
   return getVariableType(context);
 }
 
+// src/utils/filter-by-search.ts
+function filterBySearch(variables, searchValue) {
+  const lowerSearchValue = searchValue.toLowerCase();
+  return variables.filter((variable) => variable.label.toLowerCase().includes(lowerSearchValue));
+}
+
 // src/hooks/use-prop-variables.ts
 var getVariables = (includeDeleted = true) => {
   const variables = service.variables();
@@ -661,7 +688,7 @@ var useVariable = (key) => {
 var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
-  const searchFilteredVariables = filterVariablesBySearchValue(typeFilteredVariables, searchValue);
+  const searchFilteredVariables = filterBySearch(typeFilteredVariables, searchValue);
   const sortedVariables = searchFilteredVariables.sort((a, b) => {
     const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
     const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
@@ -679,10 +706,6 @@ var useVariableSelectionFilter = (variables) => {
   const { propType } = (0, import_editor_controls.useBoundProp)();
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
-var filterVariablesBySearchValue = (variables, searchValue) => {
-  const lowerSearchValue = searchValue.toLowerCase();
-  return variables.filter(({ label }) => label.toLowerCase().includes(lowerSearchValue));
-};
 var usePropVariables = (propKey) => {
   return (0, import_react3.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
@@ -710,15 +733,15 @@ var restoreVariable = (restoreId, label, value) => {
 };
 
 // src/utils/validations.ts
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n4.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n4.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n4.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n4.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n4.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n4.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n4.__)("There was a glitch. Try saving your variable again.", "elementor")
+  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")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -765,14 +788,17 @@ var validateValue = (value) => {
 var useVariablesManagerState = () => {
   const [variables, setVariables] = (0, import_react4.useState)(() => getVariables(false));
   const [deletedVariables, setDeletedVariables] = (0, import_react4.useState)([]);
-  const [ids, setIds] = (0, import_react4.useState)(() => Object.keys(getVariables(false)));
   const [isDirty, setIsDirty] = (0, import_react4.useState)(false);
   const [hasValidationErrors, setHasValidationErrors] = (0, import_react4.useState)(false);
   const [isSaving, setIsSaving] = (0, import_react4.useState)(false);
-  const handleOnChange = (0, import_react4.useCallback)((newVariables) => {
-    setVariables(newVariables);
-    setIsDirty(true);
-  }, []);
+  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
+  const handleOnChange = (0, import_react4.useCallback)(
+    (newVariables) => {
+      setVariables({ ...variables, ...newVariables });
+      setIsDirty(true);
+    },
+    [variables]
+  );
   const createVariable2 = (0, import_react4.useCallback)((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
@@ -782,7 +808,6 @@ var useVariablesManagerState = () => {
       type
     };
     setVariables((prev) => ({ ...prev, [newId]: newVariable }));
-    setIds((prev) => [...prev, newId]);
     setIsDirty(true);
     return newId;
   }, []);
@@ -791,6 +816,9 @@ var useVariablesManagerState = () => {
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
   }, []);
+  const handleSearch = (searchTerm) => {
+    setSearchValue(searchTerm);
+  };
   const handleSave = (0, import_react4.useCallback)(async () => {
     try {
       const originalVariables = getVariables(false);
@@ -800,44 +828,48 @@ var useVariablesManagerState = () => {
         await service.load();
         const updatedVariables = service.variables();
         setVariables(updatedVariables);
-        setIds(Object.keys(updatedVariables));
         setDeletedVariables([]);
         setIsDirty(false);
         setIsSaving(false);
         return { success: true };
       }
-      throw new Error((0, import_i18n5.__)("Failed to save variables. Please try again.", "elementor"));
+      throw new Error((0, import_i18n6.__)("Failed to save variables. Please try again.", "elementor"));
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.UNEXPECTED_ERROR;
       setIsSaving(false);
       return { success: false, error: errorMessage };
     }
   }, [variables]);
+  const filteredVariables = () => {
+    const list = Object.entries(variables).map(([id2, value]) => ({ ...value, id: id2 }));
+    const filtered = filterBySearch(list, searchValue);
+    return Object.fromEntries(filtered.map(({ id: id2, ...rest }) => [id2, rest]));
+  };
   return {
-    variables,
+    variables: filteredVariables(),
     deletedVariables,
-    ids,
     isDirty,
     hasValidationErrors,
-    setIds,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
     handleSave,
     isSaving,
+    handleSearch,
+    searchValue,
     setHasValidationErrors
   };
 };
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_icons2 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_ui5 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
-  const menuState = (0, import_ui4.usePopupState)({
+  const menuState = (0, import_ui5.usePopupState)({
     variant: "popover"
   });
   const variableTypes = getVariableTypes();
@@ -853,17 +885,17 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       }
     };
   });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    import_ui4.IconButton,
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    import_ui5.IconButton,
     {
-      ...(0, import_ui4.bindTrigger)(menuState),
+      ...(0, import_ui5.bindTrigger)(menuState),
       disabled,
       size: SIZE,
-      "aria-label": (0, import_i18n6.__)("Add variable", "elementor")
+      "aria-label": (0, import_i18n7.__)("Add variable", "elementor")
     },
-    /* @__PURE__ */ React4.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
-  ), /* @__PURE__ */ React4.createElement(
-    import_ui4.Menu,
+    /* @__PURE__ */ React5.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React5.createElement(
+    import_ui5.Menu,
     {
       disablePortal: true,
       MenuListProps: {
@@ -872,7 +904,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui4.bindMenu)(menuState),
+      ...(0, import_ui5.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -885,8 +917,8 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuOptions.map((option) => /* @__PURE__ */ React4.createElement(
-      import_ui4.MenuItem,
+    menuOptions.map((option) => /* @__PURE__ */ React5.createElement(
+      import_ui5.MenuItem,
       {
         key: option.key,
         onClick: () => {
@@ -901,7 +933,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
         fontSize: SIZE,
         color: "action"
       }),
-      /* @__PURE__ */ React4.createElement(import_ui4.Typography, { variant: "caption", color: "text.primary" }, option.name)
+      /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", color: "text.primary" }, option.name)
     ))
   ));
 };
@@ -917,18 +949,18 @@ var getDefaultName = (variables, type, baseName) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_ui10 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/components/fields/label-field.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
-var import_ui5 = require("@elementor/ui");
+var import_ui6 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -965,8 +997,8 @@ var LabelField = ({
     errorMsg = error.message;
   }
   const hintMsg = !errorMsg ? labelHint(label) : "";
-  const textField = /* @__PURE__ */ React5.createElement(
-    import_ui5.TextField,
+  const textField = /* @__PURE__ */ React6.createElement(
+    import_ui6.TextField,
     {
       ref: fieldRef,
       id: id2,
@@ -985,7 +1017,7 @@ var LabelField = ({
   );
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(
       import_editor_ui.WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
@@ -1002,16 +1034,16 @@ var LabelField = ({
 };
 
 // src/components/variables-manager/utils/variable-edit-menu.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_react7 = require("react");
 var import_icons3 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
-  const menuState = (0, import_ui6.usePopupState)({
+  const menuState = (0, import_ui7.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { ...(0, import_ui6.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React6.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React6.createElement(
-    import_ui6.Menu,
+  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,
     {
       disablePortal: true,
       MenuListProps: {
@@ -1020,7 +1052,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       PaperProps: {
         elevation: 6
       },
-      ...(0, import_ui6.bindMenu)(menuState),
+      ...(0, import_ui7.bindMenu)(menuState),
       anchorEl: menuState.anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -1033,8 +1065,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React6.createElement(
-      import_ui6.MenuItem,
+    menuActions.map((action) => /* @__PURE__ */ React7.createElement(
+      import_ui7.MenuItem,
       {
         key: action.name,
         onClick: () => {
@@ -1056,8 +1088,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
 };
 
 // src/components/variables-manager/utils/variable-table-cell.tsx
-var React7 = __toESM(require("react"));
-var import_ui7 = require("@elementor/ui");
+var React8 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 var VariableTableCell = ({
   children,
   isHeader,
@@ -1076,14 +1108,14 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React8.createElement(import_ui8.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_ui8 = require("@elementor/ui");
-var VariableEditableCell = React8.memo(
+var import_ui9 = require("@elementor/ui");
+var VariableEditableCell = React9.memo(
   ({
     initialValue,
     children,
@@ -1149,8 +1181,8 @@ var VariableEditableCell = React8.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React8.createElement(import_ui8.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React8.createElement(
-        import_ui8.Stack,
+      return /* @__PURE__ */ React9.createElement(import_ui9.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React9.createElement(
+        import_ui9.Stack,
         {
           ref: rowRef,
           direction: "row",
@@ -1166,8 +1198,8 @@ var VariableEditableCell = React8.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React8.createElement(
-      import_ui8.Stack,
+    return /* @__PURE__ */ React9.createElement(
+      import_ui9.Stack,
       {
         ref: rowRef,
         direction: "row",
@@ -1190,8 +1222,6 @@ var VariablesManagerTable = ({
   menuActions,
   variables,
   onChange: handleOnChange,
-  ids,
-  onIdsChange: setIds,
   autoEditVariableId,
   onAutoEditComplete,
   onFieldError
@@ -1219,13 +1249,8 @@ var VariablesManagerTable = ({
       variableRowRefs.current.delete(id2);
     }
   };
-  (0, import_react9.useEffect)(() => {
-    const sortedIds = [...ids].sort(sortVariablesOrder(variables));
-    if (JSON.stringify(sortedIds) !== JSON.stringify(ids)) {
-      setIds(sortedIds);
-    }
-  }, [ids, variables, setIds]);
-  const rows = ids.filter((id2) => !variables[id2].deleted).sort(sortVariablesOrder(variables)).map((id2) => {
+  const ids = Object.keys(variables).sort(sortVariablesOrder(variables));
+  const rows = ids.filter((id2) => !variables[id2].deleted).map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
     return {
@@ -1240,29 +1265,28 @@ var VariablesManagerTable = ({
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React9.createElement(import_ui9.TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React9.createElement(import_ui9.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React9.createElement(import_ui9.TableHead, null, /* @__PURE__ */ React9.createElement(import_ui9.TableRow, null, /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n7.__)("Name", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n7.__)("Value", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React9.createElement(import_ui9.TableBody, null, /* @__PURE__ */ React9.createElement(
-    import_ui9.UnstableSortableProvider,
+  const handleReorder = (newIds) => {
+    const updatedVariables = { ...variables };
+    newIds.forEach((id2, index) => {
+      const current = updatedVariables[id2];
+      if (!current) {
+        return;
+      }
+      updatedVariables[id2] = Object.assign({}, current, { order: index + 1 });
+    });
+    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,
     {
       value: ids,
-      onChange: (newIds) => {
-        const updatedVariables = { ...variables };
-        newIds.forEach((id2, index) => {
-          if (updatedVariables[id2]) {
-            updatedVariables[id2] = {
-              ...updatedVariables[id2],
-              order: index + 1
-            };
-          }
-        });
-        handleOnChange(updatedVariables);
-        setIds(newIds);
-      },
+      onChange: handleReorder,
       variant: "static",
       restrictAxis: true,
-      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React9.createElement(import_ui9.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React9.createElement(import_ui9.TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React10.createElement(import_ui10.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React10.createElement(import_ui10.TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React9.createElement(
-      import_ui9.UnstableSortableItem,
+    rows.map((row) => /* @__PURE__ */ React10.createElement(
+      import_ui10.UnstableSortableItem,
       {
         key: row.id,
         id: row.id,
@@ -1279,8 +1303,8 @@ var VariablesManagerTable = ({
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React9.createElement(
-            import_ui9.TableRow,
+          return /* @__PURE__ */ React10.createElement(
+            import_ui10.TableRow,
             {
               ...itemProps,
               selected: isDragged,
@@ -1309,8 +1333,8 @@ var VariablesManagerTable = ({
               },
               style: { ...itemStyle, ...triggerStyle }
             },
-            /* @__PURE__ */ React9.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React9.createElement(
-              import_ui9.IconButton,
+            /* @__PURE__ */ React10.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React10.createElement(
+              import_ui10.IconButton,
               {
                 size: "small",
                 ref: setTriggerRef,
@@ -1318,9 +1342,9 @@ var VariablesManagerTable = ({
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React9.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React10.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React9.createElement(VariableTableCell, null, /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(VariableTableCell, null, /* @__PURE__ */ React10.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -1338,7 +1362,7 @@ var VariablesManagerTable = ({
                   onChange,
                   onValidationChange,
                   error
-                }) => /* @__PURE__ */ React9.createElement(
+                }) => /* @__PURE__ */ React10.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
@@ -1360,7 +1384,7 @@ var VariablesManagerTable = ({
                 onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0,
                 fieldType: "label"
               },
-              /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(
                 import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.name,
@@ -1369,7 +1393,7 @@ var VariablesManagerTable = ({
                 row.name
               )
             )),
-            /* @__PURE__ */ React9.createElement(VariableTableCell, null, /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(VariableTableCell, null, /* @__PURE__ */ React10.createElement(
               VariableEditableCell,
               {
                 initialValue: row.value,
@@ -1386,7 +1410,7 @@ var VariablesManagerTable = ({
                 gap: 0.25
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(
                 import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.value,
@@ -1399,7 +1423,7 @@ var VariablesManagerTable = ({
                 row.value
               )
             )),
-            /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -1408,7 +1432,7 @@ var VariablesManagerTable = ({
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React9.createElement(import_ui9.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(import_ui10.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React10.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -1449,15 +1473,15 @@ function VariablesManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui3.useDialog)();
   const {
     variables,
-    ids,
     isDirty,
     hasValidationErrors,
-    setIds,
+    searchValue,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
     handleSave,
     isSaving,
+    handleSearch,
     setHasValidationErrors
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
@@ -1488,7 +1512,7 @@ function VariablesManagerPanel() {
   );
   const menuActions = [
     {
-      name: (0, import_i18n8.__)("Delete", "elementor"),
+      name: (0, import_i18n9.__)("Delete", "elementor"),
       icon: import_icons5.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
@@ -1498,14 +1522,15 @@ function VariablesManagerPanel() {
       }
     }
   ];
-  return /* @__PURE__ */ React10.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React10.createElement(import_ui10.ErrorBoundary, { fallback: /* @__PURE__ */ React10.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React10.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n8.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React10.createElement(
+  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(
     VariableManagerCreateMenu,
     {
       onCreate: handleCreateVariable,
       variables
     }
-  ), /* @__PURE__ */ React10.createElement(
-    import_ui10.CloseButton,
+  ), /* @__PURE__ */ React11.createElement(
+    import_ui11.CloseButton,
     {
       "aria-label": "Close",
       slotProps: { icon: { fontSize: SIZE } },
@@ -1513,7 +1538,7 @@ function VariablesManagerPanel() {
         handleClosePanel();
       }
     }
-  ))), /* @__PURE__ */ React10.createElement(import_ui10.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React10.createElement(
+  ))))), /* @__PURE__ */ React11.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1522,21 +1547,36 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
+      import_editor_ui3.SearchField,
+      {
+        placeholder: (0, import_i18n9.__)("Search", "elementor"),
+        value: searchValue,
+        onSearch: handleSearch
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(import_ui11.Divider, { sx: { width: "100%" } }),
+    hasVariables && /* @__PURE__ */ React11.createElement(
       VariablesManagerTable,
       {
         menuActions,
         variables,
         onChange: handleOnChange,
-        ids,
-        onIdsChange: setIds,
         autoEditVariableId,
         onAutoEditComplete: handleAutoEditComplete,
         onFieldError: setHasValidationErrors
       }
+    ),
+    !hasVariables && /* @__PURE__ */ React11.createElement(
+      NoSearchResults,
+      {
+        searchValue,
+        onClear: () => handleSearch(""),
+        icon: /* @__PURE__ */ React11.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
+      }
     )
-  ), /* @__PURE__ */ React10.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React10.createElement(
-    import_ui10.Button,
+  ), /* @__PURE__ */ React11.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React11.createElement(
+    import_ui11.Button,
     {
       fullWidth: true,
       size: "small",
@@ -1546,8 +1586,8 @@ function VariablesManagerPanel() {
       onClick: handleSave,
       loading: isSaving
     },
-    (0, import_i18n8.__)("Save changes", "elementor")
-  ))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
+    (0, import_i18n9.__)("Save changes", "elementor")
+  ))), deleteConfirmation && /* @__PURE__ */ React11.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1555,19 +1595,19 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  )), isSaveChangesDialogOpen && /* @__PURE__ */ React10.createElement(import_editor_ui3.SaveChangesDialog, null, /* @__PURE__ */ React10.createElement(import_editor_ui3.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n8.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React10.createElement(import_editor_ui3.SaveChangesDialog.Content, null, /* @__PURE__ */ React10.createElement(import_editor_ui3.SaveChangesDialog.ContentText, null, (0, import_i18n8.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React10.createElement(
+  )), 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(
     import_editor_ui3.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n8.__)("Discard", "elementor"),
+          label: (0, import_i18n9.__)("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n8.__)("Save", "elementor"),
+          label: (0, import_i18n9.__)("Save", "elementor"),
           action: async () => {
             await handleSave();
             closeSaveChangesDialog();
@@ -1578,7 +1618,7 @@ function VariablesManagerPanel() {
     }
   )));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React10.createElement(import_ui10.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React10.createElement(import_ui10.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React10.createElement("strong", null, (0, import_i18n8.__)("Something went wrong", "elementor"))));
+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 usePreventUnload = (isDirty) => {
   (0, import_react10.useEffect)(() => {
     const handleBeforeUnload = (event) => {
@@ -1626,13 +1666,13 @@ var import_react16 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react11 = require("react");
-var import_ui11 = require("@elementor/ui");
+var import_ui12 = require("@elementor/ui");
 var PopoverContentRefContext = (0, import_react11.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = (0, import_react11.useState)(null);
-  return /* @__PURE__ */ React11.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return (0, import_react11.useContext)(PopoverContentRefContext);
@@ -1654,14 +1694,14 @@ var usePermissions = () => {
 };
 
 // src/components/variable-creation.tsx
-var React13 = __toESM(require("react"));
+var React14 = __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_ui13 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_ui14 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
 var import_editor_controls2 = require("@elementor/editor-controls");
@@ -1722,10 +1762,10 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/components/ui/form-field.tsx
-var React12 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
+var React13 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React12.createElement(import_ui12.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(import_ui12.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React12.createElement(import_ui12.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, null, noticeMsg)));
+  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)));
 };
 
 // src/components/variable-creation.tsx
@@ -1789,22 +1829,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React13.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, onGoBack && /* @__PURE__ */ React13.createElement(import_ui13.IconButton, { size: SIZE2, "aria-label": (0, import_i18n9.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React13.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: (0, import_i18n9.__)("Create variable", "elementor"),
+      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"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React13.createElement(import_ui13.Divider, null), /* @__PURE__ */ React13.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n9.__)("Name", "elementor"),
+      label: (0, import_i18n10.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1822,7 +1862,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React13.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n9.__)("Value", "elementor") }, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React13.createElement(
+  ), /* @__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(
     ValueField,
     {
       value,
@@ -1834,8 +1874,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React13.createElement(import_ui13.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React13.createElement(
-    import_ui13.Button,
+  ))), 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,
     {
       id: "create-variable-button",
       size: "small",
@@ -1843,27 +1883,27 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    (0, import_i18n9.__)("Create", "elementor")
+    (0, import_i18n10.__)("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-var React15 = __toESM(require("react"));
+var React16 = __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_ui15 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_ui16 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_icons7 = 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");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -1877,23 +1917,23 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React14.createElement(import_ui14.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React14.createElement(import_ui14.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React14.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n10.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React14.createElement(import_ui14.DialogContent, null, /* @__PURE__ */ React14.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n10.__)(
+  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.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React14.createElement(import_ui14.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
-    import_ui14.FormControlLabel,
+  ))), /* @__PURE__ */ React15.createElement(import_ui15.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React15.createElement(
+    import_ui15.FormControlLabel,
     {
-      control: /* @__PURE__ */ React14.createElement(
-        import_ui14.Checkbox,
+      control: /* @__PURE__ */ React15.createElement(
+        import_ui15.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "body2" }, (0, import_i18n10.__)("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "body2" }, (0, import_i18n11.__)("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement(import_ui14.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n10.__)("Keep editing", "elementor")), /* @__PURE__ */ React14.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n10.__)("Save", "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")))));
 };
 
 // src/components/variable-edit.tsx
@@ -1978,15 +2018,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React15.createElement(
-        import_ui15.IconButton,
+      /* @__PURE__ */ React16.createElement(
+        import_ui16.IconButton,
         {
           key: "delete",
           size: SIZE3,
-          "aria-label": (0, import_i18n11.__)("Delete", "elementor"),
+          "aria-label": (0, import_i18n12.__)("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React15.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
+        /* @__PURE__ */ React16.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })
       )
     );
   }
@@ -2006,31 +2046,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React16.createElement(
     import_editor_ui5.PopoverHeader,
     {
-      title: (0, import_i18n11.__)("Edit variable", "elementor"),
+      title: (0, import_i18n12.__)("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(
-        import_ui15.IconButton,
+      icon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, onGoBack && /* @__PURE__ */ React16.createElement(
+        import_ui16.IconButton,
         {
           size: SIZE3,
-          "aria-label": (0, import_i18n11.__)("Go Back", "elementor"),
+          "aria-label": (0, import_i18n12.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React15.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
-      ), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE3 })),
+        /* @__PURE__ */ React16.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React16.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React15.createElement(import_ui15.Divider, null), /* @__PURE__ */ React15.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React16.createElement(import_ui16.Divider, null), /* @__PURE__ */ React16.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React16.createElement(
     FormField,
     {
       id: "variable-label",
-      label: (0, import_i18n11.__)("Name", "elementor"),
+      label: (0, import_i18n12.__)("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2048,7 +2088,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n11.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5" }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React16.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n12.__)("Value", "elementor") }, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "h5" }, /* @__PURE__ */ React16.createElement(
     ValueField,
     {
       value,
@@ -2060,7 +2100,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), 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, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n11.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React15.createElement(
+  ))), 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(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2068,7 +2108,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React15.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React16.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -2088,13 +2128,13 @@ var import_ui20 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 
 // src/components/ui/empty-state.tsx
-var React16 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+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__ */ React16.createElement(
-    import_ui16.Stack,
+  return /* @__PURE__ */ React17.createElement(
+    import_ui17.Stack,
     {
       gap: 1,
       alignItems: "center",
@@ -2104,30 +2144,30 @@ var EmptyState = ({ icon, title, message, onAdd }) => {
       sx: { p: 2.5, pb: 5.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React16.createElement(import_ui16.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React16.createElement(
+    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_i18n12.__)("There are no variables", "elementor"),
-        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
+        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__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, 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 React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
-var import_ui17 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_ui18 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.ListItemIcon, null, item.icon), /* @__PURE__ */ React17.createElement(
-    import_ui17.Box,
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(import_ui18.ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
+    import_ui18.Box,
     {
       sx: {
         flex: 1,
@@ -2137,64 +2177,42 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(
       import_editor_ui6.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui17.Typography,
+        as: import_ui18.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React17.createElement(
+    item.secondaryText && /* @__PURE__ */ React18.createElement(
       import_editor_ui6.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui17.Typography,
+        as: import_ui18.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React17.createElement(
-    import_ui17.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(
+    import_ui18.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n13.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n14.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React17.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React18.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
   ));
 };
 
-// src/components/ui/no-search-results.tsx
-var React18 = __toESM(require("react"));
-var import_ui18 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React18.createElement(
-    import_ui18.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React18.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n14.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React18.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React18.createElement(import_ui18.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n14.__)("Try something else.", "elementor"), /* @__PURE__ */ React18.createElement(import_ui18.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n14.__)("Clear & try again", "elementor")))
-  );
-};
-
 // src/components/ui/styled-menu-list.tsx
 var import_ui19 = require("@elementor/ui");
 var VariablesStyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
@@ -2296,7 +2314,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       actions
     }
   ), hasVariables && /* @__PURE__ */ React19.createElement(
-    import_editor_ui7.PopoverSearch,
+    import_editor_ui7.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,