@elementor/editor-variables 3.33.0-106 → 3.33.0-108

package/dist/index.js

@@ -1179,7 +1179,7 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-var React32 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
@@ -2067,6 +2067,7 @@ var React25 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_ui25 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React22 = __toESM(require("react"));
@@ -2196,33 +2197,36 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
   ));
 };
 
-// src/components/ui/tags/deleted-tag.tsx
+// src/components/ui/tags/warning-variable-tag.tsx
 var React24 = __toESM(require("react"));
 var import_icons12 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
-var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React24.createElement(
-    import_ui24.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n17.__)("deleted", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
+var WarningVariableTag = React24.forwardRef(
+  ({ label, suffix, onClick, icon, ...props }, ref) => {
+    const displayText = suffix ? `${label} (${suffix})` : label;
+    return /* @__PURE__ */ React24.createElement(
+      import_ui24.Chip,
+      {
+        ref,
+        size: "tiny",
+        color: "warning",
+        shape: "rounded",
+        variant: "standard",
+        onClick,
+        icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
+        label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: displayText, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        sx: {
+          height: (theme) => theme.spacing(3.5),
+          borderRadius: (theme) => theme.spacing(1),
+          justifyContent: "flex-start",
+          width: "100%"
+        },
+        ...props
+      }
+    );
+  }
+);
+WarningVariableTag.displayName = "WarningVariableTag";
 
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
@@ -2288,7 +2292,14 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
         }
       }
     },
-    /* @__PURE__ */ React25.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
+    /* @__PURE__ */ React25.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: (0, import_i18n17.__)("deleted", "elementor")
+      }
+    )
   ), /* @__PURE__ */ React25.createElement(
     import_ui25.Popover,
     {
@@ -2312,10 +2323,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 };
 
 // src/components/ui/variable/mismatch-variable.tsx
-var React28 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
-var import_ui28 = require("@elementor/ui");
+var import_ui27 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/ui/mismatch-variable-alert.tsx
 var React26 = __toESM(require("react"));
@@ -2347,40 +2359,12 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
   ));
 };
 
-// src/components/ui/tags/mismatch-tag.tsx
-var React27 = __toESM(require("react"));
-var import_icons13 = require("@elementor/icons");
-var import_ui27 = require("@elementor/ui");
-var import_i18n19 = require("@wordpress/i18n");
-var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React27.createElement(
-    import_ui27.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
-      label: /* @__PURE__ */ React27.createElement(import_ui27.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui27.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(import_ui27.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n19.__)("changed", "elementor"), ")"))),
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue } = (0, import_editor_controls9.useBoundProp)();
   const anchorRef = (0, import_react17.useRef)(null);
   const popupId = (0, import_react17.useId)();
-  const popupState = (0, import_ui28.usePopupState)({
+  const popupState = (0, import_ui27.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
@@ -2396,15 +2380,15 @@ var MismatchVariable = ({ variable }) => {
     closeInfotip();
     setValue(null);
   };
-  return /* @__PURE__ */ React28.createElement(import_ui28.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
-    import_ui28.Infotip,
+  return /* @__PURE__ */ React27.createElement(import_ui27.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React27.createElement(import_ui27.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
+    import_ui27.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React28.createElement(
+      content: /* @__PURE__ */ React27.createElement(
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
@@ -2423,9 +2407,16 @@ var MismatchVariable = ({ variable }) => {
         }
       }
     },
-    /* @__PURE__ */ React28.createElement(MismatchTag, { label: variable.label, onClick: toggleInfotip })
-  ), /* @__PURE__ */ React28.createElement(
-    import_ui28.Popover,
+    /* @__PURE__ */ React27.createElement(
+      WarningVariableTag,
+      {
+        label: variable.label,
+        onClick: toggleInfotip,
+        suffix: (0, import_i18n19.__)("changed", "elementor")
+      }
+    )
+  ), /* @__PURE__ */ React27.createElement(
+    import_ui27.Popover,
     {
       disableScrollLock: true,
       anchorEl: anchorRef.current,
@@ -2434,9 +2425,9 @@ var MismatchVariable = ({ variable }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui28.bindPopover)(popupState)
+      ...(0, import_ui27.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React27.createElement(
       VariableSelectionPopover,
       {
         selectedVariable: variable,
@@ -2448,61 +2439,34 @@ var MismatchVariable = ({ variable }) => {
 };
 
 // src/components/ui/variable/missing-variable.tsx
-var React31 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_react18 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
-var import_ui31 = require("@elementor/ui");
+var import_ui29 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 
 // src/components/ui/missing-variable-alert.tsx
-var React29 = __toESM(require("react"));
-var import_ui29 = require("@elementor/ui");
+var React28 = __toESM(require("react"));
+var import_ui28 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  return /* @__PURE__ */ React29.createElement(import_ui29.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
-    import_ui29.Alert,
+  return /* @__PURE__ */ React28.createElement(import_ui28.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React28.createElement(
+    import_ui28.Alert,
     {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(import_ui29.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n20.__)("Clear", "elementor"))),
+      action: /* @__PURE__ */ React28.createElement(React28.Fragment, null, onClear && /* @__PURE__ */ React28.createElement(import_ui28.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n20.__)("Clear", "elementor"))),
       sx: { maxWidth: 300 }
     },
-    /* @__PURE__ */ React29.createElement(import_ui29.AlertTitle, null, (0, import_i18n20.__)("This variable is missing", "elementor")),
-    /* @__PURE__ */ React29.createElement(import_ui29.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n20.__)(
+    /* @__PURE__ */ React28.createElement(import_ui28.AlertTitle, null, (0, import_i18n20.__)("This variable is missing", "elementor")),
+    /* @__PURE__ */ React28.createElement(import_ui28.Typography, { variant: "body2", color: "textPrimary" }, (0, import_i18n20.__)(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
     ))
   ));
 };
 
-// src/components/ui/tags/missing-tag.tsx
-var React30 = __toESM(require("react"));
-var import_icons14 = require("@elementor/icons");
-var import_ui30 = require("@elementor/ui");
-var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ React30.createElement(
-    import_ui30.Chip,
-    {
-      ref,
-      size: "tiny",
-      color: "warning",
-      shape: "rounded",
-      variant: "standard",
-      onClick,
-      icon: /* @__PURE__ */ React30.createElement(import_icons14.AlertTriangleFilledIcon, null),
-      label,
-      sx: {
-        height: (theme) => theme.spacing(3.5),
-        borderRadius: (theme) => theme.spacing(1),
-        justifyContent: "flex-start",
-        width: "100%"
-      },
-      ...props
-    }
-  );
-});
-
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls10.useBoundProp)();
@@ -2510,15 +2474,15 @@ var MissingVariable = () => {
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, infotipVisible && /* @__PURE__ */ React31.createElement(import_ui31.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
-    import_ui31.Infotip,
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, infotipVisible && /* @__PURE__ */ React29.createElement(import_ui29.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React29.createElement(
+    import_ui29.Infotip,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React31.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React29.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2530,7 +2494,7 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React31.createElement(MissingTag, { label: (0, import_i18n21.__)("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React29.createElement(WarningVariableTag, { label: (0, import_i18n21.__)("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
@@ -2540,37 +2504,37 @@ var VariableControl = () => {
   const boundPropValue = boundProp.value;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React32.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React30.createElement(MissingVariable, null);
   }
   const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React32.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React30.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
   const { isCompatible } = getVariableType(assignedVariable.type);
   if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
-    return /* @__PURE__ */ React32.createElement(MismatchVariable, { variable: assignedVariable });
+    return /* @__PURE__ */ React30.createElement(MismatchVariable, { variable: assignedVariable });
   }
-  return /* @__PURE__ */ React32.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  return /* @__PURE__ */ React30.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-var React33 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
-var import_icons15 = require("@elementor/icons");
+var import_icons13 = require("@elementor/icons");
 var import_i18n22 = require("@wordpress/i18n");
 var usePropVariableAction = () => {
   const { propType, path } = (0, import_editor_editing_panel6.useBoundProp)();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
-    icon: import_icons15.ColorFilterIcon,
+    icon: import_icons13.ColorFilterIcon,
     title: (0, import_i18n22.__)("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React33.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React31.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2595,14 +2559,14 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-var React36 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_editor_props3 = require("@elementor/editor-props");
-var import_icons17 = require("@elementor/icons");
+var import_icons15 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
-var React34 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_react19 = require("react");
-var import_ui32 = require("@elementor/ui");
+var import_ui30 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
   const [color, setColor] = (0, import_react19.useState)(value);
   const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
@@ -2615,8 +2579,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React34.createElement(
-    import_ui32.UnstableColorField,
+  return /* @__PURE__ */ React32.createElement(
+    import_ui30.UnstableColorField,
     {
       size: "tiny",
       fullWidth: true,
@@ -2643,21 +2607,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-var React35 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var import_react20 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
-var import_icons16 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
+var import_icons14 = require("@elementor/icons");
+var import_ui31 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
   const [fontFamily, setFontFamily] = (0, import_react20.useState)(value);
   const defaultRef = (0, import_react20.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = (0, import_ui33.usePopupState)({ variant: "popover" });
+  const fontPopoverState = (0, import_ui31.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_editing_panel7.useFontFamilies)();
   const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
-  const mapFontSubs = React35.useMemo(() => {
+  const mapFontSubs = React33.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2674,27 +2638,27 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     fontPopoverState.close();
   };
   const id2 = (0, import_react20.useId)();
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
-    import_ui33.UnstableTag,
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
+    import_ui31.UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React35.createElement(import_icons16.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui33.bindTrigger)(fontPopoverState),
+      endIcon: /* @__PURE__ */ React33.createElement(import_icons14.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui31.bindTrigger)(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React35.createElement(
-    import_ui33.Popover,
+  ), /* @__PURE__ */ React33.createElement(
+    import_ui31.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...(0, import_ui33.bindPopover)(fontPopoverState)
+      ...(0, import_ui31.bindPopover)(fontPopoverState)
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React33.createElement(
       import_editor_controls12.ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -2705,7 +2669,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         title: (0, import_i18n23.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: import_editor_controls12.enqueueFont,
-        icon: import_icons16.TextIcon
+        icon: import_icons14.TextIcon
       }
     )
   ));
@@ -2715,15 +2679,15 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 function registerVariableTypes() {
   registerVariableType({
     valueField: ColorField,
-    icon: import_icons17.BrushIcon,
+    icon: import_icons15.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React36.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React34.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
   registerVariableType({
     valueField: FontField,
-    icon: import_icons17.TextIcon,
+    icon: import_icons15.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
     fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
     variableType: "font"
@@ -2731,10 +2695,10 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-var React37 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_react21 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui34 = require("@elementor/ui");
+var import_ui32 = require("@elementor/ui");
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -2753,7 +2717,7 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React37.createElement(import_ui34.Portal, { container }, /* @__PURE__ */ React37.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React35.createElement(import_ui32.Portal, { container }, /* @__PURE__ */ React35.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -2783,22 +2747,22 @@ var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
-var React38 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React36.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React36.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React36.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts