@elementor/editor-variables 3.33.0-178 → 3.33.0-180

package/dist/index.js

@@ -48,11 +48,12 @@ var import_react11 = 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_icons6 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/utils/validations.ts
+var import_icons = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
 var ERROR_MESSAGES = {
   MISSING_VARIABLE_NAME: (0, import_i18n.__)("Give your variable a name.", "elementor"),
@@ -67,7 +68,7 @@ var ERROR_MESSAGES = {
       // eslint-disable-next-line @wordpress/i18n-translator-comments
       (0, import_i18n.sprintf)((0, import_i18n.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
     ),
-    UNEXPECTED_ERROR: (0, import_i18n.__)("The save didn\u2019t go through.", "elementor"),
+    UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch.", "elementor"),
     DUPLICATED_LABEL_ACTION: (0, import_i18n.__)("Take me there", "elementor"),
     DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n.__)("Please rename the variables.", "elementor"),
     UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n.__)("Try saving your variables again.", "elementor")
@@ -89,6 +90,8 @@ var mapServerError = (error) => {
     return {
       field: "label",
       message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: import_icons.AlertTriangleFilledIcon,
       action: {
         label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
         message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
@@ -101,7 +104,12 @@ var mapServerError = (error) => {
   if (error?.response?.data?.code === "batch_operation_failed") {
     return {
       field: "label",
-      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: import_icons.InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
     };
   }
   return void 0;
@@ -142,7 +150,7 @@ var validateValue = (value) => {
 
 // src/components/ui/delete-confirmation-dialog.tsx
 var React = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
+var import_icons2 = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
 var TITLE_ID = "delete-variable-dialog";
@@ -152,7 +160,7 @@ var DeleteConfirmationDialog = ({
   closeDialog,
   onConfirm
 }) => {
-  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_i18n2.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n2.__)("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_i18n2.__)("Not now", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
+  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_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n2.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React.createElement(import_ui.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n2.__)("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_i18n2.__)("Not now", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
 };
 
 // src/components/ui/empty-state.tsx
@@ -974,7 +982,7 @@ var useVariablesManagerState = () => {
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var React6 = __toESM(require("react"));
 var import_react6 = require("react");
-var import_icons2 = require("@elementor/icons");
+var import_icons3 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 var SIZE = "tiny";
@@ -1007,7 +1015,7 @@ var VariableManagerCreateMenu = ({
       size: SIZE,
       "aria-label": (0, import_i18n7.__)("Add variable", "elementor")
     },
-    /* @__PURE__ */ React6.createElement(import_icons2.PlusIcon, { fontSize: SIZE })
+    /* @__PURE__ */ React6.createElement(import_icons3.PlusIcon, { fontSize: SIZE })
   ), /* @__PURE__ */ React6.createElement(
     import_ui6.Menu,
     {
@@ -1065,7 +1073,7 @@ var getDefaultName = (variables, type, baseName) => {
 var React11 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
+var import_icons5 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
@@ -1150,13 +1158,13 @@ var LabelField = ({
 // src/components/variables-manager/ui/variable-edit-menu.tsx
 var React8 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_icons3 = require("@elementor/icons");
+var import_icons4 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   const menuState = (0, import_ui8.usePopupState)({
     variant: "popover"
   });
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { ...(0, import_ui8.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React8.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { ...(0, import_ui8.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React8.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React8.createElement(
     import_ui8.Menu,
     {
       disablePortal: true,
@@ -1467,7 +1475,7 @@ var VariablesManagerTable = ({
                 disabled: isSorting,
                 draggable: true
               },
-              /* @__PURE__ */ React11.createElement(import_icons4.GripVerticalIcon, { fontSize: "inherit" })
+              /* @__PURE__ */ React11.createElement(import_icons5.GripVerticalIcon, { fontSize: "inherit" })
             )),
             /* @__PURE__ */ React11.createElement(VariableTableCell, null, /* @__PURE__ */ React11.createElement(
               VariableEditableCell,
@@ -1682,7 +1690,7 @@ function VariablesManagerPanel() {
   const menuActions = [
     {
       name: (0, import_i18n9.__)("Delete", "elementor"),
-      icon: import_icons5.TrashIcon,
+      icon: import_icons6.TrashIcon,
       color: "error.main",
       onClick: (itemId) => {
         if (variables[itemId]) {
@@ -1699,7 +1707,7 @@ function VariablesManagerPanel() {
         height: "unset"
       }
     },
-    /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n9.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n9.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React12.createElement(
       VariableManagerCreateMenu,
       {
         onCreate: handleCreateVariable,
@@ -1752,7 +1760,7 @@ function VariablesManagerPanel() {
       {
         searchValue,
         onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" })
+        icon: /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" })
       }
     ),
     !hasVariables && !searchValue && /* @__PURE__ */ React12.createElement(
@@ -1763,7 +1771,7 @@ function VariablesManagerPanel() {
           "Variables are saved attributes that you can apply anywhere on your site.",
           "elementor"
         ),
-        icon: /* @__PURE__ */ React12.createElement(import_icons5.ColorFilterIcon, { fontSize: "large" }),
+        icon: /* @__PURE__ */ React12.createElement(import_icons6.ColorFilterIcon, { fontSize: "large" }),
         onAdd: createMenuState.open
       }
     )
@@ -1775,9 +1783,13 @@ function VariablesManagerPanel() {
       content: serverError ? /* @__PURE__ */ React12.createElement(
         import_ui12.Alert,
         {
-          severity: "error",
-          action: serverError.action ? /* @__PURE__ */ React12.createElement(import_ui12.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
-          icon: /* @__PURE__ */ React12.createElement(import_icons5.AlertTriangleFilledIcon, null)
+          severity: serverError.severity ?? "error",
+          action: serverError.action?.label ? /* @__PURE__ */ React12.createElement(import_ui12.AlertAction, { onClick: serverError.action.callback }, serverError.action.label) : void 0,
+          onClose: !serverError.action?.label ? () => {
+            setServerError(null);
+            setIsSaveDisabled(false);
+          } : void 0,
+          icon: serverError.IconComponent ? /* @__PURE__ */ React12.createElement(serverError.IconComponent, null) : /* @__PURE__ */ React12.createElement(import_icons6.AlertTriangleFilledIcon, null)
         },
         /* @__PURE__ */ React12.createElement(import_ui12.AlertTitle, null, serverError.message),
         serverError.action?.message
@@ -1862,7 +1874,7 @@ var import_editor_controls11 = require("@elementor/editor-controls");
 var import_react18 = require("react");
 var React22 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_icons12 = require("@elementor/icons");
+var import_icons13 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
 
 // src/utils/unlink-variable.ts
@@ -1905,7 +1917,7 @@ var import_react13 = 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_icons7 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 
@@ -2038,7 +2050,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n10.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons6.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
+      icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n10.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
       title: (0, import_i18n10.__)("Create variable", "elementor"),
       onClose: closePopover
     }
@@ -2100,14 +2112,14 @@ 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_icons9 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React16 = __toESM(require("react"));
 var import_react14 = require("react");
-var import_icons7 = require("@elementor/icons");
+var import_icons8 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
@@ -2123,7 +2135,7 @@ var EditConfirmationDialog = ({
     }
     onConfirm?.();
   };
-  return /* @__PURE__ */ React16.createElement(import_ui16.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(import_ui16.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n11.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui16.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n11.__)(
+  return /* @__PURE__ */ React16.createElement(import_ui16.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React16.createElement(import_ui16.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n11.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React16.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui16.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n11.__)(
     "Don't worry - all other changes you make will wait until you publish your site.",
     "elementor"
   ))), /* @__PURE__ */ React16.createElement(import_ui16.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React16.createElement(
@@ -2225,7 +2237,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React17.createElement(import_ui17.Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_ui17.IconButton, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_icons8.TrashIcon, { fontSize: SIZE3 })))
+      /* @__PURE__ */ React17.createElement(import_ui17.Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_ui17.IconButton, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React17.createElement(import_icons9.TrashIcon, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2256,7 +2268,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
           "aria-label": (0, import_i18n12.__)("Go Back", "elementor"),
           onClick: onGoBack
         },
-        /* @__PURE__ */ React17.createElement(import_icons8.ArrowLeftIcon, { fontSize: SIZE3 })
+        /* @__PURE__ */ React17.createElement(import_icons9.ArrowLeftIcon, { fontSize: SIZE3 })
       ), /* @__PURE__ */ React17.createElement(VariableIcon, { fontSize: SIZE3 })),
       actions
     }
@@ -2321,14 +2333,14 @@ var React19 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons10 = require("@elementor/icons");
+var import_icons11 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
 var React18 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
+var import_icons10 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
@@ -2378,7 +2390,7 @@ var MenuItemContent = ({ item }) => {
       },
       "aria-label": EDIT_LABEL
     },
-    /* @__PURE__ */ React18.createElement(import_icons9.EditIcon, { color: "action", fontSize: SIZE4 })
+    /* @__PURE__ */ React18.createElement(import_icons10.EditIcon, { color: "action", fontSize: SIZE4 })
   )));
 };
 
@@ -2456,7 +2468,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
           onClick: onAddAndTrack,
           "aria-label": CREATE_LABEL
         },
-        /* @__PURE__ */ React19.createElement(import_icons10.PlusIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React19.createElement(import_icons11.PlusIcon, { fontSize: SIZE5 })
       ))
     );
   }
@@ -2470,7 +2482,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
           onClick: onSettings,
           "aria-label": MANAGER_LABEL
         },
-        /* @__PURE__ */ React19.createElement(import_icons10.SettingsIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React19.createElement(import_icons11.SettingsIcon, { fontSize: SIZE5 })
       ))
     );
   }
@@ -2498,7 +2510,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     import_editor_ui7.PopoverHeader,
     {
       title: (0, import_i18n14.__)("Variables", "elementor"),
-      icon: /* @__PURE__ */ React19.createElement(import_icons10.ColorFilterIcon, { fontSize: SIZE5 }),
+      icon: /* @__PURE__ */ React19.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }),
       onClose: closePopover,
       actions
     }
@@ -2639,7 +2651,7 @@ function RenderView(props) {
 
 // src/components/ui/tags/assigned-tag.tsx
 var React21 = __toESM(require("react"));
-var import_icons11 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_ui21 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
@@ -2648,7 +2660,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React21.createElement(import_ui21.IconButton, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React21.createElement(import_icons11.DetachIcon, { fontSize: SIZE6 })))
+      /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React21.createElement(import_ui21.IconButton, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React21.createElement(import_icons12.DetachIcon, { fontSize: SIZE6 })))
     );
   }
   return /* @__PURE__ */ React21.createElement(import_ui21.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
@@ -2680,7 +2692,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
     AssignedTag,
     {
       label: variable.label,
-      startIcon: /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_icons12.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React22.createElement(StartIcon, { value: variable.value })),
+      startIcon: /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_icons13.ColorFilterIcon, { fontSize: SIZE6 }), /* @__PURE__ */ React22.createElement(StartIcon, { value: variable.value })),
       onUnlink: unlinkVariable,
       ...(0, import_ui22.bindTrigger)(popupState)
     }
@@ -2844,7 +2856,7 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 
 // src/components/ui/tags/warning-variable-tag.tsx
 var React25 = __toESM(require("react"));
-var import_icons13 = require("@elementor/icons");
+var import_icons14 = require("@elementor/icons");
 var import_ui25 = require("@elementor/ui");
 var WarningVariableTag = React25.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
@@ -2858,7 +2870,7 @@ var WarningVariableTag = React25.forwardRef(
         shape: "rounded",
         variant: "standard",
         onClick,
-        icon: /* @__PURE__ */ React25.createElement(import_icons13.AlertTriangleFilledIcon, null),
+        icon: /* @__PURE__ */ React25.createElement(import_icons14.AlertTriangleFilledIcon, null),
         label: /* @__PURE__ */ React25.createElement(import_ui25.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui25.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(import_ui25.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
@@ -3166,14 +3178,14 @@ var VariableControl = () => {
 // src/hooks/use-prop-variable-action.tsx
 var React32 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_icons14 = require("@elementor/icons");
+var import_icons15 = require("@elementor/icons");
 var import_i18n23 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel6.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons14.ColorFilterIcon,
+    icon: import_icons15.ColorFilterIcon,
     title: (0, import_i18n23.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
@@ -3459,7 +3471,7 @@ function initMcp() {
 // src/register-variable-types.tsx
 var React35 = __toESM(require("react"));
 var import_editor_props4 = require("@elementor/editor-props");
-var import_icons16 = require("@elementor/icons");
+var import_icons17 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
 var React33 = __toESM(require("react"));
@@ -3510,7 +3522,7 @@ var React34 = __toESM(require("react"));
 var import_react24 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_icons15 = require("@elementor/icons");
+var import_icons16 = require("@elementor/icons");
 var import_ui32 = require("@elementor/ui");
 var import_i18n24 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
@@ -3543,7 +3555,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React34.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React34.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
       ...(0, import_ui32.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
@@ -3569,7 +3581,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         title: (0, import_i18n24.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
-        icon: import_icons15.TextIcon
+        icon: import_icons16.TextIcon
       }
     )
   ));
@@ -3579,7 +3591,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 function registerVariableTypes() {
   registerVariableType({
     valueField: ColorField,
-    icon: import_icons16.BrushIcon,
+    icon: import_icons17.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props4.colorPropTypeUtil,
     variableType: "color",
@@ -3588,7 +3600,7 @@ function registerVariableTypes() {
   });
   registerVariableType({
     valueField: FontField,
-    icon: import_icons16.TextIcon,
+    icon: import_icons17.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props4.stringPropTypeUtil,
     variableType: "font",