@elementor/editor-controls 3.35.0-386 → 3.35.0-388

package/dist/index.mjs

@@ -2571,8 +2571,7 @@ var NumberControl = createControl(
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React56 from "react";
 import { useId as useId2, useRef as useRef8 } from "react";
-import { sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
-import { bindPopover as bindPopover3, bindToggle, Grid as Grid8, Popover as Popover3, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
+import { bindPopover as bindPopover3, bindToggle, Box as Box7, Grid as Grid8, Popover as Popover3, Stack as Stack7, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
 
 // src/components/control-label.tsx
@@ -2583,16 +2582,6 @@ var ControlLabel = ({ children, ...props }) => {
 };
 
 // src/controls/equal-unequal-sizes-control.tsx
-var isEqualSizes = (propValue, items2) => {
-  const values = Object.values(propValue);
-  if (values.length !== items2.length) {
-    return false;
-  }
-  const [firstValue, ...restValues] = values;
-  return restValues.every(
-    (value) => value?.value?.size === firstValue?.value?.size && value?.value?.unit === firstValue?.value?.unit
-  );
-};
 function EqualUnequalSizesControl({
   label,
   icon,
@@ -2602,56 +2591,60 @@ function EqualUnequalSizesControl({
 }) {
   const popupId = useId2();
   const popupState = usePopupState4({ variant: "popover", popupId });
-  const {
-    propType: multiSizePropType,
-    value: multiSizeValue,
-    setValue: setMultiSizeValue,
-    disabled: multiSizeDisabled
-  } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
   const rowRefs = [useRef8(null), useRef8(null)];
-  const splitEqualValue = () => {
-    if (!sizeValue) {
-      return null;
+  const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp(multiSizePropTypeUtil);
+  const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
+  const getMultiSizeValues = (sourceValue) => {
+    if (multiSizePropTypeUtil.isValid(sourceValue)) {
+      return sourceValue.value;
     }
-    return items2.reduce(
-      (acc, { bind }) => ({ ...acc, [bind]: sizePropTypeUtil3.create(sizeValue) }),
-      {}
-    );
+    const propValue = {};
+    items2.forEach((item) => {
+      propValue[item.bind] = sourceValue;
+    });
+    const derived = multiSizePropTypeUtil.create(propValue);
+    return derived?.value;
   };
-  const setNestedProp = (newValue) => {
-    const newMappedValues = {
-      ...multiSizeValue ?? splitEqualValue(),
-      ...newValue
-    };
-    const isEqual = isEqualSizes(newMappedValues, items2);
-    if (isEqual) {
-      return setSizeValue(Object.values(newMappedValues)[0]?.value);
-    }
-    setMultiSizeValue(newMappedValues);
+  const isShowingGeneralIndicator = !popupState.isOpen;
+  const derivedValue = getMultiSizeValues(masterValue);
+  const derivedPlaceholder = getMultiSizeValues(masterPlaceholder);
+  const isEqualValues = (values) => {
+    if (!values) {
+      return true;
+    }
+    const propValue = {};
+    items2.forEach((item) => {
+      propValue[item.bind] = values?.value?.[item.bind] ?? null;
+    });
+    const allValues = Object.values(propValue).map((value) => JSON.stringify(value));
+    return allValues.every((value) => value === allValues[0]);
   };
-  const getMultiSizeValues = () => {
-    if (multiSizeValue) {
-      return multiSizeValue;
+  const isMixedPlaceholder = !masterValue && !isEqualValues(multiSizePropTypeUtil.create(derivedPlaceholder));
+  const isMixed = isMixedPlaceholder || !isEqualValues(multiSizePropTypeUtil.create(derivedValue));
+  const applyMultiSizeValue = (newValue) => {
+    const newPropValue = multiSizePropTypeUtil.create(newValue);
+    if (isEqualValues(newPropValue)) {
+      setMasterValue(Object.values(newValue)?.pop() ?? null);
+      return;
     }
-    return splitEqualValue() ?? null;
+    setMasterValue(newPropValue);
   };
-  const isShowingGeneralIndicator = !popupState.isOpen;
-  const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React56.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React56.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React56.createElement(Box7, { flexGrow: 1 }, /* @__PURE__ */ React56.createElement(
     SizeControl,
     {
       placeholder: isMixed ? __17("Mixed", "elementor") : void 0,
+      enablePropTypeUnits: !isMixed || !isMixedPlaceholder,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React56.createElement(Tooltip5, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(
-    ToggleButton2,
+  )), /* @__PURE__ */ React56.createElement(Tooltip5, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(
+    StyledToggleButton,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
       ...bindToggle(popupState),
       selected: popupState.isOpen,
+      isPlaceholder: isMixedPlaceholder,
       "aria-label": tooltipLabel
     },
     icon
@@ -2677,8 +2670,9 @@ function EqualUnequalSizesControl({
       PropProvider,
       {
         propType: multiSizePropType,
-        value: getMultiSizeValues(),
-        setValue: setNestedProp,
+        value: derivedValue,
+        placeholder: derivedPlaceholder,
+        setValue: applyMultiSizeValue,
         isDisabled: () => multiSizeDisabled
       },
       /* @__PURE__ */ React56.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React56.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React56.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
@@ -2692,14 +2686,14 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 // src/controls/linked-dimensions-control.tsx
 import * as React57 from "react";
 import { useLayoutEffect, useRef as useRef9, useState as useState8 } from "react";
-import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
+import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
   const gridRowRefs = [useRef9(null), useRef9(null)];
-  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
+  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil3);
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2857,7 +2851,7 @@ import { __ as __20 } from "@wordpress/i18n";
 import * as React58 from "react";
 import { useCallback as useCallback2, useEffect as useEffect6, useState as useState9 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
-import { Box as Box7, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
+import { Box as Box8, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
 import { __ as __19 } from "@wordpress/i18n";
 
@@ -2931,7 +2925,7 @@ var ItemSelector = ({
       overflow: "hidden"
     },
     /* @__PURE__ */ React58.createElement(IconComponent, { fontSize: "large" }),
-    /* @__PURE__ */ React58.createElement(Box7, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React58.createElement(Box8, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React58.createElement(
       Typography4,
       {
         variant: "subtitle2",
@@ -2940,7 +2934,7 @@ var ItemSelector = ({
       },
       /* @__PURE__ */ React58.createElement("span", null, "\u201C"),
       /* @__PURE__ */ React58.createElement(
-        Box7,
+        Box8,
         {
           component: "span",
           sx: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
@@ -3118,7 +3112,7 @@ import { __ as __23 } from "@wordpress/i18n";
 import * as React61 from "react";
 import { selectElement } from "@elementor/editor-elements";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Alert, AlertAction, AlertTitle, Box as Box8, Infotip as Infotip2, Link as Link2 } from "@elementor/ui";
+import { Alert, AlertAction, AlertTitle, Box as Box9, Infotip as Infotip2, Link as Link2 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
 var learnMoreButton = {
   label: __21("Learn More", "elementor"),
@@ -3159,7 +3153,7 @@ var RestrictedLinkInfotip = ({
       )
     },
     /* @__PURE__ */ React61.createElement(AlertTitle, null, __21("Nested links", "elementor")),
-    /* @__PURE__ */ React61.createElement(Box8, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React61.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
+    /* @__PURE__ */ React61.createElement(Box9, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React61.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
   );
   return shouldRestrict && isVisible ? /* @__PURE__ */ React61.createElement(
     Infotip2,
@@ -3169,7 +3163,7 @@ var RestrictedLinkInfotip = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React61.createElement(Box8, null, children)
+    /* @__PURE__ */ React61.createElement(Box9, null, children)
   ) : /* @__PURE__ */ React61.createElement(React61.Fragment, null, children);
 };
 
@@ -3188,7 +3182,7 @@ import { forwardRef as forwardRef8 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
-  Box as Box9,
+  Box as Box10,
   IconButton as IconButton5,
   InputAdornment as InputAdornment4,
   TextField as TextField6
@@ -3235,7 +3229,7 @@ var Autocomplete = forwardRef8((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React62.createElement(Box9, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React62.createElement(Box10, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
       renderInput: (params) => /* @__PURE__ */ React62.createElement(
         TextInput,
         {
@@ -3421,13 +3415,13 @@ function generateFirstLoadedOption(unionValue) {
 // src/controls/switch-control.tsx
 import * as React64 from "react";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box10, Switch } from "@elementor/ui";
+import { Box as Box11, Switch } from "@elementor/ui";
 var SwitchControl = createControl(() => {
   const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React64.createElement(Box10, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React64.createElement(Box11, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
     Switch,
     {
       checked: !!value,
@@ -3530,7 +3524,7 @@ import { __ as __24 } from "@wordpress/i18n";
 // src/components/conditional-control-infotip.tsx
 import * as React66 from "react";
 import { InfoAlert } from "@elementor/editor-ui";
-import { AlertTitle as AlertTitle2, Box as Box11, Infotip as Infotip3, useTheme as useTheme2 } from "@elementor/ui";
+import { AlertTitle as AlertTitle2, Box as Box12, Infotip as Infotip3, useTheme as useTheme2 } from "@elementor/ui";
 import { DirectionProvider } from "@elementor/ui";
 var DEFAULT_COLOR = "secondary";
 var ConditionalControlInfotip = React66.forwardRef(
@@ -3538,7 +3532,7 @@ var ConditionalControlInfotip = React66.forwardRef(
     const theme = useTheme2();
     const isUiRtl = "rtl" === theme.direction;
     const isEnabled = props.isEnabled && (title || description);
-    return /* @__PURE__ */ React66.createElement(Box11, { ref }, isEnabled ? /* @__PURE__ */ React66.createElement(DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React66.createElement(Box12, { ref }, isEnabled ? /* @__PURE__ */ React66.createElement(DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React66.createElement(
       Infotip3,
       {
         placement: "right",
@@ -3563,7 +3557,7 @@ var ConditionalControlInfotip = React66.forwardRef(
             sx: { width: 300, px: 1.5, py: 2 },
             ...alertProps
           },
-          /* @__PURE__ */ React66.createElement(Box11, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React66.createElement(AlertTitle2, null, title), /* @__PURE__ */ React66.createElement(Box11, null, description))
+          /* @__PURE__ */ React66.createElement(Box12, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React66.createElement(AlertTitle2, null, title), /* @__PURE__ */ React66.createElement(Box12, null, description))
         )
       },
       children
@@ -3621,14 +3615,14 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
 // src/controls/gap-control.tsx
 import * as React68 from "react";
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState12 } from "react";
-import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
+import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid11, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
   const stackRef = useRef10(null);
-  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
+  const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const {
     value: directionValue,
     setValue: setDirectionValue,
@@ -4012,7 +4006,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box12, CardMedia as CardMedia3, styled as styled9, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { Box as Box13, CardMedia as CardMedia3, styled as styled9, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __33 } from "@wordpress/i18n";
 
@@ -4414,7 +4408,7 @@ var ItemContent = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React77.createElement(Box12, { sx: { width: "100%" } }, /* @__PURE__ */ React77.createElement(Box12, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React77.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React77.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React77.createElement(
     Tabs,
     {
       size: "small",
@@ -4561,7 +4555,7 @@ var BackgroundClipField = () => {
 import * as React79 from "react";
 import { useMemo as useMemo8 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
-import { Box as Box13 } from "@elementor/ui";
+import { Box as Box14 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -4705,7 +4699,7 @@ var ItemLabel3 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React79.createElement(Box13, { component: "span", color }, label);
+  return /* @__PURE__ */ React79.createElement(Box14, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4889,7 +4883,7 @@ import * as React94 from "react";
 import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger4, Box as Box17, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography6, usePopupState as usePopupState6 } from "@elementor/ui";
+import { bindTrigger as bindTrigger4, Box as Box18, IconButton as IconButton7, Tooltip as Tooltip8, Typography as Typography6, usePopupState as usePopupState6 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -4945,7 +4939,7 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 
 // src/controls/transform-control/transform-content.tsx
 import * as React88 from "react";
-import { Box as Box14, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { Box as Box15, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
@@ -5216,7 +5210,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(Box14, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box14, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
     Tabs2,
     {
       size: "small",
@@ -5256,7 +5250,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 import * as React90 from "react";
-import { Box as Box15 } from "@elementor/ui";
+import { Box as Box16 } from "@elementor/ui";
 import { __ as __42 } from "@wordpress/i18n";
 var formatLabel = (value, functionType) => {
   return Object.values(value).map((axis) => {
@@ -5285,14 +5279,14 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React90.createElement(Box15, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React90.createElement(Box16, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
 import * as React93 from "react";
 import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover5, Box as Box16, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
+import { bindPopover as bindPopover5, Box as Box17, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
 import { __ as __45 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
@@ -5399,7 +5393,7 @@ var TransformSettingsControl = ({
       }
     ),
     /* @__PURE__ */ React93.createElement(Divider4, null),
-    /* @__PURE__ */ React93.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React93.createElement(TransformOriginControl, null)), /* @__PURE__ */ React93.createElement(Box16, { sx: { my: 0.5 } }, /* @__PURE__ */ React93.createElement(Divider4, null)), /* @__PURE__ */ React93.createElement(ChildrenPerspectiveControl, null))
+    /* @__PURE__ */ React93.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React93.createElement(TransformOriginControl, null)), /* @__PURE__ */ React93.createElement(Box17, { sx: { my: 0.5 } }, /* @__PURE__ */ React93.createElement(Divider4, null)), /* @__PURE__ */ React93.createElement(ChildrenPerspectiveControl, null))
   );
 };
 
@@ -5412,7 +5406,7 @@ var TransformRepeaterControl = createControl(() => {
   return /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(TransformSettingsControl, { popupState, anchorRef: headerRef }), /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React94.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
 });
 var ToolTip = /* @__PURE__ */ React94.createElement(
-  Box17,
+  Box18,
   {
     component: "span",
     "aria-label": void 0,
@@ -5485,7 +5479,7 @@ import {
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box19, Typography as Typography7 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography7 } from "@elementor/ui";
 import { __ as __49 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
@@ -5574,7 +5568,7 @@ import * as React96 from "react";
 import { useRef as useRef23 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box18, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
+import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box19, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __48 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -5655,7 +5649,7 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React96.createElement(Box18, { ref: defaultRef }, /* @__PURE__ */ React96.createElement(ControlActions, null, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React96.createElement(Box19, { ref: defaultRef }, /* @__PURE__ */ React96.createElement(ControlActions, null, /* @__PURE__ */ React96.createElement(
     UnstableTag3,
     {
       variant: "outlined",
@@ -5797,7 +5791,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
     icon: /* @__PURE__ */ React97.createElement(InfoCircleFilledIcon3, null)
   },
   /* @__PURE__ */ React97.createElement(AlertTitle3, null, __49("Transitions", "elementor")),
-  /* @__PURE__ */ React97.createElement(Box19, { component: "span" }, /* @__PURE__ */ React97.createElement(Typography7, { variant: "body2" }, __49("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React97.createElement(Box20, { component: "span" }, /* @__PURE__ */ React97.createElement(Typography7, { variant: "body2" }, __49("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -5859,7 +5853,7 @@ import * as React98 from "react";
 import * as dayjs from "dayjs";
 import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
-import { Box as Box20, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
+import { Box as Box21, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -5903,7 +5897,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(LocalizationProvider, null, /* @__PURE__ */ React98.createElement(Box20, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(LocalizationProvider, null, /* @__PURE__ */ React98.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React98.createElement(
     DatePicker,
     {
       value: parseDateValue(stringPropTypeUtil14.extract(value?.date)),
@@ -5933,7 +5927,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 // src/controls/inline-editing-control.tsx
 import * as React102 from "react";
 import { htmlPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box23 } from "@elementor/ui";
+import { Box as Box24 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React101 from "react";
@@ -5943,7 +5937,7 @@ import {
   useRef as useRef26,
   useState as useState19
 } from "react";
-import { bindPopover as bindPopover8, Box as Box22, ClickAwayListener, Popover as Popover8, usePopupState as usePopupState9 } from "@elementor/ui";
+import { bindPopover as bindPopover8, Box as Box23, ClickAwayListener, Popover as Popover8, usePopupState as usePopupState9 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
@@ -5982,9 +5976,9 @@ import {
   UnderlineIcon
 } from "@elementor/icons";
 import {
-  Box as Box21,
+  Box as Box22,
   IconButton as IconButton8,
-  ToggleButton as ToggleButton4,
+  ToggleButton as ToggleButton3,
   ToggleButtonGroup as ToggleButtonGroup2,
   toggleButtonGroupClasses,
   Tooltip as Tooltip9,
@@ -5997,7 +5991,7 @@ import { __ as __51 } from "@wordpress/i18n";
 import * as React99 from "react";
 import { useEffect as useEffect9, useRef as useRef24 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton3 } from "@elementor/ui";
+import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton2 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
@@ -6042,7 +6036,7 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } }
       }
     ), /* @__PURE__ */ React99.createElement(
-      ToggleButton3,
+      ToggleButton2,
       {
         size: "tiny",
         value: "newTab",
@@ -6160,7 +6154,7 @@ var InlineEditorToolbar = ({ editor }) => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React100.createElement(
-    Box21,
+    Box22,
     {
       ref: toolbarRef,
       sx: {
@@ -6199,7 +6193,7 @@ var InlineEditorToolbar = ({ editor }) => {
         }
       },
       formatButtonsList.map((button) => /* @__PURE__ */ React100.createElement(Tooltip9, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React100.createElement(
-        ToggleButton4,
+        ToggleButton3,
         {
           value: button.action,
           "aria-label": button.label,
@@ -6255,7 +6249,7 @@ var calcSelectionCenter = (view, container) => {
   return { left, top };
 };
 var Wrapper = ({ children, containerRef, editor, sx, onBlur }) => {
-  const wrappedChildren = /* @__PURE__ */ React101.createElement(Box22, { ref: containerRef, ...sx }, children);
+  const wrappedChildren = /* @__PURE__ */ React101.createElement(Box23, { ref: containerRef, ...sx }, children);
   return onBlur ? /* @__PURE__ */ React101.createElement(
     ClickAwayListener,
     {
@@ -6423,7 +6417,7 @@ var InlineEditingControl = createControl(
     const { value, setValue } = useBoundProp(htmlPropTypeUtil);
     const handleChange = (newValue) => setValue(newValue);
     return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
-      Box23,
+      Box24,
       {
         sx: {
           p: 0.8,
@@ -6478,7 +6472,7 @@ import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2,
 import {
   bindPopover as bindPopover9,
   bindTrigger as bindTrigger6,
-  Box as Box24,
+  Box as Box25,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip11,
@@ -6586,7 +6580,7 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React104.createElement(Box24, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React104.createElement(Box25, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
   ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
@@ -6655,7 +6649,7 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(Tooltip11, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(Tooltip11, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(EyeIcon2, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(Tooltip11, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(XIcon4, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box24, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box25, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState20(null);