@elementor/editor-controls 4.0.0-683 → 4.0.0

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   Repeater: () => Repeater3,
   SelectControl: () => SelectControl,
   SelectControlWrapper: () => SelectControlWrapper,
+  SizeComponent: () => SizeComponent,
   SizeControl: () => SizeControl,
   StrokeControl: () => StrokeControl,
   SvgMediaControl: () => SvgMediaControl,
@@ -83,6 +84,7 @@ __export(index_exports, {
   TransformRepeaterControl: () => TransformRepeaterControl,
   TransformSettingsControl: () => TransformSettingsControl,
   TransitionRepeaterControl: () => TransitionRepeaterControl,
+  UnstableSizeControl: () => UnstableSizeControl,
   UnstableSizeField: () => UnstableSizeField,
   UrlControl: () => UrlControl,
   VideoMediaControl: () => VideoMediaControl,
@@ -755,14 +757,14 @@ var TextFieldInnerSelection = (0, import_react9.forwardRef)(
     id
   }, ref) => {
     const { placeholder: boundPropPlaceholder } = useBoundProp(import_editor_props6.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,
@@ -5761,6 +5763,7 @@ var import_react50 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui84 = require("@elementor/ui");
+var import_utils7 = require("@elementor/utils");
 var import_i18n50 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
@@ -5814,9 +5817,9 @@ var MIN_PRO_VERSION = "3.35";
 var getIsSiteRtl = () => {
   return !!window.elementorFrontend?.config?.is_rtl;
 };
-var shouldExtendTransitionProperties = () => {
+var shouldShowAllTransitionProperties = () => {
   if (!(0, import_utils6.hasProInstalled)()) {
-    return false;
+    return true;
   }
   const proVersion = window.elementorPro?.config?.version;
   if (!proVersion) {
@@ -5953,7 +5956,7 @@ var createTransitionPropertiesList = () => {
       ]
     }
   ];
-  return shouldExtendTransitionProperties() ? baseProperties : [baseProperties[0]];
+  return shouldShowAllTransitionProperties() ? baseProperties : [baseProperties[0]];
 };
 var transitionProperties = createTransitionPropertiesList();
 var transitionsItemsList = transitionProperties.map((category) => ({
@@ -6302,6 +6305,7 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = (0, import_react50.useState)([]);
+    const proInstalled = (0, import_utils7.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react50.useMemo)(
       () => getDisabledItemLabels(value),
@@ -6310,10 +6314,14 @@ var TransitionRepeaterControl = createControl(
     const allowedTransitionSet = (0, import_react50.useMemo)(() => {
       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]);
     (0, import_react50.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
@@ -6438,7 +6446,7 @@ var React101 = __toESM(require("react"));
 var import_react53 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
-var import_utils7 = require("@elementor/utils");
+var import_utils8 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React100 = __toESM(require("react"));
@@ -6621,7 +6629,7 @@ var InlineEditingControl = createControl(
     const { value, setValue } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
     const content = import_editor_props53.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
     const debouncedParse = (0, import_react53.useMemo)(
-      () => (0, import_utils7.debounce)((html) => {
+      () => (0, import_utils8.debounce)((html) => {
         const parsed = (0, import_editor_props53.parseHtmlChildren)(html);
         setValue({
           content: parsed.content ? import_editor_props53.stringPropTypeUtil.create(parsed.content) : null,
@@ -6696,7 +6704,7 @@ var SendToField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "to",
-    label: (0, import_i18n51.__)("Send To", "elementor"),
+    label: (0, import_i18n51.__)("Send to", "elementor"),
     placeholder: (0, import_i18n51.__)("Where should we send new submissions?", "elementor")
   }
 );
@@ -6704,7 +6712,7 @@ var SubjectField = () => /* @__PURE__ */ React102.createElement(
   EmailField,
   {
     bind: "subject",
-    label: (0, import_i18n51.__)("Email Subject", "elementor"),
+    label: (0, import_i18n51.__)("Email subject", "elementor"),
     placeholder: (0, import_i18n51.__)("New form submission", "elementor")
   }
 );
@@ -6722,7 +6730,7 @@ var FromEmailField = () => /* @__PURE__ */ React102.createElement(
   {
     bind: "from",
     label: (0, import_i18n51.__)("From email", "elementor"),
-    placeholder: (0, import_i18n51.__)("What email address should appear as the sender?", "elementor")
+    placeholder: (0, import_i18n51.__)("What email should appear as the sender?", "elementor")
   }
 );
 var FromNameField = () => /* @__PURE__ */ React102.createElement(
@@ -6736,7 +6744,7 @@ var FromNameField = () => /* @__PURE__ */ React102.createElement(
 var ReplyToField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "reply-to", label: (0, import_i18n51.__)("Reply-to", "elementor") });
 var CcField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "cc", label: (0, import_i18n51.__)("Cc", "elementor") });
 var BccField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "bcc", label: (0, import_i18n51.__)("Bcc", "elementor") });
-var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, (0, import_i18n51.__)("Meta data", "elementor")), /* @__PURE__ */ React102.createElement(
+var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, (0, import_i18n51.__)("Metadata", "elementor")), /* @__PURE__ */ React102.createElement(
   ChipsControl,
   {
     options: [
@@ -6760,29 +6768,654 @@ var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider,
 var AdvancedSettings = () => /* @__PURE__ */ React102.createElement(import_editor_ui13.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React102.createElement(import_ui88.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { 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(import_ui88.Divider, null), /* @__PURE__ */ React102.createElement(MetaDataField, null), /* @__PURE__ */ React102.createElement(SendAsField, null))));
 var EmailFormActionControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props54.emailPropTypeUtil);
-  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, (0, import_i18n51.__)("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(import_ui88.Stack, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, (0, import_i18n51.__)("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
-var React104 = __toESM(require("react"));
-var import_react55 = require("react");
+// src/controls/size-control/unstable-size-control.tsx
+var React108 = __toESM(require("react"));
+var import_editor_props56 = require("@elementor/editor-props");
+
+// src/controls/size-control/size-component.tsx
+var React107 = __toESM(require("react"));
+var import_react58 = require("react");
+var import_editor_responsive4 = require("@elementor/editor-responsive");
+var import_ui92 = require("@elementor/ui");
+
+// src/controls/size-control/size-field.tsx
+var React105 = __toESM(require("react"));
 var import_icons34 = require("@elementor/icons");
 var import_ui90 = require("@elementor/ui");
-var import_i18n52 = require("@wordpress/i18n");
 
-// src/components/promotions/promotion-trigger.tsx
-var React103 = __toESM(require("react"));
+// 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
 var import_react54 = require("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 = (0, import_react54.useMemo)(
+    () => 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
+var React103 = __toESM(require("react"));
+var import_react55 = require("react");
+var SizeInput2 = (0, import_react55.forwardRef)(
+  ({
+    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
+var React104 = __toESM(require("react"));
+var import_react56 = require("react");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_ui89 = require("@elementor/ui");
+var menuItemContentStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};
+var UnitSelector = ({
+  value,
+  isActive,
+  onSelect,
+  options,
+  disabled,
+  menuItemsAttributes = {},
+  optionLabelOverrides = {}
+}) => {
+  const popupState = (0, import_ui89.usePopupState)({
+    variant: "popover",
+    popupId: (0, import_react56.useId)()
+  });
+  const handleMenuItemClick = (option) => {
+    onSelect(option);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(StyledButton2, { isActive, disabled, size: "small", ...(0, import_ui89.bindTrigger)(popupState) }, optionLabelOverrides[value] ?? value), /* @__PURE__ */ React104.createElement(import_ui89.Menu, { MenuListProps: { dense: true }, ...(0, import_ui89.bindMenu)(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
+    import_editor_ui14.MenuListItem,
+    {
+      key: option,
+      onClick: () => handleMenuItemClick(option),
+      ...menuItemsAttributes?.[option],
+      primaryTypographyProps: {
+        variant: "caption",
+        sx: {
+          ...menuItemContentStyles,
+          lineHeight: "1"
+        }
+      },
+      menuItemTextProps: {
+        sx: menuItemContentStyles
+      }
+    },
+    optionLabelOverrides[option] ?? option.toUpperCase()
+  ))));
+};
+var StyledButton2 = (0, import_ui89.styled)(import_ui89.Button, {
+  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(import_icons34.MathFunctionIcon, { 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(import_ui90.InputAdornment, { position: "start", disabled }, startIcon),
+        endAdornment: /* @__PURE__ */ React105.createElement(import_ui90.InputAdornment, { 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
+var React106 = __toESM(require("react"));
+var import_react57 = require("react");
+var import_editor_ui15 = require("@elementor/editor-ui");
+var import_icons35 = require("@elementor/icons");
+var import_ui91 = require("@elementor/ui");
+var import_i18n52 = require("@wordpress/i18n");
+var SIZE10 = "tiny";
+var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) => {
+  const inputRef = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
+    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(
+    import_ui91.Popover,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          sx: {
+            borderRadius: 2,
+            width: anchorRef.current?.offsetWidth + "px"
+          }
+        }
+      },
+      ...(0, import_ui91.bindPopover)(popupState),
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React106.createElement(
+      import_editor_ui15.PopoverHeader,
+      {
+        title: (0, import_i18n52.__)("CSS function", "elementor"),
+        onClose: handleClose,
+        icon: /* @__PURE__ */ React106.createElement(import_icons35.MathFunctionIcon, { fontSize: SIZE10 })
+      }
+    ),
+    /* @__PURE__ */ React106.createElement(
+      import_ui91.TextField,
+      {
+        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 = (0, import_ui92.usePopupState)({ variant: "popover" });
+  const activeBreakpoint = (0, import_editor_responsive4.useActiveBreakpoint)();
+  const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
+  const hasCustomUnitOption = sizeFieldProps.units.includes(EXTENDED_UNITS.custom);
+  (0, import_react58.useEffect)(() => {
+    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(import_ui92.Box, 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
+var import_editor_props55 = require("@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 = import_editor_props55.sizePropTypeUtil.create(value);
+  return import_editor_props55.sizePropTypeUtil.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(import_editor_props56.sizePropTypeUtil);
+    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
+var React110 = __toESM(require("react"));
+var import_react60 = require("react");
+var import_icons36 = require("@elementor/icons");
+var import_ui94 = require("@elementor/ui");
+var import_i18n53 = require("@wordpress/i18n");
+
+// src/components/promotions/promotion-trigger.tsx
+var React109 = __toESM(require("react"));
+var import_react59 = require("react");
+var import_editor_ui16 = require("@elementor/editor-ui");
+var import_ui93 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react54.forwardRef)(
+var PromotionTrigger = (0, import_react59.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react59.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react54.useCallback)(() => {
+    const toggle = (0, import_react59.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -6790,9 +7423,9 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
-      import_editor_ui14.PromotionInfotip,
+    (0, import_react59.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    return /* @__PURE__ */ React109.createElement(React109.Fragment, null, promotion && /* @__PURE__ */ React109.createElement(
+      import_editor_ui16.PromotionInfotip,
       {
         title: promotion.title,
         content: promotion.content,
@@ -6805,8 +7438,8 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React103.createElement(
-        import_ui89.Box,
+      /* @__PURE__ */ React109.createElement(
+        import_ui93.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -6814,19 +7447,19 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React103.createElement(import_editor_ui14.PromotionChip, null)
+        children ?? /* @__PURE__ */ React109.createElement(import_editor_ui16.PromotionChip, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = (0, import_i18n52.__)("Display Conditions", "elementor");
+var ARIA_LABEL = (0, import_i18n53.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react55.useRef)(null);
-  return /* @__PURE__ */ React104.createElement(
-    import_ui90.Stack,
+  const triggerRef = (0, import_react60.useRef)(null);
+  return /* @__PURE__ */ React110.createElement(
+    import_ui94.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -6835,9 +7468,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
-      import_ui90.IconButton,
+    /* @__PURE__ */ React110.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React110.createElement(import_ui94.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React110.createElement(
+      import_ui94.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -6849,23 +7482,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React104.createElement(import_icons34.SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React110.createElement(import_icons36.SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-var React105 = __toESM(require("react"));
-var import_react56 = require("react");
-var import_icons35 = require("@elementor/icons");
-var import_ui91 = require("@elementor/ui");
-var import_i18n53 = require("@wordpress/i18n");
-var ARIA_LABEL2 = (0, import_i18n53.__)("Attributes", "elementor");
+var React111 = __toESM(require("react"));
+var import_react61 = require("react");
+var import_icons37 = require("@elementor/icons");
+var import_ui95 = require("@elementor/ui");
+var import_i18n54 = require("@wordpress/i18n");
+var ARIA_LABEL2 = (0, import_i18n54.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react56.useRef)(null);
-  return /* @__PURE__ */ React105.createElement(
-    import_ui91.Stack,
+  const triggerRef = (0, import_react61.useRef)(null);
+  return /* @__PURE__ */ React111.createElement(
+    import_ui95.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -6874,9 +7507,9 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
-      import_icons35.PlusIcon,
+    /* @__PURE__ */ React111.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React111.createElement(import_ui95.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React111.createElement(
+      import_icons37.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
         fontSize: "tiny",
@@ -6889,22 +7522,22 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React106 = __toESM(require("react"));
-var import_icons36 = require("@elementor/icons");
-var import_ui92 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui92.styled)(import_ui92.IconButton)(({ theme }) => ({
+var React112 = __toESM(require("react"));
+var import_icons38 = require("@elementor/icons");
+var import_ui96 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui96.styled)(import_ui96.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React106.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React106.createElement(import_icons36.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React112.createElement(import_ui96.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React112.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React112.createElement(import_icons38.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React107 = __toESM(require("react"));
-var import_react57 = require("react");
-var import_icons37 = require("@elementor/icons");
-var import_ui93 = require("@elementor/ui");
-var import_i18n54 = require("@wordpress/i18n");
-var SIZE10 = "tiny";
+var React113 = __toESM(require("react"));
+var import_react62 = require("react");
+var import_icons39 = require("@elementor/icons");
+var import_ui97 = require("@elementor/ui");
+var import_i18n55 = require("@wordpress/i18n");
+var SIZE11 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
   label,
@@ -6921,7 +7554,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react62.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6984,41 +7617,41 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React107.createElement(
-    import_ui93.IconButton,
+  const addButton = /* @__PURE__ */ React113.createElement(
+    import_ui97.IconButton,
     {
-      size: SIZE10,
+      size: SIZE11,
       sx: {
         ml: "auto"
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n54.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n55.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React107.createElement(import_icons37.PlusIcon, { fontSize: SIZE10 })
+    /* @__PURE__ */ React113.createElement(import_icons39.PlusIcon, { fontSize: SIZE11 })
   );
-  return /* @__PURE__ */ React107.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React107.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React107.createElement(
-    import_ui93.Infotip,
+  return /* @__PURE__ */ React113.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React113.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React113.createElement(
+    import_ui97.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React107.createElement(import_ui93.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React107.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React113.createElement(import_ui97.Box, { 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),
@@ -7030,7 +7663,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React107.createElement(
+      (props) => /* @__PURE__ */ React113.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -7060,27 +7693,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n54.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n54.__)("Show", "elementor") : (0, import_i18n54.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n54.__)("Remove", "elementor");
-  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
+  const duplicateLabel = (0, import_i18n55.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n55.__)("Show", "elementor") : (0, import_i18n55.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n55.__)("Remove", "elementor");
+  return /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n54.__)("Open item", "elementor"),
-      ...(0, import_ui93.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n55.__)("Open item", "elementor"),
+      ...(0, import_ui97.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React107.createElement(React107.Fragment, null, showDuplicate && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React107.createElement(import_icons37.CopyIcon, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React107.createElement(import_icons37.EyeOffIcon, { fontSize: SIZE10 }) : /* @__PURE__ */ React107.createElement(import_icons37.EyeIcon, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React107.createElement(import_icons37.XIcon, { fontSize: SIZE10 }))))
+      actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, showDuplicate && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React113.createElement(import_icons39.CopyIcon, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React113.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE11 }) : /* @__PURE__ */ React113.createElement(import_icons39.EyeIcon, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React113.createElement(import_icons39.XIcon, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React107.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React107.createElement(import_ui93.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React113.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React113.createElement(import_ui97.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react57.useState)(null);
-  const popoverState = (0, import_ui93.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui93.bindPopover)(popoverState);
-  (0, import_react57.useEffect)(() => {
+  const [ref, setRef] = (0, import_react62.useState)(null);
+  const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui97.bindPopover)(popoverState);
+  (0, import_react62.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -7095,20 +7728,20 @@ var usePopover = (openOnMount, onOpen) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-var React109 = __toESM(require("react"));
-var import_react59 = require("react");
+var React115 = __toESM(require("react"));
+var import_react64 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_icons39 = require("@elementor/icons");
-var import_ui95 = require("@elementor/ui");
-var import_react60 = require("@tiptap/react");
-var import_i18n56 = require("@wordpress/i18n");
+var import_icons41 = require("@elementor/icons");
+var import_ui99 = require("@elementor/ui");
+var import_react65 = require("@tiptap/react");
+var import_i18n57 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
-var React108 = __toESM(require("react"));
-var import_react58 = require("react");
-var import_icons38 = require("@elementor/icons");
-var import_ui94 = require("@elementor/ui");
-var import_i18n55 = require("@wordpress/i18n");
+var React114 = __toESM(require("react"));
+var import_react63 = require("react");
+var import_icons40 = require("@elementor/icons");
+var import_ui98 = require("@elementor/ui");
+var import_i18n56 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -7118,8 +7751,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const inputRef = (0, import_react63.useRef)(null);
+  (0, import_react63.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -7128,57 +7761,57 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React108.createElement(
-    import_ui94.Popover,
+  return /* @__PURE__ */ React114.createElement(
+    import_ui98.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui94.bindPopover)(popupState),
+      ...(0, import_ui98.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React108.createElement(import_ui94.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React108.createElement(
-      import_ui94.TextField,
+    /* @__PURE__ */ React114.createElement(import_ui98.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React114.createElement(
+      import_ui98.TextField,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: (0, import_i18n55.__)("Type a URL", "elementor"),
+        placeholder: (0, import_i18n56.__)("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React108.createElement(import_ui94.Tooltip, { title: (0, import_i18n55.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React108.createElement(
-      import_ui94.ToggleButton,
+    ), /* @__PURE__ */ React114.createElement(import_ui98.Tooltip, { title: (0, import_i18n56.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React114.createElement(
+      import_ui98.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n55.__)("Open in a new tab", "elementor"),
+        "aria-label": (0, import_i18n56.__)("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React108.createElement(import_icons38.ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React114.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react59.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
-  const toolbarRef = (0, import_react59.useRef)(null);
-  const linkPopupState = (0, import_ui95.usePopupState)({ variant: "popover" });
+  const [urlValue, setUrlValue] = (0, import_react64.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react64.useState)(false);
+  const toolbarRef = (0, import_react64.useRef)(null);
+  const linkPopupState = (0, import_ui99.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react60.useEditorState)({
+  const editorState = (0, import_react65.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react59.useMemo)(() => {
+  const formatButtonsList = (0, import_react64.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7215,11 +7848,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React109.useEffect(() => {
+  React115.useEffect(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React109.createElement(
-    import_ui95.Box,
+  return /* @__PURE__ */ React115.createElement(
+    import_ui99.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -7235,9 +7868,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React109.createElement(import_ui95.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React109.createElement(import_ui95.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React109.createElement(
-      import_ui95.ToggleButtonGroup,
+    /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React115.createElement(import_ui99.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React115.createElement(
+      import_ui99.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -7245,7 +7878,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui95.toggleButtonGroupClasses.firstButton}, & .${import_ui95.toggleButtonGroupClasses.middleButton}, & .${import_ui95.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui99.toggleButtonGroupClasses.firstButton}, & .${import_ui99.toggleButtonGroupClasses.middleButton}, & .${import_ui99.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -7258,8 +7891,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React109.createElement(import_ui95.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React109.createElement(
-        import_ui95.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React115.createElement(
+        import_ui99.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -7276,7 +7909,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React115.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -7299,64 +7932,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: (0, import_i18n56.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.MinusIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: (0, import_i18n56.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.BoldIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: (0, import_i18n56.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.ItalicIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: (0, import_i18n56.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.UnderlineIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: (0, import_i18n56.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.StrikethroughIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: (0, import_i18n56.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.SuperscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: (0, import_i18n56.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.SubscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: (0, import_i18n56.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React109.createElement(import_icons39.LinkIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n57.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React115.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -7365,13 +7998,13 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-var React112 = __toESM(require("react"));
-var import_ui97 = require("@elementor/ui");
+var React118 = __toESM(require("react"));
+var import_ui101 = require("@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) => {
@@ -7380,7 +8013,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 = {
@@ -7408,44 +8041,44 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-var React110 = __toESM(require("react"));
-var import_react61 = require("react");
-var import_editor_ui15 = require("@elementor/editor-ui");
-var import_ui96 = require("@elementor/ui");
-var menuItemContentStyles = {
+var React116 = __toESM(require("react"));
+var import_react66 = require("react");
+var import_editor_ui17 = require("@elementor/editor-ui");
+var import_ui100 = require("@elementor/ui");
+var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui96.usePopupState)({
+  const popupState = (0, import_ui100.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react61.useId)()
+    popupId: (0, import_react66.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui96.bindTrigger)(popupState) }, value), /* @__PURE__ */ React110.createElement(import_ui96.Menu, { MenuListProps: { dense: true }, ...(0, import_ui96.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React110.createElement(
-    import_editor_ui15.MenuListItem,
+  return /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui100.bindTrigger)(popupState) }, value), /* @__PURE__ */ React116.createElement(import_ui100.Menu, { MenuListProps: { dense: true }, ...(0, import_ui100.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React116.createElement(
+    import_editor_ui17.MenuListItem,
     {
       key: option,
       onClick: () => handleMenuItemClick(index),
       primaryTypographyProps: {
         variant: "caption",
         sx: {
-          ...menuItemContentStyles,
+          ...menuItemContentStyles2,
           lineHeight: "1"
         }
       },
       menuItemTextProps: {
-        sx: menuItemContentStyles
+        sx: menuItemContentStyles2
       }
     },
     option.toUpperCase()
   ))));
 };
-var StyledButton2 = (0, import_ui96.styled)(import_ui96.Button, {
+var StyledButton3 = (0, import_ui100.styled)(import_ui100.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7455,11 +8088,11 @@ var StyledButton2 = (0, import_ui96.styled)(import_ui96.Button, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-var React111 = __toESM(require("react"));
-var import_react62 = require("react");
-var UnstableSizeInput = (0, import_react62.forwardRef)(
+var React117 = __toESM(require("react"));
+var import_react67 = require("react");
+var UnstableSizeInput = (0, import_react67.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React111.createElement(
+    return /* @__PURE__ */ React117.createElement(
       NumberInput,
       {
         ref,
@@ -7474,12 +8107,12 @@ var UnstableSizeInput = (0, import_react62.forwardRef)(
         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 }
 });
 
@@ -7493,11 +8126,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",
@@ -7506,14 +8139,14 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React112.createElement(import_ui97.InputAdornment, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React112.createElement(import_ui97.InputAdornment, { position: "end" }, /* @__PURE__ */ React112.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React118.createElement(import_ui101.InputAdornment, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React118.createElement(import_ui101.InputAdornment, { position: "end" }, /* @__PURE__ */ React118.createElement(
           UnitSelect,
           {
             options: units2,
             value: unit,
             onClick: setUnit,
-            showPrimaryColor: shouldHighlightUnit()
+            showPrimaryColor: shouldHighlightUnit2()
           }
         ))
       }
@@ -7525,7 +8158,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react63 = require("react");
+var import_react68 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
@@ -7533,7 +8166,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react63.useMemo)(() => {
+  return (0, import_react68.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }
@@ -7599,6 +8232,7 @@ var useFontFamilies = () => {
   Repeater,
   SelectControl,
   SelectControlWrapper,
+  SizeComponent,
   SizeControl,
   StrokeControl,
   SvgMediaControl,
@@ -7610,6 +8244,7 @@ var useFontFamilies = () => {
   TransformRepeaterControl,
   TransformSettingsControl,
   TransitionRepeaterControl,
+  UnstableSizeControl,
   UnstableSizeField,
   UrlControl,
   VideoMediaControl,