@elementor/editor-controls 4.2.0-854 → 4.2.0-856

package/dist/index.d.mts

@@ -540,6 +540,16 @@ type Props$3 = {
 };
 declare const UnstableSizeControl: ControlComponent$1<({ variant, placeholder: propPlaceholder, anchorRef, startIcon, ariaLabel, min }: Props$3) => React$1.JSX.Element>;
 
+declare const GridSpanControl: ControlComponent$1<({ placeholder: propPlaceholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
+    placeholder?: string;
+    error?: boolean;
+    inputValue?: string;
+    inputDisabled?: boolean;
+    helperText?: string;
+    sx?: SxProps;
+    ariaLabel?: string;
+}) => React$1.JSX.Element>;
+
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Element>;
@@ -861,4 +871,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.d.ts

@@ -540,6 +540,16 @@ type Props$3 = {
 };
 declare const UnstableSizeControl: ControlComponent$1<({ variant, placeholder: propPlaceholder, anchorRef, startIcon, ariaLabel, min }: Props$3) => React$1.JSX.Element>;
 
+declare const GridSpanControl: ControlComponent$1<({ placeholder: propPlaceholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
+    placeholder?: string;
+    error?: boolean;
+    inputValue?: string;
+    inputDisabled?: boolean;
+    helperText?: string;
+    sx?: SxProps;
+    ariaLabel?: string;
+}) => React$1.JSX.Element>;
+
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Element>;
@@ -861,4 +871,4 @@ declare function useTypingBuffer(options?: UseTypingBufferOptions): {
     startsWith: (haystack: string, needle: string) => boolean;
 };
 
-export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };
+export { type AdornmentComponent, type AngleUnit$1 as AngleUnit, AspectRatioControl, AttachmentTypeControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ChipsControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateRangeControl, DateTimeControl, DisplayConditionsControl, EmailFormActionControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, GridSpanControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit$1 as LengthUnit, LinkControl, LinkedDimensionsControl, MentionTextAreaControl, NumberControl, NumberInput, PopoverContent, PopoverGridContainer, PositionControl, type PromotionTrackingData, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryChipsControl, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeComponent, SizeControl, StrokeControl, StyledToggleButton, StyledToggleButtonGroup, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, TimeRangeControl, TimeStringControl, type TimeUnit$1 as TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit$1 as Unit, UnstableSizeControl, UnstableSizeField, UrlControl, type UseTypingBufferOptions, type V4PromotionData, type V4PromotionKey, VideoMediaControl, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, isUnitExtendedOption, registerControlReplacement, trackUpgradePromotionClick, trackViewPromotion, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useFontFamilies, useSyncExternalState, useTypingBuffer };

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
   FilterRepeaterControl: () => FilterRepeaterControl,
   FontFamilyControl: () => FontFamilyControl,
   GapControl: () => GapControl,
+  GridSpanControl: () => GridSpanControl,
   HtmlTagControl: () => HtmlTagControl,
   ImageControl: () => ImageControl,
   InlineEditingControl: () => InlineEditingControl,
@@ -8145,18 +8146,55 @@ var AttachmentTypeControl = createControl(({ label, options }) => {
   ))));
 });
 
+// src/controls/grid-span-control.tsx
+var React117 = __toESM(require("react"));
+var import_editor_props65 = require("@elementor/editor-props");
+var import_ui101 = require("@elementor/ui");
+var GridSpanControl = createControl(
+  ({
+    placeholder: propPlaceholder,
+    error,
+    inputValue,
+    inputDisabled,
+    helperText,
+    sx,
+    ariaLabel
+  }) => {
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props65.spanPropTypeUtil);
+    const handleChange = (event) => setValue(event.target.value);
+    const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
+    return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
+      import_ui101.TextField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        disabled: inputDisabled ?? disabled,
+        value: inputValue ?? value ?? "",
+        onChange: handleChange,
+        placeholder,
+        error,
+        helperText,
+        sx,
+        inputProps: {
+          ...ariaLabel ? { "aria-label": ariaLabel } : {}
+        }
+      }
+    ));
+  }
+);
+
 // src/components/promotions/display-conditions-control.tsx
-var React118 = __toESM(require("react"));
+var React119 = __toESM(require("react"));
 var import_react69 = require("react");
 var import_icons36 = require("@elementor/icons");
-var import_ui102 = require("@elementor/ui");
+var import_ui103 = require("@elementor/ui");
 var import_i18n58 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
-var React117 = __toESM(require("react"));
+var React118 = __toESM(require("react"));
 var import_react68 = require("react");
 var import_editor_ui17 = require("@elementor/editor-ui");
-var import_ui101 = require("@elementor/ui");
+var import_ui102 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
@@ -8173,7 +8211,7 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
       });
     }, [trackingData]);
     (0, import_react68.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React117.createElement(React117.Fragment, null, promotion && /* @__PURE__ */ React117.createElement(
+    return /* @__PURE__ */ React118.createElement(React118.Fragment, null, promotion && /* @__PURE__ */ React118.createElement(
       import_editor_ui17.PromotionInfotip,
       {
         title: promotion.title,
@@ -8187,8 +8225,8 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React117.createElement(
-        import_ui101.Box,
+      /* @__PURE__ */ React118.createElement(
+        import_ui102.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -8196,7 +8234,7 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React117.createElement(import_editor_ui17.PromotionChip, null)
+        children ?? /* @__PURE__ */ React118.createElement(import_editor_ui17.PromotionChip, null)
       )
     ));
   }
@@ -8207,8 +8245,8 @@ var ARIA_LABEL = (0, import_i18n58.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = (0, import_react69.useRef)(null);
-  return /* @__PURE__ */ React118.createElement(
-    import_ui102.Stack,
+  return /* @__PURE__ */ React119.createElement(
+    import_ui103.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -8217,9 +8255,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React118.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React118.createElement(import_ui102.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React118.createElement(
-      import_ui102.IconButton,
+    /* @__PURE__ */ React119.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React119.createElement(import_ui103.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React119.createElement(
+      import_ui103.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -8231,23 +8269,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React118.createElement(import_icons36.SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React119.createElement(import_icons36.SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-var React119 = __toESM(require("react"));
+var React120 = __toESM(require("react"));
 var import_react70 = require("react");
 var import_icons37 = require("@elementor/icons");
-var import_ui103 = require("@elementor/ui");
+var import_ui104 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n59.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = (0, import_react70.useRef)(null);
-  return /* @__PURE__ */ React119.createElement(
-    import_ui103.Stack,
+  return /* @__PURE__ */ React120.createElement(
+    import_ui104.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -8256,8 +8294,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React119.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React119.createElement(import_ui103.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React119.createElement(
+    /* @__PURE__ */ React120.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React120.createElement(import_ui104.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React120.createElement(
       import_icons37.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
@@ -8271,20 +8309,20 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React120 = __toESM(require("react"));
+var React121 = __toESM(require("react"));
 var import_icons38 = require("@elementor/icons");
-var import_ui104 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui104.styled)(import_ui104.IconButton)(({ theme }) => ({
+var import_ui105 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui105.styled)(import_ui105.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React120.createElement(import_ui104.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React120.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React120.createElement(import_icons38.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React121.createElement(import_ui105.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React121.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React121.createElement(import_icons38.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React121 = __toESM(require("react"));
+var React122 = __toESM(require("react"));
 var import_react71 = require("react");
 var import_icons39 = require("@elementor/icons");
-var import_ui105 = require("@elementor/ui");
+var import_ui106 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
@@ -8366,8 +8404,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React121.createElement(
-    import_ui105.IconButton,
+  const addButton = /* @__PURE__ */ React122.createElement(
+    import_ui106.IconButton,
     {
       size: SIZE12,
       sx: {
@@ -8377,30 +8415,30 @@ var Repeater3 = ({
       onClick: addRepeaterItem,
       "aria-label": (0, import_i18n60.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React121.createElement(import_icons39.PlusIcon, { fontSize: SIZE12 })
+    /* @__PURE__ */ React122.createElement(import_icons39.PlusIcon, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React121.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React121.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React121.createElement(
-    import_ui105.Infotip,
+  return /* @__PURE__ */ React122.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React122.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React122.createElement(
+    import_ui106.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React121.createElement(import_ui105.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React121.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React122.createElement(import_ui106.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React122.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React121.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React121.createElement(
+    return /* @__PURE__ */ React122.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React122.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React121.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React121.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React121.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React121.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React122.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React122.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React122.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React122.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -8414,7 +8452,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React121.createElement(
+      (props) => /* @__PURE__ */ React122.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -8454,12 +8492,12 @@ var RepeaterItem = ({
     },
     wrappedOnPopoverClose
   );
-  const triggerProps = (0, import_ui105.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui106.bindTrigger)(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
   const duplicateLabel = (0, import_i18n60.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n60.__)("Show", "elementor") : (0, import_i18n60.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n60.__)("Remove", "elementor");
-  return /* @__PURE__ */ React121.createElement(import_ui105.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React121.createElement(
+  return /* @__PURE__ */ React122.createElement(import_ui106.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React122.createElement(
     RepeaterTag,
     {
       disabled,
@@ -8474,14 +8512,14 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React121.createElement(React121.Fragment, null, showDuplicate && /* @__PURE__ */ React121.createElement(import_ui105.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React121.createElement(import_ui105.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React121.createElement(import_icons39.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React121.createElement(import_ui105.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React121.createElement(import_ui105.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React121.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React121.createElement(import_icons39.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React121.createElement(import_ui105.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React121.createElement(import_ui105.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React121.createElement(import_icons39.XIcon, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React122.createElement(React122.Fragment, null, showDuplicate && /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React122.createElement(import_ui106.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React122.createElement(import_icons39.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React122.createElement(import_ui106.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React122.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React122.createElement(import_icons39.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React122.createElement(import_ui106.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React122.createElement(import_icons39.XIcon, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React121.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React121.createElement(import_ui105.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React122.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React122.createElement(import_ui106.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = (0, import_react71.useState)(null);
-  const popoverState = (0, import_ui105.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui105.bindPopover)(popoverState);
+  const popoverState = (0, import_ui106.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui106.bindPopover)(popoverState);
   (0, import_react71.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
@@ -8501,19 +8539,19 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-var React123 = __toESM(require("react"));
+var React124 = __toESM(require("react"));
 var import_react73 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
-var import_ui107 = require("@elementor/ui");
+var import_ui108 = require("@elementor/ui");
 var import_react74 = require("@tiptap/react");
 var import_i18n62 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
-var React122 = __toESM(require("react"));
+var React123 = __toESM(require("react"));
 var import_react72 = require("react");
 var import_icons40 = require("@elementor/icons");
-var import_ui106 = require("@elementor/ui");
+var import_ui107 = require("@elementor/ui");
 var import_i18n61 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
@@ -8534,19 +8572,19 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React122.createElement(
-    import_ui106.Popover,
+  return /* @__PURE__ */ React123.createElement(
+    import_ui107.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui106.bindPopover)(popupState),
+      ...(0, import_ui107.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React122.createElement(import_ui106.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
-      import_ui106.TextField,
+    /* @__PURE__ */ React123.createElement(import_ui107.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React123.createElement(
+      import_ui107.TextField,
       {
         value,
         onChange,
@@ -8558,8 +8596,8 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: (0, import_i18n61.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
-      import_ui106.ToggleButton,
+    ), /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: (0, import_i18n61.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React123.createElement(
+      import_ui107.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
@@ -8568,7 +8606,7 @@ var UrlPopover = ({
         "aria-label": (0, import_i18n61.__)("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React122.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React123.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -8578,7 +8616,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   const [urlValue, setUrlValue] = (0, import_react73.useState)("");
   const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
   const toolbarRef = (0, import_react73.useRef)(null);
-  const linkPopupState = (0, import_ui107.usePopupState)({ variant: "popover" });
+  const linkPopupState = (0, import_ui108.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = (0, import_react74.useEditorState)({
     editor,
@@ -8624,8 +8662,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   (0, import_react73.useEffect)(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React123.createElement(
-    import_ui107.Box,
+  return /* @__PURE__ */ React124.createElement(
+    import_ui108.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -8641,9 +8679,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(import_ui107.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React123.createElement(
-      import_ui107.ToggleButtonGroup,
+    /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React124.createElement(import_ui108.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React124.createElement(
+      import_ui108.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -8651,7 +8689,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui107.toggleButtonGroupClasses.firstButton}, & .${import_ui107.toggleButtonGroupClasses.middleButton}, & .${import_ui107.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui108.toggleButtonGroupClasses.firstButton}, & .${import_ui108.toggleButtonGroupClasses.middleButton}, & .${import_ui108.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -8664,8 +8702,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
-        import_ui107.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React124.createElement(
+        import_ui108.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -8682,7 +8720,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React123.createElement(
+    /* @__PURE__ */ React124.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -8706,7 +8744,7 @@ var checkIfElementIsClickable = (elementId) => {
 var toolbarButtons = {
   clear: {
     label: (0, import_i18n62.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
@@ -8714,7 +8752,7 @@ var toolbarButtons = {
   },
   bold: {
     label: (0, import_i18n62.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
@@ -8722,7 +8760,7 @@ var toolbarButtons = {
   },
   italic: {
     label: (0, import_i18n62.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
@@ -8730,7 +8768,7 @@ var toolbarButtons = {
   },
   underline: {
     label: (0, import_i18n62.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
@@ -8738,7 +8776,7 @@ var toolbarButtons = {
   },
   strike: {
     label: (0, import_i18n62.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
@@ -8746,7 +8784,7 @@ var toolbarButtons = {
   },
   superscript: {
     label: (0, import_i18n62.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
@@ -8754,7 +8792,7 @@ var toolbarButtons = {
   },
   subscript: {
     label: (0, import_i18n62.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
@@ -8762,7 +8800,7 @@ var toolbarButtons = {
   },
   link: {
     label: (0, import_i18n62.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -8771,8 +8809,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-var React126 = __toESM(require("react"));
-var import_ui109 = require("@elementor/ui");
+var React127 = __toESM(require("react"));
+var import_ui110 = require("@elementor/ui");
 
 // src/hooks/use-size-value.ts
 var DEFAULT_UNIT2 = "px";
@@ -8814,17 +8852,17 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-var React124 = __toESM(require("react"));
+var React125 = __toESM(require("react"));
 var import_react75 = require("react");
 var import_editor_ui18 = require("@elementor/editor-ui");
-var import_ui108 = require("@elementor/ui");
+var import_ui109 = require("@elementor/ui");
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui108.usePopupState)({
+  const popupState = (0, import_ui109.usePopupState)({
     variant: "popover",
     popupId: (0, import_react75.useId)()
   });
@@ -8832,7 +8870,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React124.createElement(React124.Fragment, null, /* @__PURE__ */ React124.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui108.bindTrigger)(popupState) }, value), /* @__PURE__ */ React124.createElement(import_ui108.Menu, { MenuListProps: { dense: true }, ...(0, import_ui108.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React124.createElement(
+  return /* @__PURE__ */ React125.createElement(React125.Fragment, null, /* @__PURE__ */ React125.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui109.bindTrigger)(popupState) }, value), /* @__PURE__ */ React125.createElement(import_ui109.Menu, { MenuListProps: { dense: true }, ...(0, import_ui109.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React125.createElement(
     import_editor_ui18.MenuListItem,
     {
       key: option,
@@ -8851,7 +8889,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = (0, import_ui108.styled)(import_ui108.Button, {
+var StyledButton3 = (0, import_ui109.styled)(import_ui109.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -8861,11 +8899,11 @@ var StyledButton3 = (0, import_ui108.styled)(import_ui108.Button, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-var React125 = __toESM(require("react"));
+var React126 = __toESM(require("react"));
 var import_react76 = require("react");
 var UnstableSizeInput = (0, import_react76.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React125.createElement(
+    return /* @__PURE__ */ React126.createElement(
       NumberInput,
       {
         ref,
@@ -8903,7 +8941,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React126.createElement(
+  return /* @__PURE__ */ React127.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -8912,8 +8950,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React126.createElement(import_ui109.InputAdornment, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React126.createElement(import_ui109.InputAdornment, { position: "end" }, /* @__PURE__ */ React126.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React127.createElement(import_ui110.InputAdornment, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React127.createElement(import_ui110.InputAdornment, { position: "end" }, /* @__PURE__ */ React127.createElement(
           UnitSelect,
           {
             options: units2,
@@ -8985,6 +9023,7 @@ var useFontFamilies = () => {
   FilterRepeaterControl,
   FontFamilyControl,
   GapControl,
+  GridSpanControl,
   HtmlTagControl,
   ImageControl,
   InlineEditingControl,