@elementor/editor-variables 3.32.0-64 → 3.32.0-66

package/dist/index.mjs

@@ -392,11 +392,22 @@ function createVariableTypeRegistry() {
     variableType,
     selectionFilter,
     valueTransformer,
-    fallbackPropTypeUtil
+    fallbackPropTypeUtil,
+    isCompatible
   }) => {
     if (variableTypes[propTypeUtil.key]) {
       throw new Error(`Variable with key "${propTypeUtil.key}" is already registered.`);
     }
+    if (!isCompatible) {
+      isCompatible = (propType, variable) => {
+        if ("union" === propType.kind) {
+          if (variable.type in propType.prop_types) {
+            return true;
+          }
+        }
+        return false;
+      };
+    }
     variableTypes[propTypeUtil.key] = {
       icon,
       startIcon,
@@ -405,7 +416,8 @@ function createVariableTypeRegistry() {
       variableType,
       selectionFilter,
       valueTransformer,
-      fallbackPropTypeUtil
+      fallbackPropTypeUtil,
+      isCompatible
     };
     registerTransformer(propTypeUtil.key);
     registerInheritanceTransformer(propTypeUtil.key);
@@ -865,8 +877,8 @@ var usePreventUnload = (isDirty) => {
 };
 
 // src/controls/variable-control.tsx
-import * as React29 from "react";
-import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+import * as React32 from "react";
+import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
 import { useId as useId2, useRef } from "react";
@@ -2061,19 +2073,29 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   )));
 };
 
-// src/components/ui/variable/missing-variable.tsx
+// src/components/ui/variable/mismatch-variable.tsx
 import * as React28 from "react";
-import { useState as useState12 } from "react";
+import { useId as useId4, useRef as useRef3, useState as useState12 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop2, Infotip as Infotip2 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infotip as Infotip2, Popover as Popover3, usePopupState as usePopupState4 } from "@elementor/ui";
 
-// src/components/ui/missing-variable-alert.tsx
+// src/components/ui/mismatch-variable-alert.tsx
 import * as React26 from "react";
 import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
 import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
-var MissingVariableAlert = ({ onClose, onClear }) => {
+var i18n = {
+  title: __19("Variable has changed", "elementor"),
+  message: __19(
+    `This variable is no longer compatible with this property. You can clear it or select a different one.`,
+    "elementor"
+  ),
+  buttons: {
+    clear: __19("Clear", "elementor"),
+    select: __19("Select variable", "elementor")
+  }
+};
+var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
   const sectionWidth = useSectionWidth2();
   return /* @__PURE__ */ React26.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
     Alert3,
@@ -2081,22 +2103,23 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       variant: "standard",
       severity: "warning",
       onClose,
-      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "contained", onClick: onClear }, __19("Clear", "elementor"))),
-      sx: { width: sectionWidth }
+      action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
+      sx: {
+        width: sectionWidth,
+        minWidth: 300
+      }
     },
-    /* @__PURE__ */ React26.createElement(AlertTitle2, null, __19("This variable is missing", "elementor")),
-    __19(
-      "It may have been deleted. Try clearing this field and select a different value or variable.",
-      "elementor"
-    )
+    /* @__PURE__ */ React26.createElement(AlertTitle2, null, i18n.title),
+    i18n.message
   ));
 };
 
-// src/components/ui/tags/missing-tag.tsx
+// src/components/ui/tags/mismatch-tag.tsx
 import * as React27 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
-import { Chip as Chip2 } from "@elementor/ui";
-var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
+import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography9 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
+var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React27.createElement(
     Chip2,
     {
@@ -2107,6 +2130,136 @@ var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon3, null),
+      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography9, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography9, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __20("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 } = useBoundProp9();
+  const anchorRef = useRef3(null);
+  const popupId = useId4();
+  const popupState = usePopupState4({
+    variant: "popover",
+    popupId: `elementor-variables-list-${popupId}`
+  });
+  const [infotipVisible, setInfotipVisible] = useState12(false);
+  const toggleInfotip = () => setInfotipVisible((prev) => !prev);
+  const closeInfotip = () => setInfotipVisible(false);
+  const triggerSelect = () => {
+    closeInfotip();
+    popupState.setAnchorEl(anchorRef.current);
+    popupState.open();
+  };
+  const clearValue = () => {
+    closeInfotip();
+    setValue(null);
+  };
+  return /* @__PURE__ */ React28.createElement(Box9, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+    Infotip2,
+    {
+      color: "warning",
+      placement: "right-start",
+      open: infotipVisible,
+      disableHoverListener: true,
+      onClose: closeInfotip,
+      content: /* @__PURE__ */ React28.createElement(
+        MismatchVariableAlert,
+        {
+          onClose: closeInfotip,
+          onClear: clearValue,
+          triggerSelect
+        }
+      ),
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [0, 24] }
+            }
+          ]
+        }
+      }
+    },
+    /* @__PURE__ */ React28.createElement(MismatchTag, { label: variable.label, onClick: toggleInfotip })
+  ), /* @__PURE__ */ React28.createElement(
+    Popover3,
+    {
+      disableScrollLock: true,
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      ...bindPopover3(popupState)
+    },
+    /* @__PURE__ */ React28.createElement(
+      VariableSelectionPopover,
+      {
+        selectedVariable: variable,
+        closePopover: popupState.close,
+        propTypeKey: variable.type
+      }
+    )
+  ));
+};
+
+// src/components/ui/variable/missing-variable.tsx
+import * as React31 from "react";
+import { useState as useState13 } from "react";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+import { Backdrop as Backdrop3, Infotip as Infotip3 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+
+// src/components/ui/missing-variable-alert.tsx
+import * as React29 from "react";
+import { useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
+import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var MissingVariableAlert = ({ onClose, onClear }) => {
+  const sectionWidth = useSectionWidth3();
+  return /* @__PURE__ */ React29.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
+    Alert4,
+    {
+      variant: "standard",
+      severity: "warning",
+      onClose,
+      action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __21("Clear", "elementor"))),
+      sx: { width: sectionWidth }
+    },
+    /* @__PURE__ */ React29.createElement(AlertTitle3, null, __21("This variable is missing", "elementor")),
+    __21(
+      "It may have been deleted. Try clearing this field and select a different value or variable.",
+      "elementor"
+    )
+  ));
+};
+
+// src/components/ui/tags/missing-tag.tsx
+import * as React30 from "react";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } from "@elementor/icons";
+import { Chip as Chip3 } from "@elementor/ui";
+var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ React30.createElement(
+    Chip3,
+    {
+      ref,
+      size: "tiny",
+      color: "warning",
+      shape: "rounded",
+      variant: "standard",
+      onClick,
+      icon: /* @__PURE__ */ React30.createElement(AlertTriangleFilledIcon4, null),
       label,
       sx: {
         height: (theme) => theme.spacing(3.5),
@@ -2121,20 +2274,20 @@ var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
-  const { setValue } = useBoundProp9();
-  const [infotipVisible, setInfotipVisible] = useState12(false);
+  const { setValue } = useBoundProp10();
+  const [infotipVisible, setInfotipVisible] = useState13(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
-    Infotip2,
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, infotipVisible && /* @__PURE__ */ React31.createElement(Backdrop3, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React31.createElement(
+    Infotip3,
     {
       color: "warning",
       placement: "right-start",
       open: infotipVisible,
       disableHoverListener: true,
       onClose: closeInfotip,
-      content: /* @__PURE__ */ React28.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
+      content: /* @__PURE__ */ React31.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
       slotProps: {
         popper: {
           modifiers: [
@@ -2146,42 +2299,47 @@ var MissingVariable = () => {
         }
       }
     },
-    /* @__PURE__ */ React28.createElement(MissingTag, { label: __20("Missing variable", "elementor"), onClick: toggleInfotip })
+    /* @__PURE__ */ React31.createElement(MissingTag, { label: __22("Missing variable", "elementor"), onClick: toggleInfotip })
   ));
 };
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
-  const boundProp = useBoundProp10().value;
-  const assignedVariable = useVariable(boundProp?.value);
+  const boundProp = useBoundProp11();
+  const boundPropValue = boundProp.value;
+  const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
-    return /* @__PURE__ */ React29.createElement(MissingVariable, null);
+    return /* @__PURE__ */ React32.createElement(MissingVariable, null);
   }
-  const { $$type: propTypeKey } = boundProp;
+  const { $$type: propTypeKey } = boundPropValue;
   if (assignedVariable?.deleted) {
-    return /* @__PURE__ */ React29.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
+    return /* @__PURE__ */ React32.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
   }
-  return /* @__PURE__ */ React29.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
+  const { isCompatible } = getVariableType(assignedVariable.type);
+  if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
+    return /* @__PURE__ */ React32.createElement(MismatchVariable, { variable: assignedVariable });
+  }
+  return /* @__PURE__ */ React32.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
 };
 
 // src/hooks/use-prop-variable-action.tsx
-import * as React30 from "react";
-import { useBoundProp as useBoundProp11 } from "@elementor/editor-editing-panel";
+import * as React33 from "react";
+import { useBoundProp as useBoundProp12 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon4 } from "@elementor/icons";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
-  const { propType, path } = useBoundProp11();
+  const { propType, path } = useBoundProp12();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),
     icon: ColorFilterIcon4,
-    title: __21("Variables", "elementor"),
+    title: __23("Variables", "elementor"),
     content: ({ close: closePopover }) => {
       if (!variable) {
         return null;
       }
       trackOpenVariablePopover(path, variable.variableType);
-      return /* @__PURE__ */ React30.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
+      return /* @__PURE__ */ React33.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
     }
   };
 };
@@ -2206,18 +2364,18 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/register-variable-types.tsx
-import * as React33 from "react";
+import * as React36 from "react";
 import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
-import * as React31 from "react";
-import { useRef as useRef3, useState as useState13 } from "react";
+import * as React34 from "react";
+import { useRef as useRef4, useState as useState14 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState13(value);
-  const [errorMessage, setErrorMessage] = useState13("");
-  const defaultRef = useRef3(null);
+  const [color, setColor] = useState14(value);
+  const [errorMessage, setErrorMessage] = useState14("");
+  const defaultRef = useRef4(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -2226,7 +2384,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
     onValidationChange?.(errorMsg);
     onChange(errorMsg ? "" : newValue);
   };
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React34.createElement(
     UnstableColorField,
     {
       size: "tiny",
@@ -2246,21 +2404,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/components/fields/font-field.tsx
-import * as React32 from "react";
-import { useId as useId4, useRef as useRef4, useState as useState14 } from "react";
+import * as React35 from "react";
+import { useId as useId5, useRef as useRef5, useState as useState15 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
-import { useFontFamilies, useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
+import { useFontFamilies, useSectionWidth as useSectionWidth4 } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
-import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Popover as Popover3, UnstableTag, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag, usePopupState as usePopupState5 } from "@elementor/ui";
+import { __ as __24 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState14(value);
-  const defaultRef = useRef4(null);
+  const [fontFamily, setFontFamily] = useState15(value);
+  const defaultRef = useRef5(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
-  const fontPopoverState = usePopupState4({ variant: "popover" });
+  const fontPopoverState = usePopupState5({ variant: "popover" });
   const fontFamilies = useFontFamilies();
-  const sectionWidth = useSectionWidth3();
-  const mapFontSubs = React32.useMemo(() => {
+  const sectionWidth = useSectionWidth4();
+  const mapFontSubs = React35.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -2276,28 +2434,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = useId4();
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
+  const id2 = useId5();
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
     UnstableTag,
     {
       id: id2,
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React32.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React35.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger3(fontPopoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React32.createElement(
-    Popover3,
+  ), /* @__PURE__ */ React35.createElement(
+    Popover4,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorEl: anchorRef,
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: -28 },
-      ...bindPopover3(fontPopoverState)
+      ...bindPopover4(fontPopoverState)
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React35.createElement(
       ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -2305,7 +2463,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
         onItemChange: handleFontFamilyChange,
         onClose: fontPopoverState.close,
         sectionWidth,
-        title: __22("Font Family", "elementor"),
+        title: __24("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont2,
         icon: TextIcon
@@ -2322,7 +2480,7 @@ function registerVariableTypes() {
     propTypeUtil: colorVariablePropTypeUtil,
     fallbackPropTypeUtil: colorPropTypeUtil,
     variableType: "color",
-    startIcon: ({ value }) => /* @__PURE__ */ React33.createElement(ColorIndicator, { size: "inherit", component: "span", value })
+    startIcon: ({ value }) => /* @__PURE__ */ React36.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
   registerVariableType({
     valueField: FontField,
@@ -2334,8 +2492,8 @@ function registerVariableTypes() {
 }
 
 // src/renderers/style-variables-renderer.tsx
-import * as React34 from "react";
-import { useEffect as useEffect3, useState as useState15 } from "react";
+import * as React37 from "react";
+import { useEffect as useEffect3, useState as useState16 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -2356,13 +2514,13 @@ function StyleVariablesRenderer() {
   }
   const cssVariables = convertToCssVariables(styleVariables);
   const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
-  return /* @__PURE__ */ React34.createElement(Portal, { container }, /* @__PURE__ */ React34.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+  return /* @__PURE__ */ React37.createElement(Portal, { container }, /* @__PURE__ */ React37.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState15({});
+  const [variables, setVariables] = useState16({});
   useEffect3(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
@@ -2386,22 +2544,22 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
-import * as React35 from "react";
+import * as React38 from "react";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React38.createElement("span", null, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+  return /* @__PURE__ */ React38.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 
 // src/repeater-injections.ts