@elementor/editor-variables 4.1.0-686 → 4.1.0-688

package/dist/index.mjs

@@ -5,201 +5,11 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 import { controlActionsMenu } from "@elementor/menus";
 
-// src/components/open-panel-from-event.tsx
-import { useEffect as useEffect4, useRef as useRef7, useState as useState7 } from "react";
-import {
-  __privateListenTo as listenTo,
-  __privateOpenRoute as openRoute,
-  routeOpenEvent
-} from "@elementor/editor-v1-adapters";
-
-// src/components/variables-manager/variables-manager-panel.tsx
-import * as React14 from "react";
-import { useCallback as useCallback6, useEffect as useEffect3, useState as useState6 } from "react";
-import { useSuppressedMessage } from "@elementor/editor-current-user";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
-import {
-  Alert,
-  AlertAction,
-  AlertTitle,
-  Button as Button2,
-  CloseButton,
-  Divider,
-  Infotip,
-  Stack as Stack6,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/events";
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
-};
-var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  const eventData = {
-    location: config?.locations?.variablesManager || "",
-    trigger: config?.triggers?.click || "",
-    action_type: name
-  };
-  if (varType) {
-    eventData.var_type = varType;
-  }
-  if (controlPath) {
-    eventData.style_control_path = controlPath;
-  }
-  dispatchEvent?.(name, eventData);
-};
-
-// src/utils/validations.ts
-import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
-import { __, sprintf } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __("There was a glitch. Try saving your variable again.", "elementor"),
-  BATCH: {
-    DUPLICATED_LABELS: (count, name) => (
-      // eslint-disable-next-line @wordpress/i18n-translator-comments
-      sprintf(__("We found %1$d duplicated %2$s.", "elementor"), count, name)
-    ),
-    UNEXPECTED_ERROR: __("There was a glitch.", "elementor"),
-    DUPLICATED_LABEL_ACTION: __("Take me there", "elementor"),
-    DUPLICATED_LABEL_ACTION_MESSAGE: __("Please rename the variables.", "elementor"),
-    UNEXPECTED_ERROR_ACTION_MESSAGE: __("Try saving your variables again.", "elementor")
-  }
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
-    };
-  }
-  if (error?.response?.data?.code === "batch_duplicated_label") {
-    const errorData = error?.response?.data?.data ?? {};
-    const count = Object.keys(errorData).length;
-    const name = count === 1 ? "name" : "names";
-    const duplicatedIds = Object.keys(errorData);
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
-      severity: "error",
-      IconComponent: AlertTriangleFilledIcon,
-      action: {
-        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
-        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
-        data: {
-          duplicatedIds
-        }
-      }
-    };
-  }
-  if (error?.response?.data?.code === "batch_operation_failed") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
-      severity: "secondary",
-      IconComponent: InfoCircleFilledIcon,
-      action: {
-        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
-      }
-    };
-  }
-  return void 0;
-};
-var validateLabel = (name, variables) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
-    return ERROR_MESSAGES.DUPLICATED_LABEL;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
-  }
-  return "";
-};
-
-// src/variables-registry/create-variable-type-registry.ts
-import {
-  stylesInheritanceTransformersRegistry,
-  styleTransformersRegistry
-} from "@elementor/editor-canvas";
-
-// src/transformers/inheritance-transformer.tsx
-import * as React from "react";
-import { createTransformer } from "@elementor/editor-canvas";
-import { Stack, Typography } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-
-// src/components/ui/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
+// src/components/global-styles-import-listener.tsx
+import { useEffect } from "react";
 
 // src/service.ts
-import { __ as __2 } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -364,9 +174,9 @@ var Storage = class {
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
 // src/prop-types/font-variable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils("global-font-variable", z.string());
 
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
@@ -478,7 +288,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 || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -500,7 +310,7 @@ var service = {
     return apiClient.update(id2, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -609,6 +419,223 @@ var handleWatermark = (operation, newWatermark) => {
   storage.watermark(newWatermark);
 };
 
+// src/components/global-styles-import-listener.tsx
+function GlobalStylesImportListener() {
+  useEffect(() => {
+    const handleGlobalStylesImported = (event) => {
+      const importedVars = event.detail?.global_variables;
+      if (!importedVars) {
+        return;
+      }
+      if (importedVars.data && typeof importedVars.data === "object") {
+        styleVariablesRepository.update(importedVars.data);
+      }
+      service.load();
+    };
+    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    return () => {
+      window.removeEventListener(
+        "elementor/global-styles/imported",
+        handleGlobalStylesImported
+      );
+    };
+  }, []);
+  return null;
+}
+
+// src/components/open-panel-from-event.tsx
+import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import {
+  __privateListenTo as listenTo,
+  __privateOpenRoute as openRoute,
+  routeOpenEvent
+} from "@elementor/editor-v1-adapters";
+
+// src/components/variables-manager/variables-manager-panel.tsx
+import * as React14 from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useSuppressedMessage } from "@elementor/editor-current-user";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
+import {
+  Alert,
+  AlertAction,
+  AlertTitle,
+  Button as Button2,
+  CloseButton,
+  Divider,
+  Infotip,
+  Stack as Stack6,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/events";
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
+
+// src/utils/validations.ts
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
+import { __ as __2, sprintf } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __2("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __2("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __2("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __2("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __2("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __2("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __2("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      sprintf(__2("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: __2("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: __2("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: __2("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: __2("Try saving your variables again.", "elementor")
+  }
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  if (error?.response?.data?.code === "batch_duplicated_label") {
+    const errorData = error?.response?.data?.data ?? {};
+    const count = Object.keys(errorData).length;
+    const name = count === 1 ? "name" : "names";
+    const duplicatedIds = Object.keys(errorData);
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
+
+// src/variables-registry/create-variable-type-registry.ts
+import {
+  stylesInheritanceTransformersRegistry,
+  styleTransformersRegistry
+} from "@elementor/editor-canvas";
+
+// src/transformers/inheritance-transformer.tsx
+import * as React from "react";
+import { createTransformer } from "@elementor/editor-canvas";
+import { Stack, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils2("global-color-variable", z2.string());
+
 // src/transformers/utils/resolve-css-variable.ts
 var resolveCssVariable = (id2, variable) => {
   let name = id2;
@@ -1275,7 +1302,7 @@ var getDefaultName = (variables, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 import * as React13 from "react";
-import { useEffect as useEffect2, useRef as useRef6 } from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
 import {
   Table,
   TableBody,
@@ -1400,7 +1427,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1428,10 +1455,10 @@ var VariableEditableCell = React10.memo(
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    useEffect(() => {
+    useEffect2(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    useEffect(() => {
+    useEffect2(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1772,7 +1799,7 @@ var VariablesManagerTable = ({
 }) => {
   const tableContainerRef = useRef6(null);
   const variableRowRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  useEffect3(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -2164,7 +2191,7 @@ function VariablesManagerPanel() {
   )));
 }
 var usePreventUnload = (isDirty) => {
-  useEffect3(() => {
+  useEffect4(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2202,13 +2229,13 @@ function OpenPanelFromEvent() {
   const { open } = usePanelActions();
   const pendingRef = useRef7(false);
   const [readyToOpen, setReadyToOpen] = useState7(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (readyToOpen) {
       setReadyToOpen(false);
       open();
     }
   }, [readyToOpen, open]);
-  useEffect4(() => {
+  useEffect5(() => {
     return listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
       if (pendingRef.current) {
         pendingRef.current = false;
@@ -2216,7 +2243,7 @@ function OpenPanelFromEvent() {
       }
     });
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const handler = () => {
       pendingRef.current = true;
       openRoute(DEFAULT_PANEL_ROUTE);
@@ -2228,7 +2255,7 @@ function OpenPanelFromEvent() {
 }
 
 // src/components/open-panel-from-url.tsx
-import { useEffect as useEffect5, useRef as useRef8 } from "react";
+import { useEffect as useEffect6, useRef as useRef8 } from "react";
 import { __privateListenTo as listenTo2, routeOpenEvent as routeOpenEvent2 } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "variables-manager";
@@ -2236,7 +2263,7 @@ var DEFAULT_PANEL_ROUTE2 = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
   const hasOpened = useRef8(false);
-  useEffect5(() => {
+  useEffect6(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2488,7 +2515,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect6, useState as useState11 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2565,7 +2592,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const userPermissions = usePermissions();
   const [value, setValue] = useState11(() => variable.value);
   const [label, setLabel] = useState11(() => variable.label);
-  useEffect6(() => {
+  useEffect7(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2729,7 +2756,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 import * as React21 from "react";
 import { trackUpgradePromotionClick as trackUpgradePromotionClick2, trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
@@ -2919,7 +2946,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (disabled) {
       trackViewPromotion2({
         target_name: "variables_popover",
@@ -4015,7 +4042,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect8, useState as useState20 } from "react";
+import { useEffect as useEffect9, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent,
@@ -4039,7 +4066,7 @@ function usePortalContainer() {
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState20({});
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4137,6 +4164,10 @@ function init() {
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
+  injectIntoLogic({
+    id: "variables-import-listener",
+    component: GlobalStylesImportListener
+  });
   injectIntoLogic({
     id: "variables-open-panel-from-url",
     component: OpenPanelFromUrl