@elementor/editor-controls 4.3.0-1059 → 4.3.0-1060

package/dist/index.mjs

@@ -5315,11 +5315,21 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React81 from "react";
-import { useState as useState16 } from "react";
+import { useEffect as useEffect16, useState as useState16 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
+import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Button as Button5, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled9, ThemeProvider } from "@elementor/ui";
+import {
+  Box as Box15,
+  Button as Button5,
+  Card as Card2,
+  CardMedia as CardMedia2,
+  CardOverlay as CardOverlay2,
+  CircularProgress as CircularProgress3,
+  Stack as Stack13,
+  styled as styled9,
+  ThemeProvider
+} from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __32 } from "@wordpress/i18n";
 
@@ -5383,10 +5393,49 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
   isPending ? /* @__PURE__ */ React80.createElement(CircularProgress2, { size: 24 }) : __31("Enable", "elementor")
 )));
 
+// src/controls/open-icon-library.ts
+import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
+var SVG_ICON_LIBRARY = "svg";
+function isSvgLibrarySelection(icon) {
+  return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
+}
+function openIconLibrary({ selected, onSelect } = {}) {
+  const iconManager = window.elementor?.iconManager;
+  if (!iconManager) {
+    return;
+  }
+  iconManager.loadIconLibraries();
+  iconManager.show({
+    view: createIconManagerControlView(selected, onSelect)
+  });
+}
+function enqueueIconFonts(library) {
+  window.elementor?.helpers?.enqueueIconFonts?.(library);
+}
+function createIconManagerControlView(selected, onSelect) {
+  return {
+    model: {
+      get: () => false
+    },
+    getControlValue: () => selected ?? { value: "", library: "" },
+    setValue: (icon) => {
+      onSelect?.(icon);
+    },
+    applySavedValue: () => void 0
+  };
+}
+function createIconPropValue(icon, library) {
+  return {
+    value: stringPropTypeUtil14.create(icon),
+    library: stringPropTypeUtil14.create(library)
+  };
+}
+
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
+var ICON_PREVIEW_FONT_SIZE = 50;
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
 var StyledCard = styled9(Card2)`
 	background-color: white;
@@ -5408,21 +5457,24 @@ var StyledCardMediaContainer = styled9(Stack13)`
 `;
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
-var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(svgSrcPropTypeUtil);
-  const id = value?.id;
-  const url = value?.url;
+var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
+  const { value: svgValue, setValue: setSvgValue } = useBoundProp(svgSrcPropTypeUtil);
+  const { value: iconValue, setValue: setIconValue } = useBoundProp(iconPropTypeUtil);
+  const id = svgValue?.id;
+  const url = svgValue?.url;
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState16(false);
   const { isAdmin } = useCurrentUserCapabilities();
+  const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
+  const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
   const { open } = useWpMediaFrame2({
     mediaTypes: ["svg"],
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
-      setValue({
+      setSvgValue({
         id: {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
@@ -5444,18 +5496,36 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
+  const handleIconLibrarySelect = (icon) => {
+    if (!showIconLibrary) {
+      return;
+    }
+    if (isSvgLibrarySelection(icon)) {
+      setSvgValue({
+        id: icon.value.id ? {
+          $$type: "image-attachment-id",
+          value: icon.value.id
+        } : null,
+        url: icon.value.url ? urlPropTypeUtil4.create(icon.value.url) : null
+      });
+      return;
+    }
+    if (typeof icon.value === "string") {
+      setIconValue(createIconPropValue(icon.value, icon.library));
+    }
+  };
   const infotipProps = {
     title: __32("Sorry, you can't upload that file yet.", "elementor"),
     description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, __32("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), __32("file uploads.", "elementor")),
     isEnabled: !isAdmin
   };
-  return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React81.createElement(
-    CardMedia2,
+  return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React81.createElement(
+    SvgMediaPreview,
     {
-      component: "img",
-      image: src,
-      alt: __32("Preview SVG", "elementor"),
-      sx: { maxHeight: "140px", width: "50px" }
+      isFetching,
+      src,
+      iconClassName: selectedIconClass,
+      iconLibrary: selectedIconLibrary
     }
   )), /* @__PURE__ */ React81.createElement(
     CardOverlay2,
@@ -5476,7 +5546,20 @@ var SvgMediaControl = createControl(() => {
         "aria-label": "Select SVG"
       },
       __32("Select SVG", "elementor")
-    ), /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
+    ), showIconLibrary ? /* @__PURE__ */ React81.createElement(
+      Button5,
+      {
+        size: "tiny",
+        variant: "text",
+        color: "inherit",
+        onClick: () => openIconLibrary({
+          selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
+          onSelect: handleIconLibrarySelect
+        }),
+        "aria-label": __32("Icon library", "elementor")
+      },
+      __32("Icon library", "elementor")
+    ) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
       Button5,
       {
         size: "tiny",
@@ -5491,6 +5574,41 @@ var SvgMediaControl = createControl(() => {
     )))))
   ))));
 });
+function SvgMediaPreview({
+  isFetching,
+  src,
+  iconClassName,
+  iconLibrary
+}) {
+  useEffect16(() => {
+    if (iconLibrary) {
+      enqueueIconFonts(iconLibrary);
+    }
+  }, [iconLibrary]);
+  if (isFetching) {
+    return /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" });
+  }
+  if (iconClassName) {
+    return /* @__PURE__ */ React81.createElement(
+      Box15,
+      {
+        component: "i",
+        className: iconClassName,
+        "aria-label": __32("Preview icon", "elementor"),
+        sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
+      }
+    );
+  }
+  return /* @__PURE__ */ React81.createElement(
+    CardMedia2,
+    {
+      component: "img",
+      image: src,
+      alt: __32("Preview SVG", "elementor"),
+      sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
+    }
+  );
+}
 
 // src/controls/video-media-control.tsx
 import * as React82 from "react";
@@ -5612,7 +5730,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box15, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { Box as Box16, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
 import { __ as __38 } from "@wordpress/i18n";
 
@@ -5628,7 +5746,7 @@ import {
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil5,
-  stringPropTypeUtil as stringPropTypeUtil14
+  stringPropTypeUtil as stringPropTypeUtil15
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -5636,13 +5754,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil14.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil15.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil14.create(newValue.type),
+    type: stringPropTypeUtil15.create(newValue.type),
     angle: numberPropTypeUtil5.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -5678,7 +5796,7 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil14.create("linear"),
+  type: stringPropTypeUtil15.create("linear"),
   angle: numberPropTypeUtil5.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -5718,7 +5836,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React85 from "react";
 import { useRef as useRef15 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
@@ -5737,7 +5855,7 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil15);
+  const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!backgroundImageOffsetContext.value;
   const rowRef = useRef15(null);
   const handlePositionChange = (event) => {
@@ -5813,7 +5931,7 @@ var BackgroundImageOverlayRepeat = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React87 from "react";
 import { useRef as useRef16 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -5852,7 +5970,7 @@ var sizeControlOptions = [
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil16);
+  const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageScaleContext.value;
   const rowRef = useRef16(null);
   const handleSizeChange = (size) => {
@@ -6014,7 +6132,7 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React88.createElement(Box16, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box16, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
     Tabs,
     {
       size: "small",
@@ -6163,7 +6281,7 @@ var BackgroundClipField = () => {
 import * as React90 from "react";
 import { useMemo as useMemo12 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
-import { Box as Box16 } from "@elementor/ui";
+import { Box as Box17 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -6309,7 +6427,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React90.createElement(Box16, { component: "span", color }, label);
+  return /* @__PURE__ */ React90.createElement(Box17, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -6322,7 +6440,7 @@ import { useMemo as useMemo13, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil17
+  stringPropTypeUtil as stringPropTypeUtil18
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
@@ -6394,7 +6512,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil17.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil18.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -6434,7 +6552,7 @@ var KeyValueControl = createControl((props = {}) => {
 
 // src/controls/position-control.tsx
 import * as React92 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
@@ -6453,7 +6571,7 @@ var positionOptions = [
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil18);
+  const stringPropContext = useBoundProp(stringPropTypeUtil19);
   const isCustom = !!positionContext.value;
   const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
   const handlePositionChange = (event) => {
@@ -6496,7 +6614,7 @@ import * as React105 from "react";
 import { useRef as useRef25 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger5, Box as Box20, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
+import { bindTrigger as bindTrigger5, Box as Box21, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
 import { __ as __51 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -6552,7 +6670,7 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 
 // src/controls/transform-control/transform-content.tsx
 import * as React99 from "react";
-import { Box as Box17, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { Box as Box18, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
@@ -6823,7 +6941,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box17, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box17, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box18, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box18, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
     Tabs2,
     {
       size: "small",
@@ -6863,7 +6981,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 import * as React101 from "react";
-import { Box as Box18 } from "@elementor/ui";
+import { Box as Box19 } from "@elementor/ui";
 import { __ as __47 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
@@ -6894,14 +7012,14 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React101.createElement(Box18, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React101.createElement(Box19, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
 import * as React104 from "react";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, Box as Box19, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
+import { bindPopover as bindPopover6, Box as Box20, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
@@ -7011,7 +7129,7 @@ var TransformSettingsControl = ({
       }
     ),
     /* @__PURE__ */ React104.createElement(Divider4, null),
-    /* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box19, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box20, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -7033,7 +7151,7 @@ var TransformRepeaterControl = createControl(
   }
 );
 var ToolTip = /* @__PURE__ */ React105.createElement(
-  Box20,
+  Box21,
   {
     component: "span",
     "aria-label": void 0,
@@ -7100,13 +7218,13 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React108 from "react";
-import { useEffect as useEffect16, useMemo as useMemo16, useState as useState18 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo16, useState as useState18 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box22, Typography as Typography8 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box23, Typography as Typography8 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __54 } from "@wordpress/i18n";
 
@@ -7337,7 +7455,7 @@ import { useMemo as useMemo15, useRef as useRef27 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box21, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
+import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box22, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
@@ -7465,7 +7583,7 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React107.createElement(Box21, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React107.createElement(Box22, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
     UnstableTag3,
     {
       variant: "outlined",
@@ -7497,7 +7615,7 @@ var TransitionSelector = ({
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
         categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
-          Box21,
+          Box22,
           {
             sx: {
               display: "flex",
@@ -7639,7 +7757,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
     icon: /* @__PURE__ */ React108.createElement(InfoCircleFilledIcon3, null)
   },
   /* @__PURE__ */ React108.createElement(AlertTitle3, null, __54("Transitions", "elementor")),
-  /* @__PURE__ */ React108.createElement(Box22, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React108.createElement(Box23, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -7665,7 +7783,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    useEffect16(() => {
+    useEffect17(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -7677,7 +7795,7 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect16(() => {
+    useEffect17(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
     const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
@@ -7711,9 +7829,9 @@ var TransitionRepeaterControl = createControl(
 // src/controls/date-time-control.tsx
 import * as React109 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
-import { Box as Box23, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
+import { Box as Box24, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -7757,10 +7875,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box23, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box24, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil19.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7772,7 +7890,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   )), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil19.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7965,12 +8083,12 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 import * as React117 from "react";
 import { useCallback as useCallback4, useState as useState20 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
-import { Box as Box26 } from "@elementor/ui";
+import { Box as Box27 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React114 from "react";
-import { useEffect as useEffect17, useRef as useRef28 } from "react";
-import { Box as Box24 } from "@elementor/ui";
+import { useEffect as useEffect18, useRef as useRef28 } from "react";
+import { Box as Box25 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
@@ -7986,7 +8104,7 @@ import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/utils/inline-editing.ts
-import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
+import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
 function isEmpty(value = "") {
   if (!value) {
     return true;
@@ -8008,7 +8126,7 @@ function extractInlineHtmlContent(propValue) {
     return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
   }
   const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
-  return stringPropTypeUtil20.extract(htmlV3?.content ?? null) ?? "";
+  return stringPropTypeUtil21.extract(htmlV3?.content ?? null) ?? "";
 }
 
 // src/components/inline-editor.tsx
@@ -8128,11 +8246,11 @@ var InlineEditor = React114.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React114.createElement(Box24, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React114.createElement(Box25, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef28(false);
-  useEffect17(() => {
+  useEffect18(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -8143,7 +8261,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React116 from "react";
-import { useEffect as useEffect19, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8156,7 +8274,7 @@ import {
   UnderlineIcon
 } from "@elementor/icons";
 import {
-  Box as Box25,
+  Box as Box26,
   IconButton as IconButton9,
   ToggleButton as ToggleButton3,
   ToggleButtonGroup as ToggleButtonGroup2,
@@ -8169,7 +8287,7 @@ import { __ as __58 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React115 from "react";
-import { useEffect as useEffect18, useRef as useRef29 } from "react";
+import { useEffect as useEffect19, useRef as useRef29 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover8, Popover as Popover8, Stack as Stack19, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
@@ -8183,7 +8301,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef29(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -8284,13 +8402,13 @@ var InlineEditorToolbar = ({
     }
     linkPopupState.close();
   };
-  useEffect19(() => {
+  useEffect20(() => {
     if (!inControlPanel) {
       editor?.commands?.focus();
     }
   }, [editor, inControlPanel]);
   return /* @__PURE__ */ React116.createElement(
-    Box25,
+    Box26,
     {
       ref: toolbarRef,
       sx: {
@@ -8471,7 +8589,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
     },
     [setValue]
   );
-  return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box26, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box27, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -8485,7 +8603,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       inControlPanel: true
     }
   ), /* @__PURE__ */ React117.createElement(
-    Box26,
+    Box27,
     {
       sx: {
         p: 0.8,
@@ -8549,7 +8667,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 import * as React121 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box27, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
+import { Box as Box28, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
 import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
@@ -8560,7 +8678,7 @@ import { __ as __59 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
 import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var FORM_FIELD_WIDGET_TYPES = [
   "e-form-input",
@@ -8577,7 +8695,7 @@ function isFormFieldWidgetType(widgetType) {
   return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
 }
 function extractStringPropValue(value) {
-  return stringPropTypeUtil21.extract(value);
+  return stringPropTypeUtil22.extract(value);
 }
 function getSettingWithDefault(child, widgetType, key) {
   const fromGet = child.settings.get(key);
@@ -8647,7 +8765,7 @@ function useFormFieldSuggestions(options) {
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React118 from "react";
 import { useMemo as useMemo18, useState as useState21 } from "react";
-import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
+import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
 
 // src/controls/email-form-action-control/utils.ts
@@ -8686,7 +8804,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
   const [inputValue, setInputValue] = useState21("");
   const items2 = value || [];
-  const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
+  const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
   const suggestionOptions = useMemo18(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
@@ -8696,7 +8814,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
     if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
       return;
     }
-    setValue([...items2, stringPropTypeUtil22.create(address)]);
+    setValue([...items2, stringPropTypeUtil23.create(address)]);
     setInputValue("");
   };
   const handleChange = (_, newValue) => {
@@ -8706,7 +8824,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       if (!address || !isValidRecipient(address)) {
         continue;
       }
-      updated.push(stringPropTypeUtil22.create(address));
+      updated.push(stringPropTypeUtil23.create(address));
     }
     setValue(updated);
     setInputValue("");
@@ -8851,7 +8969,7 @@ var EmailFormActionControl = createControl(
     return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + __60("settings", "elementor") : __60("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box27, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box28, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
 import * as React122 from "react";
@@ -8916,7 +9034,7 @@ import { __ as __62 } from "@wordpress/i18n";
 import * as React124 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
-import { Box as Box28 } from "@elementor/ui";
+import { Box as Box29 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
@@ -8948,7 +9066,7 @@ var PromotionTrigger = forwardRef12(
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React124.createElement(
-        Box28,
+        Box29,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -9042,12 +9160,12 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React128 from "react";
-import { useEffect as useEffect20, useState as useState23 } from "react";
+import { useEffect as useEffect21, useState as useState23 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
   bindTrigger as bindTrigger7,
-  Box as Box29,
+  Box as Box30,
   IconButton as IconButton12,
   Infotip as Infotip4,
   Tooltip as Tooltip14,
@@ -9156,7 +9274,7 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React128.createElement(Box29, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React128.createElement(Box30, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
   ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
@@ -9228,7 +9346,7 @@ var RepeaterItem = ({
   const duplicateLabel = __64("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __64("Show", "elementor") : __64("Hide", "elementor");
   const removeLabel = __64("Remove", "elementor");
-  return /* @__PURE__ */ React128.createElement(Box29, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
+  return /* @__PURE__ */ React128.createElement(Box30, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
     RepeaterTag,
     {
       disabled,
@@ -9245,13 +9363,13 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box29, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box30, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState23(null);
   const popoverState = usePopupState11({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
-  useEffect20(() => {
+  useEffect21(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();