@elementor/editor-controls 4.0.0-683 → 4.0.0

package/dist/index.mjs

@@ -653,14 +653,14 @@ var TextFieldInnerSelection = forwardRef2(
     id
   }, ref) => {
     const { placeholder: boundPropPlaceholder } = useBoundProp(sizePropTypeUtil);
-    const getCursorStyle2 = () => ({
+    const getCursorStyle3 = () => ({
       input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
     return /* @__PURE__ */ React17.createElement(
       NumberInput,
       {
         ref,
-        sx: getCursorStyle2(),
+        sx: getCursorStyle3(),
         size: "tiny",
         fullWidth: true,
         type,
@@ -5741,6 +5741,7 @@ import {
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
 import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box20, Typography as Typography8 } from "@elementor/ui";
+import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
@@ -5794,9 +5795,9 @@ var MIN_PRO_VERSION = "3.35";
 var getIsSiteRtl = () => {
   return !!window.elementorFrontend?.config?.is_rtl;
 };
-var shouldExtendTransitionProperties = () => {
+var shouldShowAllTransitionProperties = () => {
   if (!hasProInstalled()) {
-    return false;
+    return true;
   }
   const proVersion = window.elementorPro?.config?.version;
   if (!proVersion) {
@@ -5933,7 +5934,7 @@ var createTransitionPropertiesList = () => {
       ]
     }
   ];
-  return shouldExtendTransitionProperties() ? baseProperties : [baseProperties[0]];
+  return shouldShowAllTransitionProperties() ? baseProperties : [baseProperties[0]];
 };
 var transitionProperties = createTransitionPropertiesList();
 var transitionsItemsList = transitionProperties.map((category) => ({
@@ -6282,6 +6283,7 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
+    const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo13(
       () => getDisabledItemLabels(value),
@@ -6290,10 +6292,14 @@ var TransitionRepeaterControl = createControl(
     const allowedTransitionSet = useMemo13(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
-        category.properties.forEach((prop) => set.add(prop.value));
+        category.properties.forEach((prop) => {
+          if (!prop.isDisabled || proInstalled) {
+            set.add(prop.value);
+          }
+        });
       });
       return set;
-    }, []);
+    }, [proInstalled]);
     useEffect11(() => {
       if (!value || value.length === 0) {
         return;
@@ -6679,7 +6685,7 @@ var SendToField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "to",
-    label: __51("Send To", "elementor"),
+    label: __51("Send to", "elementor"),
     placeholder: __51("Where should we send new submissions?", "elementor")
   }
 );
@@ -6687,7 +6693,7 @@ var SubjectField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "subject",
-    label: __51("Email Subject", "elementor"),
+    label: __51("Email subject", "elementor"),
     placeholder: __51("New form submission", "elementor")
   }
 );
@@ -6705,7 +6711,7 @@ var FromEmailField = () => /* @__PURE__ */ React102.createElement(
   {
     bind: "from",
     label: __51("From email", "elementor"),
-    placeholder: __51("What email address should appear as the sender?", "elementor")
+    placeholder: __51("What email should appear as the sender?", "elementor")
   }
 );
 var FromNameField = () => /* @__PURE__ */ React102.createElement(
@@ -6719,7 +6725,7 @@ var FromNameField = () => /* @__PURE__ */ React102.createElement(
 var ReplyToField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "reply-to", label: __51("Reply-to", "elementor") });
 var CcField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "cc", label: __51("Cc", "elementor") });
 var BccField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "bcc", label: __51("Bcc", "elementor") });
-var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, __51("Meta data", "elementor")), /* @__PURE__ */ React102.createElement(
+var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, __51("Metadata", "elementor")), /* @__PURE__ */ React102.createElement(
   ChipsControl,
   {
     options: [
@@ -6743,25 +6749,650 @@ var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider,
 var AdvancedSettings = () => /* @__PURE__ */ React102.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React102.createElement(Box24, { sx: { pt: 2 } }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(FromNameField, null), /* @__PURE__ */ React102.createElement(ReplyToField, null), /* @__PURE__ */ React102.createElement(CcField, null), /* @__PURE__ */ React102.createElement(BccField, null), /* @__PURE__ */ React102.createElement(Divider5, null), /* @__PURE__ */ React102.createElement(MetaDataField, null), /* @__PURE__ */ React102.createElement(SendAsField, null))));
 var EmailFormActionControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(emailPropTypeUtil);
-  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Email settings", "elementor")), /* @__PURE__ */ React102.createElement(SendToField, null), /* @__PURE__ */ React102.createElement(SubjectField, null), /* @__PURE__ */ React102.createElement(MessageField, null), /* @__PURE__ */ React102.createElement(FromEmailField, null), /* @__PURE__ */ React102.createElement(AdvancedSettings, null)));
+  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, __51("Email settings", "elementor")), /* @__PURE__ */ React102.createElement(SendToField, null), /* @__PURE__ */ React102.createElement(SubjectField, null), /* @__PURE__ */ React102.createElement(MessageField, null), /* @__PURE__ */ React102.createElement(FromEmailField, null), /* @__PURE__ */ React102.createElement(AdvancedSettings, null)));
 });
 
-// src/components/promotions/display-conditions-control.tsx
+// src/controls/size-control/unstable-size-control.tsx
+import * as React108 from "react";
+import { sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
+
+// src/controls/size-control/size-component.tsx
+import * as React107 from "react";
+import { useEffect as useEffect15 } from "react";
+import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
+import { Box as Box25, usePopupState as usePopupState9 } from "@elementor/ui";
+
+// src/controls/size-control/size-field.tsx
+import * as React105 from "react";
+import { MathFunctionIcon as MathFunctionIcon3 } from "@elementor/icons";
+import { InputAdornment as InputAdornment5 } from "@elementor/ui";
+
+// src/controls/size-control/sync/get-units.ts
+var getLengthUnits = () => {
+  return window.elementor?.config?.size_units?.length ?? [];
+};
+var getAngleUnits = () => {
+  return window.elementor?.config?.size_units?.angle ?? [];
+};
+var getTimeUnits = () => {
+  return window.elementor?.config?.size_units?.time ?? [];
+};
+var getExtendedUnits = () => {
+  return window.elementor?.config?.size_units?.extended_units ?? [];
+};
+
+// src/controls/size-control/utils/is-extended-unit.ts
+var isExtendedUnit = (unit) => {
+  const extendedUnits = getExtendedUnits();
+  return extendedUnits.includes(unit);
+};
+
+// src/controls/size-control/hooks/use-size-unit-keyboard.tsx
+var UNIT_KEY_PATTERN = /^[a-zA-Z%]$/;
+var useSizeUnitKeyboard = ({ unit, units: units2, onUnitChange }) => {
+  const { appendKey, startsWith } = useTypingBuffer();
+  const onUnitKeyDown = (event) => {
+    if (units2.length === 0) {
+      return;
+    }
+    const { key, altKey, ctrlKey, metaKey } = event;
+    if (altKey || ctrlKey || metaKey) {
+      return;
+    }
+    if (isExtendedUnit(unit) && isNumericValue(key)) {
+      const [defaultUnit] = units2;
+      if (defaultUnit) {
+        onUnitChange(defaultUnit);
+      }
+      return;
+    }
+    if (!UNIT_KEY_PATTERN.test(key)) {
+      return;
+    }
+    event.preventDefault();
+    const updatedBuffer = appendKey(key.toLowerCase());
+    const matchedUnit = units2.find((u) => startsWith(u, updatedBuffer));
+    if (matchedUnit) {
+      onUnitChange(matchedUnit);
+    }
+  };
+  return { onUnitKeyDown };
+};
+var isNumericValue = (value) => {
+  if (typeof value === "number") {
+    return !isNaN(value);
+  }
+  if (typeof value === "string") {
+    return value.trim() !== "" && !isNaN(Number(value));
+  }
+  return false;
+};
+
+// src/controls/size-control/hooks/use-size-value.ts
+import { useMemo as useMemo15 } from "react";
+
+// src/controls/size-control/utils/resolve-size-value.ts
+var DEFAULT_SIZE2 = "";
+var EXTENDED_UNITS = {
+  auto: "auto",
+  custom: "custom"
+};
+var resolveSizeValue = (value, context) => {
+  if (!value) {
+    return value;
+  }
+  const { units: units2, defaultUnit } = context;
+  const unit = resolveFallbackUnit(value.unit, units2, defaultUnit);
+  if (unit === EXTENDED_UNITS.auto) {
+    return { size: DEFAULT_SIZE2, unit };
+  }
+  if (unit === EXTENDED_UNITS.custom) {
+    return { size: String(value.size ?? DEFAULT_SIZE2), unit };
+  }
+  return {
+    size: sanitizeSize(value.size) ?? DEFAULT_SIZE2,
+    unit
+  };
+};
+var resolveSizeOnUnitChange = (size, unit) => {
+  return isExtendedUnit(unit) ? DEFAULT_SIZE2 : size;
+};
+var createDefaultSizeValue = (units2, defaultUnit) => {
+  let [unit] = units2;
+  if (defaultUnit !== void 0) {
+    unit = resolveFallbackUnit(defaultUnit, units2);
+  }
+  return { size: DEFAULT_SIZE2, unit };
+};
+var resolveFallbackUnit = (unit, units2, defaultUnit) => {
+  if (units2.includes(unit)) {
+    return unit;
+  }
+  if (defaultUnit && units2.includes(defaultUnit)) {
+    return defaultUnit;
+  }
+  return units2[0] ?? "";
+};
+var sanitizeSize = (size) => {
+  if (typeof size === "number" && isNaN(size)) {
+    return DEFAULT_SIZE2;
+  }
+  return size;
+};
+
+// src/controls/size-control/hooks/use-size-value.ts
+var useSizeValue = ({
+  value,
+  setValue,
+  units: units2,
+  defaultUnit
+}) => {
+  const resolvedValue = useMemo15(
+    () => resolveSizeValue(value, { units: units2, defaultUnit }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value?.size, value?.unit, defaultUnit]
+  );
+  const [sizeValue, setSizeValue] = useSyncExternalState({
+    external: resolvedValue,
+    setExternal: (newState, options, meta) => {
+      if (newState !== null) {
+        setValue(newState, options, meta);
+      }
+    },
+    persistWhen: (next) => hasChanged(next, resolvedValue),
+    fallback: () => createDefaultSizeValue(units2, defaultUnit)
+  });
+  const setSize = (newSize, isInputValid = true) => {
+    if (isExtendedUnit(sizeValue.unit)) {
+      return;
+    }
+    const trimmed = newSize.trim();
+    const parsed = Number(trimmed);
+    const newState = {
+      ...sizeValue,
+      size: trimmed && !isNaN(parsed) ? parsed : ""
+    };
+    setSizeValue(newState, void 0, { validation: () => isInputValid });
+  };
+  const setUnit = (unit) => {
+    setSizeValue({ unit, size: resolveSizeOnUnitChange(sizeValue.size, unit) });
+  };
+  return {
+    size: sizeValue.size,
+    unit: sizeValue.unit,
+    setSize,
+    setUnit
+  };
+};
+var hasChanged = (next, current) => {
+  return next?.size !== current?.size || next?.unit !== current?.unit;
+};
+
+// src/controls/size-control/ui/size-input.tsx
+import * as React103 from "react";
+import { forwardRef as forwardRef11 } from "react";
+var SizeInput2 = forwardRef11(
+  ({
+    id,
+    type,
+    value,
+    onBlur,
+    onKeyUp,
+    focused,
+    disabled,
+    onChange,
+    onKeyDown,
+    InputProps,
+    inputProps,
+    placeholder
+  }, ref) => {
+    return /* @__PURE__ */ React103.createElement(
+      NumberInput,
+      {
+        id,
+        ref,
+        size: "tiny",
+        fullWidth: true,
+        type,
+        value,
+        placeholder,
+        onKeyUp,
+        focused,
+        disabled,
+        onKeyDown,
+        onInput: onChange,
+        onBlur,
+        InputProps,
+        inputProps,
+        sx: getCursorStyle(InputProps?.readOnly ?? false)
+      }
+    );
+  }
+);
+var getCursorStyle = (readOnly) => ({
+  input: { cursor: readOnly ? "default !important" : void 0 }
+});
+
+// src/controls/size-control/ui/unit-selector.tsx
 import * as React104 from "react";
-import { useRef as useRef25 } from "react";
+import { useId as useId3 } from "react";
+import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger6, Button as Button6, Menu as Menu3, styled as styled9, usePopupState as usePopupState8 } from "@elementor/ui";
+var menuItemContentStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};
+var UnitSelector = ({
+  value,
+  isActive,
+  onSelect,
+  options,
+  disabled,
+  menuItemsAttributes = {},
+  optionLabelOverrides = {}
+}) => {
+  const popupState = usePopupState8({
+    variant: "popover",
+    popupId: useId3()
+  });
+  const handleMenuItemClick = (option) => {
+    onSelect(option);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(StyledButton2, { isActive, disabled, size: "small", ...bindTrigger6(popupState) }, optionLabelOverrides[value] ?? value), /* @__PURE__ */ React104.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
+    MenuListItem7,
+    {
+      key: option,
+      onClick: () => handleMenuItemClick(option),
+      ...menuItemsAttributes?.[option],
+      primaryTypographyProps: {
+        variant: "caption",
+        sx: {
+          ...menuItemContentStyles,
+          lineHeight: "1"
+        }
+      },
+      menuItemTextProps: {
+        sx: menuItemContentStyles
+      }
+    },
+    optionLabelOverrides[option] ?? option.toUpperCase()
+  ))));
+};
+var StyledButton2 = styled9(Button6, {
+  shouldForwardProp: (prop) => prop !== "isActive"
+})(({ isActive, theme }) => ({
+  color: isActive ? theme.palette.text.primary : theme.palette.text.tertiary,
+  font: "inherit",
+  minWidth: "initial",
+  textTransform: "uppercase"
+}));
+
+// src/controls/size-control/utils/has-size-value.ts
+var hasSizeValue = (size) => {
+  return Boolean(size) || size === 0;
+};
+
+// src/controls/size-control/size-field.tsx
+var UNIT_DISPLAY_LABELS_OVERRIDES = {
+  custom: /* @__PURE__ */ React105.createElement(MathFunctionIcon3, { fontSize: "tiny" })
+};
+var SizeField = ({
+  value,
+  focused,
+  disabled,
+  InputProps,
+  defaultUnit,
+  placeholder,
+  onUnitChange,
+  startIcon,
+  ariaLabel,
+  onKeyDown,
+  setValue,
+  onBlur,
+  units: units2,
+  min,
+  unitSelectorProps
+}) => {
+  const { size, unit, setSize, setUnit } = useSizeValue({ value, setValue, units: units2, defaultUnit });
+  const handleUnitChange = (newUnit) => {
+    setUnit(newUnit);
+    onUnitChange?.(newUnit);
+  };
+  const { onUnitKeyDown } = useSizeUnitKeyboard({ unit, onUnitChange: handleUnitChange, units: units2 });
+  const handleKeyDown = (event) => {
+    onUnitKeyDown(event);
+    onKeyDown?.(event);
+  };
+  const handleChange = (event) => {
+    const newSize = event.target.value;
+    const isInputValid = event.target.validity.valid;
+    setSize(newSize, isInputValid);
+  };
+  const inputType = isExtendedUnit(unit) ? "text" : "number";
+  return /* @__PURE__ */ React105.createElement(
+    SizeInput2,
+    {
+      disabled,
+      focused,
+      type: inputType,
+      value: size,
+      placeholder,
+      onBlur,
+      onKeyDown: handleKeyDown,
+      onChange: handleChange,
+      InputProps: {
+        ...InputProps,
+        autoComplete: "off",
+        readOnly: isExtendedUnit(unit),
+        startAdornment: startIcon && /* @__PURE__ */ React105.createElement(InputAdornment5, { position: "start", disabled }, startIcon),
+        endAdornment: /* @__PURE__ */ React105.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React105.createElement(
+          UnitSelector,
+          {
+            options: units2,
+            value: unit,
+            onSelect: handleUnitChange,
+            isActive: unitSelectorProps?.isActive ?? hasSizeValue(size),
+            ...unitSelectorProps,
+            optionLabelOverrides: UNIT_DISPLAY_LABELS_OVERRIDES
+          }
+        ))
+      },
+      inputProps: { min, step: "any", "arial-label": ariaLabel }
+    }
+  );
+};
+
+// src/controls/size-control/ui/text-field-popover.tsx
+import * as React106 from "react";
+import { useEffect as useEffect14, useRef as useRef25 } from "react";
+import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
+import { MathFunctionIcon as MathFunctionIcon4 } from "@elementor/icons";
+import { bindPopover as bindPopover7, Popover as Popover7, TextField as TextField9 } from "@elementor/ui";
+import { __ as __52 } from "@wordpress/i18n";
+var SIZE10 = "tiny";
+var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
+  const inputRef = useRef25(null);
+  useEffect14(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      });
+    }
+  }, [popupState.isOpen]);
+  const handleKeyDown = (event) => {
+    if (event.key.toLowerCase() === "enter") {
+      handleClose();
+    }
+  };
+  const handleClose = () => {
+    onClose?.();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React106.createElement(
+    Popover7,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          sx: {
+            borderRadius: 2,
+            width: anchorRef.current?.offsetWidth + "px"
+          }
+        }
+      },
+      ...bindPopover7(popupState),
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React106.createElement(
+      PopoverHeader4,
+      {
+        title: __52("CSS function", "elementor"),
+        onClose: handleClose,
+        icon: /* @__PURE__ */ React106.createElement(MathFunctionIcon4, { fontSize: SIZE10 })
+      }
+    ),
+    /* @__PURE__ */ React106.createElement(
+      TextField9,
+      {
+        value,
+        onChange,
+        onKeyDown: handleKeyDown,
+        size: "tiny",
+        type: "text",
+        fullWidth: true,
+        inputProps: {
+          ref: inputRef
+        },
+        sx: { pt: 0, pr: 1.5, pb: 1.5, pl: 1.5 }
+      }
+    )
+  );
+};
+
+// src/controls/size-control/size-component.tsx
+var SizeComponent = ({
+  anchorRef,
+  isUnitActive,
+  SizeFieldWrapper = React107.Fragment,
+  ...sizeFieldProps
+}) => {
+  const popupState = usePopupState9({ variant: "popover" });
+  const activeBreakpoint = useActiveBreakpoint4();
+  const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
+  const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
+  useEffect15(() => {
+    if (popupState && popupState.isOpen) {
+      popupState.close();
+    }
+  }, [activeBreakpoint]);
+  const handleCustomSizeChange = (event) => {
+    sizeFieldProps.setValue({
+      size: event.target.value,
+      unit: EXTENDED_UNITS.custom
+    });
+  };
+  const handleSizeFieldClick = (event) => {
+    if (event.target.closest("input") && isCustomUnit) {
+      popupState.open(anchorRef?.current);
+    }
+  };
+  const handleUnitChange = (unit) => {
+    if (unit === EXTENDED_UNITS.custom && anchorRef?.current) {
+      popupState.open(anchorRef.current);
+    }
+  };
+  const popupAttributes = {
+    "aria-controls": popupState.isOpen ? popupState.popupId : void 0,
+    "aria-haspopup": true
+  };
+  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(SizeFieldWrapper, null, /* @__PURE__ */ React107.createElement(Box25, null, /* @__PURE__ */ React107.createElement(
+    SizeField,
+    {
+      focused: popupState.isOpen ? true : void 0,
+      onUnitChange: handleUnitChange,
+      InputProps: {
+        ...popupAttributes,
+        onClick: handleSizeFieldClick
+      },
+      unitSelectorProps: {
+        menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : void 0,
+        isActive: isUnitActive
+      },
+      ...sizeFieldProps
+    }
+  ))), popupState.isOpen && anchorRef?.current && /* @__PURE__ */ React107.createElement(
+    TextFieldPopover2,
+    {
+      popupState,
+      anchorRef,
+      value: String(sizeFieldProps?.value?.size ?? ""),
+      onChange: handleCustomSizeChange,
+      onClose: () => {
+      }
+    }
+  ));
+};
+
+// src/controls/size-control/utils/resolve-bound-prop-value.ts
+import { sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
+var resolveBoundPropValue = (value, boundPropPlaceholder, propPlaceholder) => {
+  let sizeValue = null;
+  if (validateSizeValue(value)) {
+    sizeValue = value;
+  } else if (validateSizeValue(boundPropPlaceholder)) {
+    sizeValue = { size: "", unit: boundPropPlaceholder?.unit };
+  }
+  return {
+    sizeValue,
+    isUnitHighlighted: shouldHighlightUnit(value),
+    placeholder: resolvePlaceholder(propPlaceholder, boundPropPlaceholder)
+  };
+};
+var validateSizeValue = (value) => {
+  if (!value) {
+    return false;
+  }
+  const sizePropValue = sizePropTypeUtil5.create(value);
+  return sizePropTypeUtil5.isValid(sizePropValue);
+};
+var resolvePlaceholder = (propPlaceholder, boundPropPlaceholder) => {
+  if (propPlaceholder) {
+    return propPlaceholder;
+  }
+  const size = boundPropPlaceholder?.size;
+  if (size === void 0) {
+    return void 0;
+  }
+  if (typeof size === "number") {
+    return size.toString();
+  }
+  return size;
+};
+var shouldHighlightUnit = (value) => {
+  if (!value) {
+    return false;
+  }
+  if (value.unit === EXTENDED_UNITS.auto) {
+    return true;
+  }
+  return hasSizeValue(value.size);
+};
+
+// src/controls/size-control/utils/settings/get-prop-type-settings.ts
+var getPropTypeSettings = (propType) => {
+  return propType.settings;
+};
+
+// src/controls/size-control/utils/settings/get-default-unit.ts
+var getDefaultUnit = (propType) => {
+  return getPropTypeSettings(propType)?.default_unit;
+};
+
+// src/controls/size-control/utils/settings/get-size-units.ts
+var getVariantUnits = (variant) => {
+  const map = {
+    length: getLengthUnits,
+    angle: getAngleUnits,
+    time: getTimeUnits
+  };
+  return map[variant]();
+};
+var getSettingsUnits = (propType) => {
+  return getPropTypeSettings(propType)?.units;
+};
+var getSizeUnits = (propType, variant) => {
+  return getSettingsUnits(propType) ?? getVariantUnits(variant);
+};
+
+// src/controls/size-control/utils/should-nullify-value.ts
+var conditions = [
+  (value) => value?.size === null || value?.size === void 0 || value?.size === "",
+  (value) => value?.unit !== EXTENDED_UNITS.auto,
+  (value) => value?.unit !== EXTENDED_UNITS.custom
+];
+var shouldNullifyValue = (value) => {
+  return conditions.every((condition) => condition(value));
+};
+
+// src/controls/size-control/unstable-size-control.tsx
+var UnstableSizeControl = createControl(
+  ({ variant = "length", placeholder: propPlaceholder, anchorRef, startIcon, ariaLabel, min }) => {
+    const {
+      value,
+      setValue,
+      propType,
+      placeholder: boundPropPlaceholder,
+      restoreValue
+    } = useBoundProp(sizePropTypeUtil6);
+    const { sizeValue, isUnitHighlighted, placeholder } = resolveBoundPropValue(
+      value,
+      boundPropPlaceholder,
+      propPlaceholder
+    );
+    const units2 = getSizeUnits(propType, variant);
+    const defaultUnit = getDefaultUnit(propType);
+    const handleBlur = () => {
+      const isRequired = propType.settings.required;
+      if (shouldNullifyValue(value) && !isRequired) {
+        setValue(null);
+      }
+      if (isRequired) {
+        restoreValue();
+      }
+    };
+    const handleChange = (newValue, options, meta) => {
+      setValue(newValue, options, {
+        ...meta,
+        validation: () => {
+          if (propType.settings.required) {
+            return newValue.size !== "";
+          }
+          return meta?.validation ? meta.validation(newValue) : true;
+        }
+      });
+    };
+    return /* @__PURE__ */ React108.createElement(
+      SizeComponent,
+      {
+        units: units2,
+        value: sizeValue,
+        anchorRef,
+        placeholder,
+        defaultUnit,
+        isUnitActive: isUnitHighlighted,
+        onBlur: handleBlur,
+        setValue: handleChange,
+        SizeFieldWrapper: ControlActions,
+        startIcon,
+        ariaLabel,
+        min
+      }
+    );
+  }
+);
+
+// src/components/promotions/display-conditions-control.tsx
+import * as React110 from "react";
+import { useRef as useRef26 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton8, Stack as Stack18, Tooltip as Tooltip9 } from "@elementor/ui";
-import { __ as __52 } from "@wordpress/i18n";
+import { __ as __53 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React103 from "react";
-import { forwardRef as forwardRef11, useCallback as useCallback4, useImperativeHandle, useState as useState17 } from "react";
+import * as React109 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback4, useImperativeHandle, useState as useState17 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
-import { Box as Box25 } from "@elementor/ui";
+import { Box as Box26 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = forwardRef11(
+var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState17(false);
     const promotion = getV4Promotion(promotionKey);
@@ -6774,7 +7405,7 @@ var PromotionTrigger = forwardRef11(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React109.createElement(React109.Fragment, null, promotion && /* @__PURE__ */ React109.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -6788,8 +7419,8 @@ var PromotionTrigger = forwardRef11(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React103.createElement(
-        Box25,
+      /* @__PURE__ */ React109.createElement(
+        Box26,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -6797,18 +7428,18 @@ var PromotionTrigger = forwardRef11(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React103.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React109.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __52("Display Conditions", "elementor");
+var ARIA_LABEL = __53("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef25(null);
-  return /* @__PURE__ */ React104.createElement(
+  const triggerRef = useRef26(null);
+  return /* @__PURE__ */ React110.createElement(
     Stack18,
     {
       direction: "row",
@@ -6818,8 +7449,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React104.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
+    /* @__PURE__ */ React110.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React110.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React110.createElement(
       IconButton8,
       {
         size: "tiny",
@@ -6832,22 +7463,22 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React104.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React110.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React105 from "react";
-import { useRef as useRef26 } from "react";
+import * as React111 from "react";
+import { useRef as useRef27 } from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
 import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
-import { __ as __53 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __53("Attributes", "elementor");
+import { __ as __54 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __54("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef26(null);
-  return /* @__PURE__ */ React105.createElement(
+  const triggerRef = useRef27(null);
+  return /* @__PURE__ */ React111.createElement(
     Stack19,
     {
       direction: "row",
@@ -6857,8 +7488,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React105.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React111.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React111.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React111.createElement(
       PlusIcon3,
       {
         "aria-label": ARIA_LABEL2,
@@ -6872,30 +7503,30 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React106 from "react";
+import * as React112 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton9, styled as styled9, Tooltip as Tooltip11 } from "@elementor/ui";
-var CustomIconButton = styled9(IconButton9)(({ theme }) => ({
+import { IconButton as IconButton9, styled as styled10, Tooltip as Tooltip11 } from "@elementor/ui";
+var CustomIconButton = styled10(IconButton9)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React106.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React106.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React106.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React112.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React112.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React112.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React107 from "react";
-import { useEffect as useEffect14, useState as useState18 } from "react";
+import * as React113 from "react";
+import { useEffect as useEffect16, useState as useState18 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
-  bindPopover as bindPopover7,
-  bindTrigger as bindTrigger6,
-  Box as Box26,
+  bindPopover as bindPopover8,
+  bindTrigger as bindTrigger7,
+  Box as Box27,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip12,
-  usePopupState as usePopupState8
+  usePopupState as usePopupState10
 } from "@elementor/ui";
-import { __ as __54 } from "@wordpress/i18n";
-var SIZE10 = "tiny";
+import { __ as __55 } from "@wordpress/i18n";
+var SIZE11 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
   label,
@@ -6975,20 +7606,20 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React107.createElement(
+  const addButton = /* @__PURE__ */ React113.createElement(
     IconButton10,
     {
-      size: SIZE10,
+      size: SIZE11,
       sx: {
         ml: "auto"
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __54("Add item", "elementor")
+      "aria-label": __55("Add item", "elementor")
     },
-    /* @__PURE__ */ React107.createElement(PlusIcon4, { fontSize: SIZE10 })
+    /* @__PURE__ */ React113.createElement(PlusIcon4, { fontSize: SIZE11 })
   );
-  return /* @__PURE__ */ React107.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React107.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React113.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React113.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React113.createElement(
     Infotip4,
     {
       placement: "right",
@@ -6996,20 +7627,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React107.createElement(Box26, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React107.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React113.createElement(Box27, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React113.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React107.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React107.createElement(
+    return /* @__PURE__ */ React113.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React113.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React107.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React107.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React113.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React113.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React113.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React113.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -7021,7 +7652,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React107.createElement(
+      (props) => /* @__PURE__ */ React113.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -7051,27 +7682,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __54("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __54("Show", "elementor") : __54("Hide", "elementor");
-  const removeLabel = __54("Remove", "elementor");
-  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
+  const duplicateLabel = __55("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __55("Show", "elementor") : __55("Hide", "elementor");
+  const removeLabel = __55("Remove", "elementor");
+  return /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __54("Open item", "elementor"),
-      ...bindTrigger6(popoverState),
+      "aria-label": __55("Open item", "elementor"),
+      ...bindTrigger7(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React107.createElement(React107.Fragment, null, showDuplicate && /* @__PURE__ */ React107.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React107.createElement(CopyIcon2, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React107.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React107.createElement(EyeOffIcon2, { fontSize: SIZE10 }) : /* @__PURE__ */ React107.createElement(EyeIcon2, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React107.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(IconButton10, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React107.createElement(XIcon4, { fontSize: SIZE10 }))))
+      actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, showDuplicate && /* @__PURE__ */ React113.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React113.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React113.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React113.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React113.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React113.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React113.createElement(XIcon4, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React107.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React107.createElement(Box26, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React113.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React113.createElement(Box27, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState18(null);
-  const popoverState = usePopupState8({ variant: "popover" });
-  const popoverProps = bindPopover7(popoverState);
-  useEffect14(() => {
+  const popoverState = usePopupState10({ variant: "popover" });
+  const popoverProps = bindPopover8(popoverState);
+  useEffect16(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -7086,8 +7717,8 @@ var usePopover = (openOnMount, onOpen) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React109 from "react";
-import { useMemo as useMemo15, useRef as useRef28, useState as useState19 } from "react";
+import * as React115 from "react";
+import { useMemo as useMemo16, useRef as useRef29, useState as useState19 } from "react";
 import { getContainer, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -7100,23 +7731,23 @@ import {
   UnderlineIcon
 } from "@elementor/icons";
 import {
-  Box as Box27,
+  Box as Box28,
   IconButton as IconButton11,
   ToggleButton as ToggleButton3,
   ToggleButtonGroup as ToggleButtonGroup2,
   toggleButtonGroupClasses,
   Tooltip as Tooltip14,
-  usePopupState as usePopupState9
+  usePopupState as usePopupState11
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
-import { __ as __56 } from "@wordpress/i18n";
+import { __ as __57 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React108 from "react";
-import { useEffect as useEffect15, useRef as useRef27 } from "react";
+import * as React114 from "react";
+import { useEffect as useEffect17, useRef as useRef28 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover8, Popover as Popover7, Stack as Stack20, TextField as TextField9, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
-import { __ as __55 } from "@wordpress/i18n";
+import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack20, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
+import { __ as __56 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -7126,8 +7757,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef27(null);
-  useEffect15(() => {
+  const inputRef = useRef28(null);
+  useEffect17(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7136,41 +7767,41 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React108.createElement(
-    Popover7,
+  return /* @__PURE__ */ React114.createElement(
+    Popover8,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...bindPopover8(popupState),
+      ...bindPopover9(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React108.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React108.createElement(
-      TextField9,
+    /* @__PURE__ */ React114.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React114.createElement(
+      TextField10,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: __55("Type a URL", "elementor"),
+        placeholder: __56("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React108.createElement(Tooltip13, { title: __55("Open in a new tab", "elementor") }, /* @__PURE__ */ React108.createElement(
+    ), /* @__PURE__ */ React114.createElement(Tooltip13, { title: __56("Open in a new tab", "elementor") }, /* @__PURE__ */ React114.createElement(
       ToggleButton2,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": __55("Open in a new tab", "elementor"),
+        "aria-label": __56("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React108.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React114.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -7179,14 +7810,14 @@ var UrlPopover = ({
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   const [urlValue, setUrlValue] = useState19("");
   const [openInNewTab, setOpenInNewTab] = useState19(false);
-  const toolbarRef = useRef28(null);
-  const linkPopupState = usePopupState9({ variant: "popover" });
+  const toolbarRef = useRef29(null);
+  const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo15(() => {
+  const formatButtonsList = useMemo16(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7223,11 +7854,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React109.useEffect(() => {
+  React115.useEffect(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React109.createElement(
-    Box27,
+  return /* @__PURE__ */ React115.createElement(
+    Box28,
     {
       ref: toolbarRef,
       sx: {
@@ -7243,8 +7874,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React109.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React109.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React115.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React115.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React115.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -7266,7 +7897,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React109.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React109.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React115.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React115.createElement(
         ToggleButton3,
         {
           value: button.action,
@@ -7284,7 +7915,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React115.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -7307,64 +7938,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: __56("Clear", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __57("Clear", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __56("Bold", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __57("Bold", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __56("Italic", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __57("Italic", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __56("Underline", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __57("Underline", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __56("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __57("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __56("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __57("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __56("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __57("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: __56("Link", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(LinkIcon3, { fontSize: "tiny" }),
+    label: __57("Link", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -7373,13 +8004,13 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-import * as React112 from "react";
-import { InputAdornment as InputAdornment5 } from "@elementor/ui";
+import * as React118 from "react";
+import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
 var DEFAULT_UNIT2 = "px";
-var DEFAULT_SIZE2 = "";
-var useSizeValue = (externalValue, onChange, defaultUnit) => {
+var DEFAULT_SIZE3 = "";
+var useSizeValue2 = (externalValue, onChange, defaultUnit) => {
   const [sizeValue, setSizeValue] = useSyncExternalState({
     external: externalValue,
     setExternal: (newState) => {
@@ -7388,7 +8019,7 @@ var useSizeValue = (externalValue, onChange, defaultUnit) => {
       }
     },
     persistWhen: (newState) => differsFromExternal(newState, externalValue),
-    fallback: () => ({ size: DEFAULT_SIZE2, unit: defaultUnit ?? DEFAULT_UNIT2 })
+    fallback: () => ({ size: DEFAULT_SIZE3, unit: defaultUnit ?? DEFAULT_UNIT2 })
   });
   const setSize = (value) => {
     const newState = {
@@ -7416,44 +8047,44 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React110 from "react";
-import { useId as useId3 } from "react";
-import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu2, bindTrigger as bindTrigger7, Button as Button6, Menu as Menu3, styled as styled10, usePopupState as usePopupState10 } from "@elementor/ui";
-var menuItemContentStyles = {
+import * as React116 from "react";
+import { useId as useId4 } from "react";
+import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
+import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled11, usePopupState as usePopupState12 } from "@elementor/ui";
+var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = usePopupState10({
+  const popupState = usePopupState12({
     variant: "popover",
-    popupId: useId3()
+    popupId: useId4()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger7(popupState) }, value), /* @__PURE__ */ React110.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option, index) => /* @__PURE__ */ React110.createElement(
-    MenuListItem7,
+  return /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React116.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React116.createElement(
+    MenuListItem8,
     {
       key: option,
       onClick: () => handleMenuItemClick(index),
       primaryTypographyProps: {
         variant: "caption",
         sx: {
-          ...menuItemContentStyles,
+          ...menuItemContentStyles2,
           lineHeight: "1"
         }
       },
       menuItemTextProps: {
-        sx: menuItemContentStyles
+        sx: menuItemContentStyles2
       }
     },
     option.toUpperCase()
   ))));
 };
-var StyledButton2 = styled10(Button6, {
+var StyledButton3 = styled11(Button7, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7463,11 +8094,11 @@ var StyledButton2 = styled10(Button6, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React111 from "react";
-import { forwardRef as forwardRef12 } from "react";
-var UnstableSizeInput = forwardRef12(
+import * as React117 from "react";
+import { forwardRef as forwardRef13 } from "react";
+var UnstableSizeInput = forwardRef13(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React111.createElement(
+    return /* @__PURE__ */ React117.createElement(
       NumberInput,
       {
         ref,
@@ -7482,12 +8113,12 @@ var UnstableSizeInput = forwardRef12(
         onInput: onChange,
         onBlur,
         InputProps,
-        sx: getCursorStyle(InputProps?.readOnly ?? false)
+        sx: getCursorStyle2(InputProps?.readOnly ?? false)
       }
     );
   }
 );
-var getCursorStyle = (readOnly) => ({
+var getCursorStyle2 = (readOnly) => ({
   input: { cursor: readOnly ? "default !important" : void 0 }
 });
 
@@ -7501,11 +8132,11 @@ var UnstableSizeField = ({
   defaultUnit,
   startIcon
 }) => {
-  const { size, unit, setSize, setUnit } = useSizeValue(value, onChange, defaultUnit);
-  const shouldHighlightUnit = () => {
+  const { size, unit, setSize, setUnit } = useSizeValue2(value, onChange, defaultUnit);
+  const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React118.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -7514,14 +8145,14 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React112.createElement(InputAdornment5, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React112.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React112.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React118.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React118.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React118.createElement(
           UnitSelect,
           {
             options: units2,
             value: unit,
             onClick: setUnit,
-            showPrimaryColor: shouldHighlightUnit()
+            showPrimaryColor: shouldHighlightUnit2()
           }
         ))
       }
@@ -7533,7 +8164,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -7541,7 +8172,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo16(() => {
+  return useMemo17(() => {
     if (!groups || !options) {
       return [];
     }
@@ -7606,6 +8237,7 @@ export {
   Repeater3 as Repeater,
   SelectControl,
   SelectControlWrapper,
+  SizeComponent,
   SizeControl,
   StrokeControl,
   SvgMediaControl,
@@ -7617,6 +8249,7 @@ export {
   TransformRepeaterControl,
   TransformSettingsControl,
   TransitionRepeaterControl,
+  UnstableSizeControl,
   UnstableSizeField,
   UrlControl,
   VideoMediaControl,