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

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 
 // src/components/variables-manager/variables-manager-panel.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useCallback as useCallback4, useEffect as useEffect3, useState as useState5 } from "react";
 import {
   __createPanel as createPanel,
@@ -15,11 +15,11 @@ import {
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
-import { SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { ColorFilterIcon, TrashIcon } from "@elementor/icons";
-import { Alert, Box, Button as Button2, CloseButton, Divider, ErrorBoundary, Stack as Stack4 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Alert, Box, Button as Button2, CloseButton, Divider, ErrorBoundary, Stack as Stack5 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/ui/delete-confirmation-dialog.tsx
 import * as React from "react";
@@ -44,6 +44,27 @@ var DeleteConfirmationDialog = ({
   return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React.createElement(AlertOctagonFilledIcon, { color: "error" }), __("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", __("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "secondary", onClick: closeDialog }, __("Not now", "elementor")), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __("Delete", "elementor"))));
 };
 
+// src/components/ui/no-search-results.tsx
+import * as React2 from "react";
+import { Link, Stack, Typography as Typography2 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
+  return /* @__PURE__ */ React2.createElement(
+    Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5, pt: 5 }
+    },
+    icon,
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "subtitle2" }, __2("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React2.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React2.createElement(Typography2, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __2("Try something else.", "elementor"), /* @__PURE__ */ React2.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __2("Clear & try again", "elementor")))
+  );
+};
+
 // src/components/variables-manager/hooks/use-auto-edit.ts
 import { useCallback, useState } from "react";
 var useAutoEdit = () => {
@@ -65,7 +86,7 @@ var useAutoEdit = () => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 import { useCallback as useCallback2, useState as useState2 } from "react";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/batch-operations.ts
 var generateTempId = () => {
@@ -132,7 +153,7 @@ import { useMemo } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
 
 // src/context/variable-type-context.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { createContext, useContext } from "react";
 
 // src/variables-registry/create-variable-type-registry.ts
@@ -140,10 +161,10 @@ import { styleTransformersRegistry } from "@elementor/editor-canvas";
 import { stylesInheritanceTransformersRegistry } from "@elementor/editor-editing-panel";
 
 // src/transformers/inheritance-transformer.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { createTransformer } from "@elementor/editor-canvas";
-import { Stack, Typography as Typography2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { Stack as Stack2, Typography as Typography3 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/ui/color-indicator.tsx
 import { styled, UnstableColorIndicator } from "@elementor/ui";
@@ -158,7 +179,7 @@ import { z } from "@elementor/schema";
 var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/service.ts
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -363,7 +384,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __3("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -385,7 +406,7 @@ var service = {
     return apiClient.update(id2, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __3("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -518,11 +539,11 @@ var inheritanceTransformer = createTransformer((id2) => {
   const variables = service.variables();
   const variable = variables[id2];
   if (!variable) {
-    return /* @__PURE__ */ React2.createElement("span", null, __3("Missing variable", "elementor"));
+    return /* @__PURE__ */ React3.createElement("span", null, __4("Missing variable", "elementor"));
   }
   const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
   const css = resolveCssVariable(id2, variable);
-  return /* @__PURE__ */ React2.createElement(Stack, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React2.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
+  return /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", spacing: 0.5, sx: { paddingInline: "1px" }, alignItems: "center" }, showColorIndicator && /* @__PURE__ */ React3.createElement(ColorIndicator, { size: "inherit", value: variable.value }), /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, css));
 });
 
 // src/transformers/variable-transformer.ts
@@ -607,7 +628,7 @@ var { registerVariableType, getVariableType, getVariableTypes, hasVariableType }
 // src/context/variable-type-context.tsx
 var VariableTypeContext = 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 = useContext(VariableTypeContext);
@@ -617,6 +638,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();
@@ -638,7 +665,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;
@@ -656,10 +683,6 @@ var useVariableSelectionFilter = (variables) => {
   const { propType } = 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 useMemo(() => normalizeVariables(propKey), [propKey]);
 };
@@ -687,15 +710,15 @@ var restoreVariable = (restoreId, label, value) => {
 };
 
 // src/utils/validations.ts
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __4("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __4("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __4("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __4("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __4("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __4("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __4("There was a glitch. Try saving your variable again.", "elementor")
+  MISSING_VARIABLE_NAME: __5("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __5("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __5("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __5("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __5("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __5("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __5("There was a glitch. Try saving your variable again.", "elementor")
 };
 var VARIABLE_LABEL_MAX_LENGTH = 50;
 var mapServerError = (error) => {
@@ -742,14 +765,17 @@ var validateValue = (value) => {
 var useVariablesManagerState = () => {
   const [variables, setVariables] = useState2(() => getVariables(false));
   const [deletedVariables, setDeletedVariables] = useState2([]);
-  const [ids, setIds] = useState2(() => Object.keys(getVariables(false)));
   const [isDirty, setIsDirty] = useState2(false);
   const [hasValidationErrors, setHasValidationErrors] = useState2(false);
   const [isSaving, setIsSaving] = useState2(false);
-  const handleOnChange = useCallback2((newVariables) => {
-    setVariables(newVariables);
-    setIsDirty(true);
-  }, []);
+  const [searchValue, setSearchValue] = useState2("");
+  const handleOnChange = useCallback2(
+    (newVariables) => {
+      setVariables({ ...variables, ...newVariables });
+      setIsDirty(true);
+    },
+    [variables]
+  );
   const createVariable2 = useCallback2((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
@@ -759,7 +785,6 @@ var useVariablesManagerState = () => {
       type
     };
     setVariables((prev) => ({ ...prev, [newId]: newVariable }));
-    setIds((prev) => [...prev, newId]);
     setIsDirty(true);
     return newId;
   }, []);
@@ -768,6 +793,9 @@ var useVariablesManagerState = () => {
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
   }, []);
+  const handleSearch = (searchTerm) => {
+    setSearchValue(searchTerm);
+  };
   const handleSave = useCallback2(async () => {
     try {
       const originalVariables = getVariables(false);
@@ -777,41 +805,45 @@ 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(__5("Failed to save variables. Please try again.", "elementor"));
+      throw new Error(__6("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
-import * as React4 from "react";
-import { createElement as createElement5 } from "react";
+import * as React5 from "react";
+import { createElement as createElement6 } from "react";
 import { PlusIcon } from "@elementor/icons";
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography3, usePopupState } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography4, usePopupState } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
   const menuState = usePopupState({
@@ -830,16 +862,16 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       }
     };
   });
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
     IconButton,
     {
       ...bindTrigger(menuState),
       disabled,
       size: SIZE,
-      "aria-label": __6("Add variable", "elementor")
+      "aria-label": __7("Add variable", "elementor")
     },
-    /* @__PURE__ */ React4.createElement(PlusIcon, { fontSize: SIZE })
-  ), /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(PlusIcon, { fontSize: SIZE })
+  ), /* @__PURE__ */ React5.createElement(
     Menu,
     {
       disablePortal: true,
@@ -862,7 +894,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuOptions.map((option) => /* @__PURE__ */ React4.createElement(
+    menuOptions.map((option) => /* @__PURE__ */ React5.createElement(
       MenuItem,
       {
         key: option.key,
@@ -874,11 +906,11 @@ var VariableManagerCreateMenu = ({ variables, onCreate, disabled }) => {
           gap: 1.5
         }
       },
-      createElement5(option.icon, {
+      createElement6(option.icon, {
         fontSize: SIZE,
         color: "action"
       }),
-      /* @__PURE__ */ React4.createElement(Typography3, { variant: "caption", color: "text.primary" }, option.name)
+      /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.primary" }, option.name)
     ))
   ));
 };
@@ -894,13 +926,13 @@ var getDefaultName = (variables, type, baseName) => {
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-import * as React9 from "react";
-import { createElement as createElement12, useEffect as useEffect2, useRef as useRef3 } from "react";
+import * as React10 from "react";
+import { createElement as createElement13, useEffect as useEffect2, useRef as useRef3 } from "react";
 import { EllipsisWithTooltip } from "@elementor/editor-ui";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   IconButton as IconButton3,
-  Stack as Stack3,
+  Stack as Stack4,
   Table,
   TableBody,
   TableContainer,
@@ -909,10 +941,10 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/components/fields/label-field.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { useRef, useState as useState3 } from "react";
 import { WarningInfotip } from "@elementor/editor-ui";
 import { TextField } from "@elementor/ui";
@@ -952,7 +984,7 @@ var LabelField = ({
     errorMsg = error.message;
   }
   const hintMsg = !errorMsg ? labelHint(label) : "";
-  const textField = /* @__PURE__ */ React5.createElement(
+  const textField = /* @__PURE__ */ React6.createElement(
     TextField,
     {
       ref: fieldRef,
@@ -972,7 +1004,7 @@ var LabelField = ({
   );
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(
       WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
@@ -989,15 +1021,15 @@ var LabelField = ({
 };
 
 // src/components/variables-manager/utils/variable-edit-menu.tsx
-import * as React6 from "react";
-import { createElement as createElement8 } from "react";
+import * as React7 from "react";
+import { createElement as createElement9 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, IconButton as IconButton2, Menu as Menu2, MenuItem as MenuItem2, usePopupState as usePopupState2 } from "@elementor/ui";
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   const menuState = usePopupState2({
     variant: "popover"
   });
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(IconButton2, { ...bindTrigger2(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React6.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(IconButton2, { ...bindTrigger2(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React7.createElement(DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React7.createElement(
     Menu2,
     {
       disablePortal: true,
@@ -1020,7 +1052,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
       open: menuState.isOpen,
       onClose: menuState.close
     },
-    menuActions.map((action) => /* @__PURE__ */ React6.createElement(
+    menuActions.map((action) => /* @__PURE__ */ React7.createElement(
       MenuItem2,
       {
         key: action.name,
@@ -1033,7 +1065,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && createElement8(action.icon, {
+      action.icon && createElement9(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1043,7 +1075,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
 };
 
 // src/components/variables-manager/utils/variable-table-cell.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { TableCell } from "@elementor/ui";
 var VariableTableCell = ({
   children,
@@ -1063,14 +1095,14 @@ var VariableTableCell = ({
     ...width && { width },
     ...sx
   };
-  return /* @__PURE__ */ React7.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+  return /* @__PURE__ */ React8.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
 };
 
 // src/components/variables-manager/variable-editable-cell.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { useCallback as useCallback3, useEffect, useRef as useRef2, useState as useState4 } from "react";
-import { ClickAwayListener, Stack as Stack2 } from "@elementor/ui";
-var VariableEditableCell = React8.memo(
+import { ClickAwayListener, Stack as Stack3 } from "@elementor/ui";
+var VariableEditableCell = React9.memo(
   ({
     initialValue,
     children,
@@ -1136,8 +1168,8 @@ var VariableEditableCell = React8.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React8.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React8.createElement(
-        Stack2,
+      return /* @__PURE__ */ React9.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React9.createElement(
+        Stack3,
         {
           ref: rowRef,
           direction: "row",
@@ -1153,8 +1185,8 @@ var VariableEditableCell = React8.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React8.createElement(
-      Stack2,
+    return /* @__PURE__ */ React9.createElement(
+      Stack3,
       {
         ref: rowRef,
         direction: "row",
@@ -1177,8 +1209,6 @@ var VariablesManagerTable = ({
   menuActions,
   variables,
   onChange: handleOnChange,
-  ids,
-  onIdsChange: setIds,
   autoEditVariableId,
   onAutoEditComplete,
   onFieldError
@@ -1206,13 +1236,8 @@ var VariablesManagerTable = ({
       variableRowRefs.current.delete(id2);
     }
   };
-  useEffect2(() => {
-    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 {
@@ -1227,28 +1252,27 @@ var VariablesManagerTable = ({
     minWidth: 250,
     tableLayout: "fixed"
   };
-  return /* @__PURE__ */ React9.createElement(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React9.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React9.createElement(TableHead, null, /* @__PURE__ */ React9.createElement(TableRow, null, /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, __7("Name", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true }, __7("Value", "elementor")), /* @__PURE__ */ React9.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React9.createElement(TableBody, null, /* @__PURE__ */ React9.createElement(
+  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(TableContainer, { ref: tableContainerRef, sx: { overflow: "initial" } }, /* @__PURE__ */ React10.createElement(Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React10.createElement(TableHead, null, /* @__PURE__ */ React10.createElement(TableRow, null, /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true }, __8("Name", "elementor")), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true }, __8("Value", "elementor")), /* @__PURE__ */ React10.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React10.createElement(TableBody, null, /* @__PURE__ */ React10.createElement(
     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(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React9.createElement(TableBody, null, dragOverlayChildren))
+      dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React10.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React10.createElement(TableBody, null, dragOverlayChildren))
     },
-    rows.map((row) => /* @__PURE__ */ React9.createElement(
+    rows.map((row) => /* @__PURE__ */ React10.createElement(
       UnstableSortableItem,
       {
         key: row.id,
@@ -1266,7 +1290,7 @@ var VariablesManagerTable = ({
         }) => {
           const showIndicationBefore = showDropIndication && dropPosition === "before";
           const showIndicationAfter = showDropIndication && dropPosition === "after";
-          return /* @__PURE__ */ React9.createElement(
+          return /* @__PURE__ */ React10.createElement(
             TableRow,
             {
               ...itemProps,
@@ -1296,7 +1320,7 @@ var VariablesManagerTable = ({
               },
               style: { ...itemStyle, ...triggerStyle }
             },
-            /* @__PURE__ */ React9.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React10.createElement(
               IconButton3,
               {
                 size: "small",
@@ -1305,9 +1329,9 @@ var VariablesManagerTable = ({
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React9.createElement(GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React10.createElement(GripVerticalIcon, { fontSize: "inherit" })
             )),
-            /* @__PURE__ */ React9.createElement(VariableTableCell, null, /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(VariableTableCell, null, /* @__PURE__ */ React10.createElement(
               VariableEditableCell,
               {
                 initialValue: row.name,
@@ -1319,13 +1343,13 @@ var VariablesManagerTable = ({
                     });
                   }
                 },
-                prefixElement: createElement12(row.icon, { fontSize: "inherit" }),
+                prefixElement: createElement13(row.icon, { fontSize: "inherit" }),
                 editableElement: ({
                   value,
                   onChange,
                   onValidationChange,
                   error
-                }) => /* @__PURE__ */ React9.createElement(
+                }) => /* @__PURE__ */ React10.createElement(
                   LabelField,
                   {
                     id: "variable-label-" + row.id,
@@ -1347,7 +1371,7 @@ var VariablesManagerTable = ({
                 onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : void 0,
                 fieldType: "label"
               },
-              /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(
                 EllipsisWithTooltip,
                 {
                   title: row.name,
@@ -1356,7 +1380,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,
@@ -1373,7 +1397,7 @@ var VariablesManagerTable = ({
                 gap: 0.25
               },
               row.startIcon && row.startIcon({ value: row.value }),
-              /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(
                 EllipsisWithTooltip,
                 {
                   title: row.value,
@@ -1386,7 +1410,7 @@ var VariablesManagerTable = ({
                 row.value
               )
             )),
-            /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(
               VariableTableCell,
               {
                 align: "right",
@@ -1395,7 +1419,7 @@ var VariablesManagerTable = ({
                 maxWidth: 16,
                 sx: { paddingInlineEnd: 1 }
               },
-              /* @__PURE__ */ React9.createElement(Stack3, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React9.createElement(
+              /* @__PURE__ */ React10.createElement(Stack4, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React10.createElement(
                 VariableEditMenu,
                 {
                   menuActions,
@@ -1436,15 +1460,15 @@ function VariablesManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const {
     variables,
-    ids,
     isDirty,
     hasValidationErrors,
-    setIds,
+    searchValue,
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
     handleSave,
     isSaving,
+    handleSearch,
     setHasValidationErrors
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
@@ -1475,7 +1499,7 @@ function VariablesManagerPanel() {
   );
   const menuActions = [
     {
-      name: __8("Delete", "elementor"),
+      name: __9("Delete", "elementor"),
       icon: TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
@@ -1485,13 +1509,14 @@ function VariablesManagerPanel() {
       }
     }
   ];
-  return /* @__PURE__ */ React10.createElement(ThemeProvider, null, /* @__PURE__ */ React10.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React10.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React10.createElement(Panel, null, /* @__PURE__ */ React10.createElement(PanelHeader, null, /* @__PURE__ */ React10.createElement(Stack4, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Stack4, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Stack4, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React10.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(ColorFilterIcon, { fontSize: "inherit" }), __8("Variable Manager", "elementor"))), /* @__PURE__ */ React10.createElement(Stack4, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React10.createElement(
+  const hasVariables = Object.keys(variables).length !== 0;
+  return /* @__PURE__ */ React11.createElement(ThemeProvider, null, /* @__PURE__ */ React11.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React11.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React11.createElement(Panel, null, /* @__PURE__ */ React11.createElement(PanelHeader, null, /* @__PURE__ */ React11.createElement(Stack5, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React11.createElement(Stack5, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(Stack5, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React11.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(ColorFilterIcon, { fontSize: "inherit" }), __9("Variable Manager", "elementor"))), /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React11.createElement(
     VariableManagerCreateMenu,
     {
       onCreate: handleCreateVariable,
       variables
     }
-  ), /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(
     CloseButton,
     {
       "aria-label": "Close",
@@ -1500,7 +1525,7 @@ function VariablesManagerPanel() {
         handleClosePanel();
       }
     }
-  ))), /* @__PURE__ */ React10.createElement(Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React10.createElement(
+  ))))), /* @__PURE__ */ React11.createElement(
     PanelBody,
     {
       sx: {
@@ -1509,20 +1534,35 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
+      SearchField,
+      {
+        placeholder: __9("Search", "elementor"),
+        value: searchValue,
+        onSearch: handleSearch
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(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(ColorFilterIcon, { fontSize: "large" })
+      }
     )
-  ), /* @__PURE__ */ React10.createElement(PanelFooter, null, /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React11.createElement(PanelFooter, null, /* @__PURE__ */ React11.createElement(
     Button2,
     {
       fullWidth: true,
@@ -1533,8 +1573,8 @@ function VariablesManagerPanel() {
       onClick: handleSave,
       loading: isSaving
     },
-    __8("Save changes", "elementor")
-  ))), deleteConfirmation && /* @__PURE__ */ React10.createElement(
+    __9("Save changes", "elementor")
+  ))), deleteConfirmation && /* @__PURE__ */ React11.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -1542,19 +1582,19 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  )), isSaveChangesDialogOpen && /* @__PURE__ */ React10.createElement(SaveChangesDialog, null, /* @__PURE__ */ React10.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __8("You have unsaved changes", "elementor")), /* @__PURE__ */ React10.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React10.createElement(SaveChangesDialog.ContentText, null, __8("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React10.createElement(
+  )), isSaveChangesDialogOpen && /* @__PURE__ */ React11.createElement(SaveChangesDialog, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __9("You have unsaved changes", "elementor")), /* @__PURE__ */ React11.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.ContentText, null, __9("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React11.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __8("Discard", "elementor"),
+          label: __9("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
             closePanel();
           }
         },
         confirm: {
-          label: __8("Save", "elementor"),
+          label: __9("Save", "elementor"),
           action: async () => {
             await handleSave();
             closeSaveChangesDialog();
@@ -1565,7 +1605,7 @@ function VariablesManagerPanel() {
     }
   )));
 }
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React10.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React10.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React10.createElement("strong", null, __8("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React11.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React11.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React11.createElement("strong", null, __9("Something went wrong", "elementor"))));
 var usePreventUnload = (isDirty) => {
   useEffect3(() => {
     const handleBeforeUnload = (event) => {
@@ -1613,13 +1653,13 @@ import { useState as useState11 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState6 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = useState6(null);
-  return /* @__PURE__ */ React11.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React11.createElement(Box2, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React12.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React12.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
@@ -1641,14 +1681,14 @@ var usePermissions = () => {
 };
 
 // src/components/variable-creation.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { useState as useState7 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
-import { Button as Button3, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography4 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { Button as Button3, CardActions, Divider as Divider2, FormHelperText as FormHelperText2, IconButton as IconButton4, Typography as Typography5 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
@@ -1709,10 +1749,10 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
 };
 
 // src/components/ui/form-field.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { FormHelperText, FormLabel, Grid } from "@elementor/ui";
 var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
-  return /* @__PURE__ */ React12.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React12.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React12.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React12.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React12.createElement(FormHelperText, null, noticeMsg)));
+  return /* @__PURE__ */ React13.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React13.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React13.createElement(FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React13.createElement(Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React13.createElement(FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React13.createElement(FormHelperText, null, noticeMsg)));
 };
 
 // src/components/variable-creation.tsx
@@ -1776,22 +1816,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React13.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
     PopoverHeader,
     {
-      icon: /* @__PURE__ */ React13.createElement(React13.Fragment, null, onGoBack && /* @__PURE__ */ React13.createElement(IconButton4, { size: SIZE2, "aria-label": __9("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React13.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React13.createElement(VariableIcon, { fontSize: SIZE2 })),
-      title: __9("Create variable", "elementor"),
+      icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(IconButton4, { size: SIZE2, "aria-label": __10("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React14.createElement(ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
+      title: __10("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React13.createElement(Divider2, null), /* @__PURE__ */ React13.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(Divider2, null), /* @__PURE__ */ React14.createElement(PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __9("Name", "elementor"),
+      label: __10("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -1809,7 +1849,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React13.createElement(FormField, { errorMsg: valueFieldError, label: __9("Value", "elementor") }, /* @__PURE__ */ React13.createElement(Typography4, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React14.createElement(Typography5, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React14.createElement(
     ValueField,
     {
       value,
@@ -1821,7 +1861,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React13.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React13.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React13.createElement(
+  ))), errorMessage && /* @__PURE__ */ React14.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(
     Button3,
     {
       id: "create-variable-button",
@@ -1830,23 +1870,23 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       disabled: isSubmitDisabled,
       onClick: handleCreateAndTrack
     },
-    __9("Create", "elementor")
+    __10("Create", "elementor")
   )));
 };
 
 // src/components/variable-edit.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { useEffect as useEffect4, useState as useState9 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography6 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Button as Button5, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography7 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { useState as useState8 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
@@ -1858,9 +1898,9 @@ import {
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle2,
   FormControlLabel,
-  Typography as Typography5
+  Typography as Typography6
 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
 var EditConfirmationDialog = ({
   closeDialog,
@@ -1874,13 +1914,13 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React14.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React14.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React14.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __10("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React14.createElement(DialogContent2, null, /* @__PURE__ */ React14.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __10(
+  return /* @__PURE__ */ React15.createElement(Dialog2, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React15.createElement(DialogTitle2, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(AlertTriangleFilledIcon, { color: "secondary" }), __11("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React15.createElement(DialogContent2, null, /* @__PURE__ */ React15.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, __11(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
-  ))), /* @__PURE__ */ React14.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
+  ))), /* @__PURE__ */ React15.createElement(DialogActions2, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React15.createElement(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ React14.createElement(
+      control: /* @__PURE__ */ React15.createElement(
         Checkbox,
         {
           checked: dontShowAgain,
@@ -1888,9 +1928,9 @@ var EditConfirmationDialog = ({
           size: "small"
         }
       ),
-      label: /* @__PURE__ */ React14.createElement(Typography5, { variant: "body2" }, __10("Don't show me again", "elementor"))
+      label: /* @__PURE__ */ React15.createElement(Typography6, { variant: "body2" }, __11("Don't show me again", "elementor"))
     }
-  ), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement(Button4, { color: "secondary", onClick: closeDialog }, __10("Keep editing", "elementor")), /* @__PURE__ */ React14.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __10("Save", "elementor")))));
+  ), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(Button4, { color: "secondary", onClick: closeDialog }, __11("Keep editing", "elementor")), /* @__PURE__ */ React15.createElement(Button4, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, __11("Save", "elementor")))));
 };
 
 // src/components/variable-edit.tsx
@@ -1975,15 +2015,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React15.createElement(
+      /* @__PURE__ */ React16.createElement(
         IconButton5,
         {
           key: "delete",
           size: SIZE3,
-          "aria-label": __11("Delete", "elementor"),
+          "aria-label": __12("Delete", "elementor"),
           onClick: handleDeleteConfirmation
         },
-        /* @__PURE__ */ React15.createElement(TrashIcon2, { fontSize: SIZE3 })
+        /* @__PURE__ */ React16.createElement(TrashIcon2, { fontSize: SIZE3 })
       )
     );
   }
@@ -2003,31 +2043,31 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(PopoverBody2, { height: "auto" }, /* @__PURE__ */ React16.createElement(
     PopoverHeader2,
     {
-      title: __11("Edit variable", "elementor"),
+      title: __12("Edit variable", "elementor"),
       onClose,
-      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(
+      icon: /* @__PURE__ */ React16.createElement(React16.Fragment, null, onGoBack && /* @__PURE__ */ React16.createElement(
         IconButton5,
         {
           size: SIZE3,
-          "aria-label": __11("Go Back", "elementor"),
+          "aria-label": __12("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React15.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
-      ), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE3 })),
+        /* @__PURE__ */ React16.createElement(ArrowLeftIcon2, { fontSize: SIZE3 })
+      ), /* @__PURE__ */ React16.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
-  ), /* @__PURE__ */ React15.createElement(Divider3, null), /* @__PURE__ */ React15.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React16.createElement(Divider3, null), /* @__PURE__ */ React16.createElement(PopoverContent2, { p: 2 }, /* @__PURE__ */ React16.createElement(
     FormField,
     {
       id: "variable-label",
-      label: __11("Name", "elementor"),
+      label: __12("Name", "elementor"),
       errorMsg: labelFieldError?.message,
       noticeMsg: labelHint(label)
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       LabelField,
       {
         id: "variable-label",
@@ -2045,7 +2085,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: __11("Value", "elementor") }, /* @__PURE__ */ React15.createElement(Typography6, { variant: "h5" }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React16.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React16.createElement(Typography7, { variant: "h5" }, /* @__PURE__ */ React16.createElement(
     ValueField,
     {
       value,
@@ -2057,7 +2097,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React15.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __11("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React15.createElement(
+  ))), errorMessage && /* @__PURE__ */ React16.createElement(FormHelperText3, { error: true }, errorMessage)), /* @__PURE__ */ React16.createElement(CardActions2, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React16.createElement(Button5, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, __12("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React16.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2065,7 +2105,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       onConfirm: handleDelete,
       closeDialog: closeDeleteDialog()
     }
-  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React15.createElement(
+  ), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React16.createElement(
     EditConfirmationDialog,
     {
       closeDialog: closeEditDialog(),
@@ -2079,19 +2119,19 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 import * as React19 from "react";
 import { useState as useState10 } from "react";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
-import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
+import { PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField as SearchField2 } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
 import { __ as __15, sprintf } from "@wordpress/i18n";
 
 // src/components/ui/empty-state.tsx
-import * as React16 from "react";
-import { Button as Button6, Stack as Stack5, Typography as Typography7 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import * as React17 from "react";
+import { Button as Button6, Stack as Stack6, Typography as Typography8 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 var EmptyState = ({ icon, title, message, onAdd }) => {
   const canAdd = usePermissions().canAdd();
-  return /* @__PURE__ */ React16.createElement(
-    Stack5,
+  return /* @__PURE__ */ React17.createElement(
+    Stack6,
     {
       gap: 1,
       alignItems: "center",
@@ -2101,29 +2141,29 @@ 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(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React16.createElement(
+    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React17.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __13("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
       Content,
       {
-        title: __12("There are no variables", "elementor"),
-        message: __12("With your current role, you can only connect and detach variables.", "elementor")
+        title: __13("There are no variables", "elementor"),
+        message: __13("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(Typography7, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/menu-item-content.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography8 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography9 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
     Box3,
     {
       sx: {
@@ -2134,29 +2174,29 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(
       EllipsisWithTooltip2,
       {
         title: item.label || item.value,
-        as: Typography8,
+        as: Typography9,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React17.createElement(
+    item.secondaryText && /* @__PURE__ */ React18.createElement(
       EllipsisWithTooltip2,
       {
         title: item.secondaryText,
-        as: Typography8,
+        as: Typography9,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React17.createElement(
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2164,34 +2204,12 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __13("Edit", "elementor")
+      "aria-label": __14("Edit", "elementor")
     },
-    /* @__PURE__ */ React17.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React18.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
   ));
 };
 
-// src/components/ui/no-search-results.tsx
-import * as React18 from "react";
-import { Link, Stack as Stack6, Typography as Typography9 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React18.createElement(
-    Stack6,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React18.createElement(Typography9, { align: "center", variant: "subtitle2" }, __14("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React18.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React18.createElement(Typography9, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __14("Try something else.", "elementor"), /* @__PURE__ */ React18.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __14("Clear & try again", "elementor")))
-  );
-};
-
 // src/components/ui/styled-menu-list.tsx
 import { MenuList, styled as styled2 } from "@elementor/ui";
 var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
@@ -2293,7 +2311,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       actions
     }
   ), hasVariables && /* @__PURE__ */ React19.createElement(
-    PopoverSearch,
+    SearchField2,
     {
       value: searchValue,
       onSearch: handleSearch,