@elementor/editor-controls 4.4.0-1119 → 4.4.0-1121

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -510,7 +510,7 @@ function ControlActions({ children }) {
510
510
  if (items2.length === 0 || disabled) {
511
511
  return children;
512
512
  }
513
- const menuItems = items2.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React10.createElement(MenuItem4, { key: id }));
513
+ const menuItems = items2.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React10.createElement(MenuItem3, { key: id }));
514
514
  return /* @__PURE__ */ React10.createElement(import_editor_ui.FloatingActionsBar, { actions: menuItems }, children);
515
515
  }
516
516
 
@@ -5444,11 +5444,11 @@ var AspectRatioControl = createControl(({ label }) => {
5444
5444
  });
5445
5445
 
5446
5446
  // src/controls/svg-media-control.tsx
5447
- var React88 = __toESM(require("react"));
5448
- var import_react54 = require("react");
5447
+ var React89 = __toESM(require("react"));
5448
+ var import_react53 = require("react");
5449
5449
  var import_editor_current_user = require("@elementor/editor-current-user");
5450
5450
  var import_editor_props35 = require("@elementor/editor-props");
5451
- var import_ui71 = require("@elementor/ui");
5451
+ var import_ui72 = require("@elementor/ui");
5452
5452
  var import_wp_media2 = require("@elementor/wp-media");
5453
5453
  var import_i18n38 = require("@wordpress/i18n");
5454
5454
 
@@ -5518,12 +5518,12 @@ function measureIconLibraryAnchor(container, buttonGroup) {
5518
5518
  }
5519
5519
 
5520
5520
  // src/controls/icon-library/icon-library-popover.tsx
5521
- var React85 = __toESM(require("react"));
5522
- var import_react53 = require("react");
5521
+ var React86 = __toESM(require("react"));
5522
+ var import_react52 = require("react");
5523
5523
  var import_editor_ui11 = require("@elementor/editor-ui");
5524
5524
  var import_icons23 = require("@elementor/icons");
5525
5525
  var import_session2 = require("@elementor/session");
5526
- var import_ui68 = require("@elementor/ui");
5526
+ var import_ui69 = require("@elementor/ui");
5527
5527
  var import_utils6 = require("@elementor/utils");
5528
5528
  var import_i18n35 = require("@wordpress/i18n");
5529
5529
 
@@ -6487,21 +6487,22 @@ var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
6487
6487
  // src/controls/icon-library/icon-library-filter.tsx
6488
6488
  var FILTER_MENU_WIDTH = 280;
6489
6489
  var FILTER_INDICATOR_SIZE = 6;
6490
- var FILTER_INDICATOR_OFFSET = 4;
6490
+ var FILTER_INDICATOR_CORNER_OFFSET = -(FILTER_INDICATOR_SIZE / 2);
6491
6491
  var FILTER_TYPE_ALL = "all";
6492
6492
  var FILTER_TYPE_GROUP = "group";
6493
6493
  var FILTER_TYPE_ITEM = "item";
6494
6494
  var FILTER_ICONS = {
6495
- list: import_icons21.ListIcon,
6495
+ list: import_icons21.MenuIcon,
6496
6496
  star: import_icons21.StarIcon,
6497
6497
  "star-filled": import_icons21.StarFilledIcon,
6498
- library: import_icons21.LibraryIcon
6498
+ library: import_icons21.LibraryIcon,
6499
+ rosette: import_icons21.RosetteDiscountCheckIcon
6499
6500
  };
6500
6501
  var DEFAULT_FILTER = [
6501
6502
  { type: FILTER_TYPE_ALL, label: "All icons", icon: "list" },
6502
6503
  { type: FILTER_TYPE_ITEM, value: "fa-regular", label: "Font Awesome - Regular", icon: "star" },
6503
6504
  { type: FILTER_TYPE_ITEM, value: "fa-solid", label: "Font Awesome - Solid", icon: "star-filled" },
6504
- { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "library" }
6505
+ { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "rosette" }
6505
6506
  ];
6506
6507
  var IconLibraryFilter = ({ value, onChange }) => {
6507
6508
  const popupId = (0, import_react50.useId)();
@@ -6533,7 +6534,7 @@ var IconLibraryFilter = ({ value, onChange }) => {
6533
6534
  value: "filter",
6534
6535
  size: "tiny",
6535
6536
  selected: popupState.isOpen,
6536
- sx: { position: "relative", flexShrink: 0 },
6537
+ sx: { position: "relative", flexShrink: 0, overflow: "visible" },
6537
6538
  ...(0, import_ui65.bindToggle)(popupState),
6538
6539
  "aria-expanded": popupState.isOpen
6539
6540
  },
@@ -6545,12 +6546,12 @@ var IconLibraryFilter = ({ value, onChange }) => {
6545
6546
  "aria-hidden": "true",
6546
6547
  sx: {
6547
6548
  position: "absolute",
6548
- insetBlockStart: FILTER_INDICATOR_OFFSET,
6549
- insetInlineEnd: FILTER_INDICATOR_OFFSET,
6549
+ insetBlockStart: FILTER_INDICATOR_CORNER_OFFSET,
6550
+ insetInlineEnd: FILTER_INDICATOR_CORNER_OFFSET,
6550
6551
  width: FILTER_INDICATOR_SIZE,
6551
6552
  height: FILTER_INDICATOR_SIZE,
6552
6553
  borderRadius: "50%",
6553
- bgcolor: "secondary.main"
6554
+ bgcolor: "text.primary"
6554
6555
  }
6555
6556
  }
6556
6557
  ) : null
@@ -6658,8 +6659,9 @@ var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
6658
6659
  var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
6659
6660
  var ICON_GLYPH_SIZE = 20;
6660
6661
  var GRID_OVERSCAN = 6;
6661
- var GRID_COLUMN_GAP = 1;
6662
- var GRID_HORIZONTAL_PADDING = 1;
6662
+ var GRID_CELL_GAP = 1;
6663
+ var GRID_HORIZONTAL_PADDING = 2;
6664
+ var GRID_VERTICAL_PADDING = 1.5;
6663
6665
  var HOME_END_KEYS = /* @__PURE__ */ new Set(["Home", "End"]);
6664
6666
  var getGridMetrics = (containerWidth, columnGap, inlinePadding) => {
6665
6667
  const availableWidth = containerWidth - inlinePadding;
@@ -6694,10 +6696,15 @@ var IconLibraryGrid = ({
6694
6696
  const [focusedIndex, setFocusedIndex] = (0, import_react51.useState)(selectedIndex >= 0 ? selectedIndex : 0);
6695
6697
  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react51.useState)(() => getGridMetrics(0, 0, 0));
6696
6698
  const rowCount = Math.ceil(items2.length / columnCount);
6699
+ const cellGap = Number.parseFloat(theme.spacing(GRID_CELL_GAP));
6700
+ const verticalPadding = Number.parseFloat(theme.spacing(GRID_VERTICAL_PADDING));
6697
6701
  const virtualizer = (0, import_react_virtual.useVirtualizer)({
6698
6702
  count: rowCount,
6699
6703
  getScrollElement: () => containerRef.current,
6700
6704
  estimateSize: () => cellSize,
6705
+ gap: cellGap,
6706
+ paddingStart: verticalPadding,
6707
+ paddingEnd: verticalPadding,
6701
6708
  overscan: GRID_OVERSCAN
6702
6709
  });
6703
6710
  const focusedItem = items2[focusedIndex];
@@ -6713,9 +6720,10 @@ var IconLibraryGrid = ({
6713
6720
  return Math.min(current, items2.length - 1);
6714
6721
  });
6715
6722
  if (selectedIndex >= 0) {
6716
- virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
6723
+ virtualizer.measure();
6724
+ virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
6717
6725
  }
6718
- }, [columnCount, items2, selectedIndex, selectedValue]);
6726
+ }, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
6719
6727
  (0, import_react51.useLayoutEffect)(() => {
6720
6728
  if (!shouldRestoreFocusRef.current || !focusedItem) {
6721
6729
  return;
@@ -6733,9 +6741,8 @@ var IconLibraryGrid = ({
6733
6741
  return;
6734
6742
  }
6735
6743
  const measureGrid = () => {
6736
- const columnGap = Number.parseFloat(theme.spacing(GRID_COLUMN_GAP));
6737
6744
  const inlinePadding = Number.parseFloat(theme.spacing(GRID_HORIZONTAL_PADDING)) * 2;
6738
- setGridMetrics(getGridMetrics(container.clientWidth, columnGap, inlinePadding));
6745
+ setGridMetrics(getGridMetrics(container.clientWidth, cellGap, inlinePadding));
6739
6746
  };
6740
6747
  measureGrid();
6741
6748
  const resizeObserver = new ResizeObserver(measureGrid);
@@ -6743,7 +6750,7 @@ var IconLibraryGrid = ({
6743
6750
  return () => {
6744
6751
  resizeObserver.disconnect();
6745
6752
  };
6746
- }, [theme, items2.length]);
6753
+ }, [theme, cellGap, items2.length]);
6747
6754
  (0, import_react51.useLayoutEffect)(() => {
6748
6755
  virtualizer.measure();
6749
6756
  }, [cellSize, columnCount]);
@@ -6840,7 +6847,7 @@ var IconLibraryGrid = ({
6840
6847
  transform: `translateY(${virtualRow.start}px)`,
6841
6848
  display: "grid",
6842
6849
  gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
6843
- gap: GRID_COLUMN_GAP,
6850
+ gap: GRID_CELL_GAP,
6844
6851
  px: GRID_HORIZONTAL_PADDING,
6845
6852
  boxSizing: "border-box"
6846
6853
  }
@@ -6941,21 +6948,17 @@ var IconLibraryGrid = ({
6941
6948
 
6942
6949
  // src/controls/icon-library/icon-library-view-toggle.tsx
6943
6950
  var React84 = __toESM(require("react"));
6944
- var import_react52 = require("react");
6945
6951
  var import_icons22 = require("@elementor/icons");
6946
6952
  var import_ui67 = require("@elementor/ui");
6947
6953
  var import_i18n34 = require("@wordpress/i18n");
6948
- var VIEW_MENU_WIDTH = 122;
6954
+ var HEADER_ACTION_GAP = 0.5;
6949
6955
  var IconLibraryViewToggle = ({ value, onChange }) => {
6950
- const popupId = (0, import_react52.useId)();
6951
- const popupState = (0, import_ui67.usePopupState)({
6952
- variant: "popover",
6953
- popupId
6954
- });
6955
6956
  const isGrid = value === "grid";
6957
+ const nextView = isGrid ? "list" : "grid";
6956
6958
  const ViewIcon = isGrid ? import_icons22.WidgetsIcon : import_icons22.ListIcon;
6957
6959
  const viewButtonLabel = isGrid ? (0, import_i18n34.__)("Grid view", "elementor") : (0, import_i18n34.__)("List view", "elementor");
6958
- return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(
6960
+ const viewButtonAction = isGrid ? (0, import_i18n34.__)("Switch to list view", "elementor") : (0, import_i18n34.__)("Switch to grid view", "elementor");
6961
+ return /* @__PURE__ */ React84.createElement(
6959
6962
  import_ui67.Tooltip,
6960
6963
  {
6961
6964
  title: viewButtonLabel,
@@ -6965,54 +6968,25 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
6965
6968
  disableInteractive: true
6966
6969
  },
6967
6970
  /* @__PURE__ */ React84.createElement(
6968
- import_ui67.ToggleButton,
6971
+ import_ui67.IconButton,
6969
6972
  {
6970
- "aria-label": viewButtonLabel,
6971
- value: "view",
6973
+ "aria-label": viewButtonAction,
6972
6974
  size: "tiny",
6973
- selected: popupState.isOpen,
6974
- sx: { flexShrink: 0 },
6975
- ...(0, import_ui67.bindToggle)(popupState),
6976
- "aria-expanded": popupState.isOpen
6975
+ onClick: () => onChange(nextView),
6976
+ sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
6977
6977
  },
6978
6978
  /* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
6979
6979
  )
6980
- ), /* @__PURE__ */ React84.createElement(
6981
- import_ui67.Menu,
6982
- {
6983
- ...(0, import_ui67.bindMenu)(popupState),
6984
- MenuListProps: {
6985
- dense: true,
6986
- autoFocusItem: true,
6987
- "aria-label": (0, import_i18n34.__)("View", "elementor")
6988
- },
6989
- sx: { "& .MuiPaper-root": { minWidth: VIEW_MENU_WIDTH } }
6990
- },
6991
- /* @__PURE__ */ React84.createElement(
6992
- ViewMenuItem,
6993
- {
6994
- label: (0, import_i18n34.__)("List", "elementor"),
6995
- selected: value === "list",
6996
- onClick: () => {
6997
- onChange("list");
6998
- popupState.close();
6999
- }
7000
- }
7001
- ),
7002
- /* @__PURE__ */ React84.createElement(
7003
- ViewMenuItem,
7004
- {
7005
- label: (0, import_i18n34.__)("Grid", "elementor"),
7006
- selected: value === "grid",
7007
- onClick: () => {
7008
- onChange("grid");
7009
- popupState.close();
7010
- }
7011
- }
7012
- )
7013
- ));
6980
+ );
7014
6981
  };
7015
- var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(import_ui67.MenuItem, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(import_ui67.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(import_icons22.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null));
6982
+
6983
+ // src/controls/icon-library/svg-element-icon.tsx
6984
+ var React85 = __toESM(require("react"));
6985
+ var import_ui68 = require("@elementor/ui");
6986
+ var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
6987
+ var SvgElementIcon = React85.forwardRef(
6988
+ (props, ref) => /* @__PURE__ */ React85.createElement(import_ui68.SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React85.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React85.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
6989
+ );
7016
6990
 
7017
6991
  // src/controls/icon-library/use-font-awesome-7-catalog.ts
7018
6992
  var import_query3 = require("@elementor/query");
@@ -7028,20 +7002,24 @@ function useFontAwesome7Catalog(enabled) {
7028
7002
 
7029
7003
  // src/controls/icon-library/icon-library-popover.tsx
7030
7004
  var ICON_LIBRARY_POPOVER_WIDTH = 300;
7031
- var ICON_LIBRARY_ROW_HEIGHT = 48;
7032
7005
  var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
7033
7006
  var ICON_LIBRARY_VIEW_STORAGE_KEY = "icon-library-view";
7034
7007
  var ICON_LIBRARY_VIEW_STORAGE_PREFIX = "editor-controls";
7035
- var DEFAULT_ICON_LIBRARY_VIEW = "list";
7008
+ var DEFAULT_ICON_LIBRARY_VIEW = "grid";
7036
7009
  var isIconLibraryView = (value) => {
7037
7010
  return value === "grid" || value === "list";
7038
7011
  };
7039
7012
  var ICON_TILE_SIZE = 40;
7013
+ var ICON_LIBRARY_ROW_VERTICAL_PADDING = 0.5;
7014
+ var ICON_LIBRARY_ROW_VERTICAL_PADDING_PX = 4;
7015
+ var ICON_LIBRARY_ROW_HEIGHT = ICON_TILE_SIZE + ICON_LIBRARY_ROW_VERTICAL_PADDING_PX * 2;
7040
7016
  var ICON_GLYPH_SIZE2 = 20;
7041
- var ICON_LIBRARY_INLINE_SPACING = 1;
7042
- var CompactIconLibraryMenuList = (0, import_ui68.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
7017
+ var ICON_LIBRARY_INLINE_SPACING = 2;
7018
+ var ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
7019
+ var ICON_LIBRARY_TITLE_SIZE = "14px";
7020
+ var CompactIconLibraryMenuList = (0, import_ui69.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
7043
7021
  '& > [role="option"]': {
7044
- padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
7022
+ padding: theme.spacing(ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING)
7045
7023
  }
7046
7024
  }));
7047
7025
  var IconLibraryPopover = ({
@@ -7058,7 +7036,7 @@ var IconLibraryPopover = ({
7058
7036
  handleChange: handleSearchChange,
7059
7037
  setImmediateValue: setSearchValue
7060
7038
  } = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
7061
- const [activeLibraries, setActiveLibraries] = (0, import_react53.useState)([]);
7039
+ const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
7062
7040
  const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
7063
7041
  ICON_LIBRARY_VIEW_STORAGE_KEY,
7064
7042
  ICON_LIBRARY_VIEW_STORAGE_PREFIX
@@ -7067,12 +7045,12 @@ var IconLibraryPopover = ({
7067
7045
  const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
7068
7046
  const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries(open);
7069
7047
  const isLoading = isFontAwesomeLoading || isCustomLoading;
7070
- const icons = (0, import_react53.useMemo)(() => [...fontAwesomeIcons, ...customIcons], [customIcons, fontAwesomeIcons]);
7071
- const items2 = (0, import_react53.useMemo)(
7048
+ const icons = (0, import_react52.useMemo)(() => [...fontAwesomeIcons, ...customIcons], [customIcons, fontAwesomeIcons]);
7049
+ const items2 = (0, import_react52.useMemo)(
7072
7050
  () => createIconLibraryItems(icons, searchValue, activeLibraries),
7073
7051
  [activeLibraries, icons, searchValue]
7074
7052
  );
7075
- const selectedValue = (0, import_react53.useMemo)(
7053
+ const selectedValue = (0, import_react52.useMemo)(
7076
7054
  () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
7077
7055
  [icons, selectedIconClass, selectedIconLibrary]
7078
7056
  );
@@ -7094,25 +7072,39 @@ var IconLibraryPopover = ({
7094
7072
  const handleClearSearch = () => {
7095
7073
  setSearchValue("");
7096
7074
  };
7097
- return /* @__PURE__ */ React85.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React85.createElement(
7075
+ return /* @__PURE__ */ React86.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React86.createElement(
7098
7076
  import_editor_ui11.PopoverHeader,
7099
7077
  {
7100
7078
  title: (0, import_i18n35.__)("Icon library", "elementor"),
7101
7079
  onClose: handleClose,
7102
- icon: /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "tiny" }),
7103
- actions: [/* @__PURE__ */ React85.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
7104
- sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
7080
+ icon: /* @__PURE__ */ React86.createElement(import_icons23.LibraryIcon, { fontSize: "tiny" }),
7081
+ actions: [/* @__PURE__ */ React86.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
7082
+ sx: {
7083
+ pl: ICON_LIBRARY_INLINE_SPACING,
7084
+ pr: 1,
7085
+ "& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
7086
+ }
7105
7087
  }
7106
- ), /* @__PURE__ */ React85.createElement(import_ui68.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
7107
- import_editor_ui11.SearchField,
7088
+ ), /* @__PURE__ */ React86.createElement(
7089
+ import_ui69.Stack,
7108
7090
  {
7109
- value: searchInputValue,
7110
- onSearch: handleSearchChange,
7111
- placeholder: (0, import_i18n35.__)("Search", "elementor"),
7112
- id: "icon-library-search",
7113
- sx: { flex: 1, px: 0, pb: 0 }
7114
- }
7115
- ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(import_ui68.Divider, null), /* @__PURE__ */ React85.createElement(import_ui68.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
7091
+ direction: "row",
7092
+ alignItems: "center",
7093
+ gap: 1,
7094
+ sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
7095
+ },
7096
+ /* @__PURE__ */ React86.createElement(
7097
+ import_editor_ui11.SearchField,
7098
+ {
7099
+ value: searchInputValue,
7100
+ onSearch: handleSearchChange,
7101
+ placeholder: (0, import_i18n35.__)("Search", "elementor"),
7102
+ id: "icon-library-search",
7103
+ sx: { flex: 1, px: 0, pb: 0 }
7104
+ }
7105
+ ),
7106
+ /* @__PURE__ */ React86.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
7107
+ ), /* @__PURE__ */ React86.createElement(import_ui69.Divider, null), /* @__PURE__ */ React86.createElement(import_ui69.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React86.createElement(
7116
7108
  IconLibraryContent,
7117
7109
  {
7118
7110
  isLoading,
@@ -7139,9 +7131,9 @@ var IconLibraryContent = ({
7139
7131
  onClearSearch
7140
7132
  }) => {
7141
7133
  if (isLoading) {
7142
- return /* @__PURE__ */ React85.createElement(IconLibraryLoadingState, null);
7134
+ return /* @__PURE__ */ React86.createElement(IconLibraryLoadingState, null);
7143
7135
  }
7144
- const emptyState = /* @__PURE__ */ React85.createElement(
7136
+ const emptyState = /* @__PURE__ */ React86.createElement(
7145
7137
  IconLibraryEmptyState,
7146
7138
  {
7147
7139
  searchValue,
@@ -7150,7 +7142,7 @@ var IconLibraryContent = ({
7150
7142
  }
7151
7143
  );
7152
7144
  if (view === "grid") {
7153
- return /* @__PURE__ */ React85.createElement(import_ui68.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
7145
+ return /* @__PURE__ */ React86.createElement(import_ui69.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React86.createElement(
7154
7146
  IconLibraryGrid,
7155
7147
  {
7156
7148
  items: items2,
@@ -7161,7 +7153,7 @@ var IconLibraryContent = ({
7161
7153
  }
7162
7154
  ));
7163
7155
  }
7164
- return /* @__PURE__ */ React85.createElement(
7156
+ return /* @__PURE__ */ React86.createElement(
7165
7157
  import_editor_ui11.PopoverMenuList,
7166
7158
  {
7167
7159
  items: items2,
@@ -7176,21 +7168,21 @@ var IconLibraryContent = ({
7176
7168
  }
7177
7169
  );
7178
7170
  };
7179
- var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(import_ui68.CircularProgress, { role: "progressbar", size: 24 }));
7171
+ var IconLibraryLoadingState = () => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React86.createElement(import_ui69.CircularProgress, { role: "progressbar", size: 24 }));
7180
7172
  var IconLibraryEmptyState = ({
7181
7173
  searchValue,
7182
7174
  isCatalogAvailable,
7183
7175
  onClear
7184
7176
  }) => {
7185
7177
  if (!isCatalogAvailable) {
7186
- return /* @__PURE__ */ React85.createElement(CatalogUnavailable, null);
7178
+ return /* @__PURE__ */ React86.createElement(CatalogUnavailable, null);
7187
7179
  }
7188
- return /* @__PURE__ */ React85.createElement(NoResults, { searchValue, onClear });
7180
+ return /* @__PURE__ */ React86.createElement(NoResults, { searchValue, onClear });
7189
7181
  };
7190
7182
  var IconLibraryRow = (item) => {
7191
7183
  const icon = item;
7192
- return /* @__PURE__ */ React85.createElement(import_ui68.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
7193
- import_ui68.Box,
7184
+ return /* @__PURE__ */ React86.createElement(import_ui69.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(
7185
+ import_ui69.Box,
7194
7186
  {
7195
7187
  sx: {
7196
7188
  width: ICON_TILE_SIZE,
@@ -7205,11 +7197,11 @@ var IconLibraryRow = (item) => {
7205
7197
  flexShrink: 0
7206
7198
  }
7207
7199
  },
7208
- /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
7209
- ), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
7200
+ /* @__PURE__ */ React86.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
7201
+ ), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
7210
7202
  };
7211
- var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
7212
- var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(import_ui68.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
7203
+ var CatalogUnavailable = () => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
7204
+ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React86.createElement(import_ui69.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
7213
7205
  var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
7214
7206
  ...icon,
7215
7207
  type: "item",
@@ -7217,32 +7209,39 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
7217
7209
  }));
7218
7210
 
7219
7211
  // src/controls/svg-media-overlay.tsx
7220
- var React86 = __toESM(require("react"));
7212
+ var React87 = __toESM(require("react"));
7221
7213
  var import_icons24 = require("@elementor/icons");
7222
- var import_ui69 = require("@elementor/ui");
7214
+ var import_ui70 = require("@elementor/ui");
7223
7215
  var import_i18n36 = require("@wordpress/i18n");
7224
7216
  var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
7225
7217
  var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
7226
- var MEDIA_ACTION_PADDING_Y = 0.75;
7227
- var MEDIA_ACTION_PADDING_X = 2;
7218
+ var SELECT_AREA_WIDTH = 72;
7219
+ var UPLOAD_AREA_WIDTH = 48;
7220
+ var SPLIT_BUTTON_MIN_HEIGHT = 32;
7221
+ var SPLIT_BUTTON_CORNER_RADIUS = "8px";
7222
+ var SPLIT_BUTTON_FONT_SIZE = "14px";
7228
7223
  var ICON_LIBRARY_PADDING = 0.625;
7229
7224
  var svgButtonSx = {
7230
- px: MEDIA_ACTION_PADDING_X,
7231
- py: MEDIA_ACTION_PADDING_Y
7232
- };
7233
- var MediaActionGroup = (0, import_ui69.styled)(import_ui69.Stack)(({ theme }) => ({
7225
+ minWidth: 0,
7226
+ minHeight: SPLIT_BUTTON_MIN_HEIGHT,
7227
+ px: 2,
7228
+ fontSize: SPLIT_BUTTON_FONT_SIZE,
7229
+ fontWeight: 500,
7230
+ lineHeight: 1
7231
+ };
7232
+ var MediaActionGroup = (0, import_ui70.styled)(import_ui70.Stack)({
7234
7233
  display: "inline-flex",
7235
7234
  flexDirection: "row",
7236
7235
  alignItems: "stretch",
7237
7236
  border: "1px solid currentColor",
7238
- borderRadius: theme.shape.borderRadius,
7237
+ borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
7239
7238
  overflow: "hidden",
7240
7239
  "& .MuiButton-root": {
7241
7240
  border: "none",
7242
7241
  borderRadius: 0,
7243
7242
  lineHeight: 1
7244
7243
  }
7245
- }));
7244
+ });
7246
7245
  var SvgMediaOverlay = ({
7247
7246
  isAdmin,
7248
7247
  showIconLibrary,
@@ -7252,19 +7251,19 @@ var SvgMediaOverlay = ({
7252
7251
  onOpenIconLibrary,
7253
7252
  infotipTitle,
7254
7253
  infotipDescription
7255
- }) => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
7256
- import_ui69.Button,
7254
+ }) => /* @__PURE__ */ React87.createElement(import_ui70.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React87.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React87.createElement(
7255
+ import_ui70.Button,
7257
7256
  {
7258
7257
  size: "tiny",
7259
7258
  color: "inherit",
7260
7259
  variant: "text",
7261
7260
  onClick: onSelectSvg,
7262
7261
  "aria-label": (0, import_i18n36.__)("Select", "elementor"),
7263
- sx: svgButtonSx
7262
+ sx: { ...svgButtonSx, minWidth: SELECT_AREA_WIDTH }
7264
7263
  },
7265
7264
  (0, import_i18n36.__)("Select", "elementor")
7266
- ), /* @__PURE__ */ React86.createElement(
7267
- import_ui69.Box,
7265
+ ), /* @__PURE__ */ React87.createElement(
7266
+ import_ui70.Box,
7268
7267
  {
7269
7268
  sx: {
7270
7269
  width: "1px",
@@ -7273,21 +7272,21 @@ var SvgMediaOverlay = ({
7273
7272
  flexShrink: 0
7274
7273
  }
7275
7274
  }
7276
- ), /* @__PURE__ */ React86.createElement(
7275
+ ), /* @__PURE__ */ React87.createElement(
7277
7276
  ConditionalControlInfotip,
7278
7277
  {
7279
7278
  title: infotipTitle,
7280
7279
  description: infotipDescription,
7281
7280
  isEnabled: !isAdmin
7282
7281
  },
7283
- /* @__PURE__ */ React86.createElement(import_ui69.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
7284
- )), showIconLibrary ? /* @__PURE__ */ React86.createElement(
7285
- import_ui69.Button,
7282
+ /* @__PURE__ */ React87.createElement(import_ui70.Box, { component: "span", sx: { display: "flex", width: UPLOAD_AREA_WIDTH } }, /* @__PURE__ */ React87.createElement(UploadControl, { isAdmin, onUpload }))
7283
+ )), showIconLibrary ? /* @__PURE__ */ React87.createElement(
7284
+ import_ui70.Button,
7286
7285
  {
7287
7286
  size: "tiny",
7288
7287
  color: "inherit",
7289
7288
  variant: "text",
7290
- startIcon: /* @__PURE__ */ React86.createElement(import_icons24.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
7289
+ startIcon: /* @__PURE__ */ React87.createElement(import_icons24.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
7291
7290
  "aria-label": (0, import_i18n36.__)("Icon library", "elementor"),
7292
7291
  onClick: onOpenIconLibrary,
7293
7292
  sx: {
@@ -7296,22 +7295,22 @@ var SvgMediaOverlay = ({
7296
7295
  ".MuiButton-icon": { ml: 0 }
7297
7296
  }
7298
7297
  },
7299
- /* @__PURE__ */ React86.createElement(import_ui69.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
7298
+ /* @__PURE__ */ React87.createElement(import_ui70.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
7300
7299
  ) : null);
7301
7300
  var UploadControl = ({ isAdmin, onUpload }) => {
7302
7301
  if (isAdmin) {
7303
- return /* @__PURE__ */ React86.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
7302
+ return /* @__PURE__ */ React87.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
7304
7303
  }
7305
- return /* @__PURE__ */ React86.createElement(import_ui69.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
7304
+ return /* @__PURE__ */ React87.createElement(import_ui70.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React87.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
7306
7305
  };
7307
7306
  var UploadButton = ({
7308
7307
  disabled = false,
7309
7308
  sx,
7310
7309
  onClick
7311
- }) => /* @__PURE__ */ React86.createElement(
7312
- import_ui69.Button,
7310
+ }) => /* @__PURE__ */ React87.createElement(
7311
+ import_ui70.Button,
7313
7312
  {
7314
- sx,
7313
+ sx: { ...sx, width: "100%" },
7315
7314
  size: "tiny",
7316
7315
  color: "inherit",
7317
7316
  variant: "text",
@@ -7319,12 +7318,12 @@ var UploadButton = ({
7319
7318
  onClick,
7320
7319
  "aria-label": (0, import_i18n36.__)("Upload", "elementor")
7321
7320
  },
7322
- /* @__PURE__ */ React86.createElement(import_icons24.UploadIcon, null)
7321
+ /* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, { fontSize: "small" })
7323
7322
  );
7324
7323
 
7325
7324
  // src/controls/svg-media-preview.tsx
7326
- var React87 = __toESM(require("react"));
7327
- var import_ui70 = require("@elementor/ui");
7325
+ var React88 = __toESM(require("react"));
7326
+ var import_ui71 = require("@elementor/ui");
7328
7327
  var import_i18n37 = require("@wordpress/i18n");
7329
7328
  var ICON_PREVIEW_SIZE = 50;
7330
7329
  var ICON_PREVIEW_COLOR = "#000000";
@@ -7336,17 +7335,17 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
7336
7335
  const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
7337
7336
  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
7338
7337
  if (isFetching || isLoadingCatalog) {
7339
- return /* @__PURE__ */ React87.createElement(import_ui70.CircularProgress, { role: "progressbar" });
7338
+ return /* @__PURE__ */ React88.createElement(import_ui71.CircularProgress, { role: "progressbar" });
7340
7339
  }
7341
7340
  if (selectedIcon) {
7342
- return /* @__PURE__ */ React87.createElement(IconPreview, { icon: selectedIcon });
7341
+ return /* @__PURE__ */ React88.createElement(IconPreview, { icon: selectedIcon });
7343
7342
  }
7344
7343
  if (shouldLoadIconCatalog) {
7345
- return /* @__PURE__ */ React87.createElement(IconPreviewPlaceholder, null);
7344
+ return /* @__PURE__ */ React88.createElement(IconPreviewPlaceholder, null);
7346
7345
  }
7347
- return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
7346
+ return /* @__PURE__ */ React88.createElement(SvgPreview, { src });
7348
7347
  };
7349
- var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui70.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
7348
+ var IconPreview = ({ icon }) => /* @__PURE__ */ React88.createElement(import_ui71.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React88.createElement(
7350
7349
  FontAwesomeGlyph,
7351
7350
  {
7352
7351
  icon,
@@ -7355,8 +7354,8 @@ var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui7
7355
7354
  label: (0, import_i18n37.__)("Preview icon", "elementor")
7356
7355
  }
7357
7356
  ));
7358
- var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
7359
- import_ui70.Box,
7357
+ var IconPreviewPlaceholder = () => /* @__PURE__ */ React88.createElement(
7358
+ import_ui71.Box,
7360
7359
  {
7361
7360
  "aria-hidden": true,
7362
7361
  sx: {
@@ -7366,8 +7365,8 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
7366
7365
  }
7367
7366
  }
7368
7367
  );
7369
- var SvgPreview = ({ src }) => /* @__PURE__ */ React87.createElement(
7370
- import_ui70.CardMedia,
7368
+ var SvgPreview = ({ src }) => /* @__PURE__ */ React88.createElement(
7369
+ import_ui71.CardMedia,
7371
7370
  {
7372
7371
  component: "img",
7373
7372
  image: src,
@@ -7381,7 +7380,7 @@ var TILE_SIZE = 8;
7381
7380
  var TILE_WHITE = "transparent";
7382
7381
  var TILE_BLACK = "#c1c1c1";
7383
7382
  var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
7384
- var StyledCard = (0, import_ui71.styled)(import_ui71.Card)`
7383
+ var StyledCard = (0, import_ui72.styled)(import_ui72.Card)`
7385
7384
  position: relative;
7386
7385
  background-color: white;
7387
7386
  background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
@@ -7392,7 +7391,7 @@ var StyledCard = (0, import_ui71.styled)(import_ui71.Card)`
7392
7391
  border: none;
7393
7392
  `;
7394
7393
  var PREVIEW_ICON_COLOR = "#000000";
7395
- var StyledCardMediaContainer = (0, import_ui71.styled)(import_ui71.Stack)`
7394
+ var StyledCardMediaContainer = (0, import_ui72.styled)(import_ui72.Stack)`
7396
7395
  position: relative;
7397
7396
  height: 140px;
7398
7397
  object-fit: contain;
@@ -7412,11 +7411,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7412
7411
  const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
7413
7412
  const src = attachment?.url ?? url?.value ?? null;
7414
7413
  const { data: allowSvgUpload } = useUnfilteredFilesUpload();
7415
- const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react54.useState)(false);
7416
- const iconLibraryPopoverState = (0, import_ui71.usePopupState)({ variant: "popover" });
7417
- const controlContainerRef = (0, import_react54.useRef)(null);
7418
- const buttonGroupRef = (0, import_react54.useRef)(null);
7419
- const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react54.useState)(null);
7414
+ const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react53.useState)(false);
7415
+ const iconLibraryPopoverState = (0, import_ui72.usePopupState)({ variant: "popover" });
7416
+ const controlContainerRef = (0, import_react53.useRef)(null);
7417
+ const buttonGroupRef = (0, import_react53.useRef)(null);
7418
+ const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
7420
7419
  const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
7421
7420
  const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
7422
7421
  const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -7468,7 +7467,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7468
7467
  setIconLibraryAnchor(anchor);
7469
7468
  iconLibraryPopoverState.open(event);
7470
7469
  };
7471
- (0, import_react54.useEffect)(() => {
7470
+ (0, import_react53.useEffect)(() => {
7472
7471
  if (!iconLibraryPopoverState.isOpen) {
7473
7472
  return;
7474
7473
  }
@@ -7484,8 +7483,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7484
7483
  };
7485
7484
  }, [iconLibraryPopoverState.isOpen]);
7486
7485
  const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
7487
- return /* @__PURE__ */ React88.createElement(import_ui71.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
7488
- import_ui71.Popover,
7486
+ return /* @__PURE__ */ React89.createElement(import_ui72.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React89.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React89.createElement(
7487
+ import_ui72.Popover,
7489
7488
  {
7490
7489
  disableScrollLock: true,
7491
7490
  open: iconLibraryPopoverState.isOpen,
@@ -7504,7 +7503,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7504
7503
  }
7505
7504
  }
7506
7505
  },
7507
- /* @__PURE__ */ React88.createElement(
7506
+ /* @__PURE__ */ React89.createElement(
7508
7507
  IconLibraryPopover,
7509
7508
  {
7510
7509
  open: iconLibraryPopoverState.isOpen,
@@ -7515,14 +7514,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7515
7514
  width: iconLibraryWidth
7516
7515
  }
7517
7516
  )
7518
- ) : null, /* @__PURE__ */ React88.createElement(
7519
- import_ui71.Box,
7517
+ ) : null, /* @__PURE__ */ React89.createElement(
7518
+ import_ui72.Box,
7520
7519
  {
7521
7520
  ref: controlContainerRef,
7522
7521
  "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
7523
7522
  sx: { width: "100%" }
7524
7523
  },
7525
- /* @__PURE__ */ React88.createElement(ControlActions, null, /* @__PURE__ */ React88.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React88.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React88.createElement(
7524
+ /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React89.createElement(
7526
7525
  SvgMediaPreview,
7527
7526
  {
7528
7527
  isFetching,
@@ -7530,8 +7529,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7530
7529
  iconClassName: selectedIconClass,
7531
7530
  iconLibrary: selectedIconLibrary
7532
7531
  }
7533
- )), /* @__PURE__ */ React88.createElement(
7534
- import_ui71.CardOverlay,
7532
+ )), /* @__PURE__ */ React89.createElement(
7533
+ import_ui72.CardOverlay,
7535
7534
  {
7536
7535
  sx: {
7537
7536
  "&:hover": {
@@ -7539,7 +7538,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7539
7538
  }
7540
7539
  }
7541
7540
  },
7542
- /* @__PURE__ */ React88.createElement(
7541
+ /* @__PURE__ */ React89.createElement(
7543
7542
  SvgMediaOverlay,
7544
7543
  {
7545
7544
  isAdmin,
@@ -7549,19 +7548,19 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
7549
7548
  onUpload: handleUpload,
7550
7549
  onOpenIconLibrary: handleOpenIconLibrary,
7551
7550
  infotipTitle: (0, import_i18n38.__)("Sorry, you can't upload that file yet.", "elementor"),
7552
- infotipDescription: /* @__PURE__ */ React88.createElement(UnfilteredUploadInfotipDescription, null)
7551
+ infotipDescription: /* @__PURE__ */ React89.createElement(UnfilteredUploadInfotipDescription, null)
7553
7552
  }
7554
7553
  )
7555
7554
  )))
7556
7555
  ));
7557
7556
  });
7558
- var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React88.createElement(React88.Fragment, null, (0, import_i18n38.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React88.createElement("br", null), (0, import_i18n38.__)("file uploads.", "elementor"));
7557
+ var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React89.createElement(React89.Fragment, null, (0, import_i18n38.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React89.createElement("br", null), (0, import_i18n38.__)("file uploads.", "elementor"));
7559
7558
 
7560
7559
  // src/controls/video-media-control.tsx
7561
- var React89 = __toESM(require("react"));
7560
+ var React90 = __toESM(require("react"));
7562
7561
  var import_editor_props36 = require("@elementor/editor-props");
7563
7562
  var import_icons25 = require("@elementor/icons");
7564
- var import_ui72 = require("@elementor/ui");
7563
+ var import_ui73 = require("@elementor/ui");
7565
7564
  var import_wp_media3 = require("@elementor/wp-media");
7566
7565
  var import_i18n39 = require("@wordpress/i18n");
7567
7566
  var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
@@ -7593,8 +7592,8 @@ var VideoMediaControl = createControl(() => {
7593
7592
  });
7594
7593
  }
7595
7594
  });
7596
- return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(import_ui72.Card, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
7597
- import_ui72.CardMedia,
7595
+ return /* @__PURE__ */ React90.createElement(ControlActions, null, /* @__PURE__ */ React90.createElement(import_ui73.Card, { variant: "outlined" }, /* @__PURE__ */ React90.createElement(
7596
+ import_ui73.CardMedia,
7598
7597
  {
7599
7598
  sx: {
7600
7599
  height: 140,
@@ -7608,9 +7607,9 @@ var VideoMediaControl = createControl(() => {
7608
7607
  alignItems: "center"
7609
7608
  }
7610
7609
  },
7611
- /* @__PURE__ */ React89.createElement(VideoPreview, { isFetching, videoUrl })
7612
- ), /* @__PURE__ */ React89.createElement(import_ui72.CardOverlay, null, /* @__PURE__ */ React89.createElement(import_ui72.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(
7613
- import_ui72.Button,
7610
+ /* @__PURE__ */ React90.createElement(VideoPreview, { isFetching, videoUrl })
7611
+ ), /* @__PURE__ */ React90.createElement(import_ui73.CardOverlay, null, /* @__PURE__ */ React90.createElement(import_ui73.Stack, { gap: 1 }, /* @__PURE__ */ React90.createElement(
7612
+ import_ui73.Button,
7614
7613
  {
7615
7614
  size: "tiny",
7616
7615
  color: "inherit",
@@ -7618,18 +7617,18 @@ var VideoMediaControl = createControl(() => {
7618
7617
  onClick: () => open({ mode: "browse" })
7619
7618
  },
7620
7619
  (0, import_i18n39.__)("Select video", "elementor")
7621
- ), /* @__PURE__ */ React89.createElement(
7622
- import_ui72.Button,
7620
+ ), /* @__PURE__ */ React90.createElement(
7621
+ import_ui73.Button,
7623
7622
  {
7624
7623
  size: "tiny",
7625
7624
  variant: "text",
7626
7625
  color: "inherit",
7627
- startIcon: /* @__PURE__ */ React89.createElement(import_icons25.UploadIcon, null),
7626
+ startIcon: /* @__PURE__ */ React90.createElement(import_icons25.UploadIcon, null),
7628
7627
  onClick: () => open({ mode: "upload" })
7629
7628
  },
7630
7629
  (0, import_i18n39.__)("Upload", "elementor")
7631
- ), /* @__PURE__ */ React89.createElement(
7632
- import_ui72.Button,
7630
+ ), /* @__PURE__ */ React90.createElement(
7631
+ import_ui73.Button,
7633
7632
  {
7634
7633
  size: "tiny",
7635
7634
  variant: "text",
@@ -7641,10 +7640,10 @@ var VideoMediaControl = createControl(() => {
7641
7640
  });
7642
7641
  var VideoPreview = ({ isFetching = false, videoUrl }) => {
7643
7642
  if (isFetching) {
7644
- return /* @__PURE__ */ React89.createElement(import_ui72.CircularProgress, null);
7643
+ return /* @__PURE__ */ React90.createElement(import_ui73.CircularProgress, null);
7645
7644
  }
7646
7645
  if (videoUrl) {
7647
- return /* @__PURE__ */ React89.createElement(
7646
+ return /* @__PURE__ */ React90.createElement(
7648
7647
  "video",
7649
7648
  {
7650
7649
  "aria-label": (0, import_i18n39.__)("Video preview", "elementor"),
@@ -7660,19 +7659,19 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
7660
7659
  }
7661
7660
  );
7662
7661
  }
7663
- return /* @__PURE__ */ React89.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
7662
+ return /* @__PURE__ */ React90.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
7664
7663
  };
7665
7664
 
7666
7665
  // src/controls/background-control/background-control.tsx
7667
- var React96 = __toESM(require("react"));
7666
+ var React97 = __toESM(require("react"));
7668
7667
  var import_editor_props42 = require("@elementor/editor-props");
7669
- var import_ui80 = require("@elementor/ui");
7668
+ var import_ui81 = require("@elementor/ui");
7670
7669
  var import_i18n45 = require("@wordpress/i18n");
7671
7670
 
7672
7671
  // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
7673
- var React95 = __toESM(require("react"));
7672
+ var React96 = __toESM(require("react"));
7674
7673
  var import_editor_props41 = require("@elementor/editor-props");
7675
- var import_ui79 = require("@elementor/ui");
7674
+ var import_ui80 = require("@elementor/ui");
7676
7675
  var import_wp_media4 = require("@elementor/wp-media");
7677
7676
  var import_i18n44 = require("@wordpress/i18n");
7678
7677
 
@@ -7681,9 +7680,9 @@ var import_env = require("@elementor/env");
7681
7680
  var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
7682
7681
 
7683
7682
  // src/controls/background-control/background-gradient-color-control.tsx
7684
- var React90 = __toESM(require("react"));
7683
+ var React91 = __toESM(require("react"));
7685
7684
  var import_editor_props37 = require("@elementor/editor-props");
7686
- var import_ui73 = require("@elementor/ui");
7685
+ var import_ui74 = require("@elementor/ui");
7687
7686
  var BackgroundGradientColorControl = createControl(() => {
7688
7687
  const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
7689
7688
  const handleChange = (newValue) => {
@@ -7721,8 +7720,8 @@ var BackgroundGradientColorControl = createControl(() => {
7721
7720
  positions: positions?.value.split(" ")
7722
7721
  };
7723
7722
  };
7724
- return /* @__PURE__ */ React90.createElement(
7725
- import_ui73.UnstableGradientBox,
7723
+ return /* @__PURE__ */ React91.createElement(
7724
+ import_ui74.UnstableGradientBox,
7726
7725
  {
7727
7726
  sx: { width: "auto", padding: 1.5 },
7728
7727
  value: normalizeValue(),
@@ -7746,35 +7745,35 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
7746
7745
  });
7747
7746
 
7748
7747
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
7749
- var React91 = __toESM(require("react"));
7748
+ var React92 = __toESM(require("react"));
7750
7749
  var import_icons26 = require("@elementor/icons");
7751
- var import_ui74 = require("@elementor/ui");
7750
+ var import_ui75 = require("@elementor/ui");
7752
7751
  var import_i18n40 = require("@wordpress/i18n");
7753
7752
  var attachmentControlOptions = [
7754
7753
  {
7755
7754
  value: "fixed",
7756
7755
  label: (0, import_i18n40.__)("Fixed", "elementor"),
7757
- renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinIcon, { fontSize: size }),
7756
+ renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons26.PinIcon, { fontSize: size }),
7758
7757
  showTooltip: true
7759
7758
  },
7760
7759
  {
7761
7760
  value: "scroll",
7762
7761
  label: (0, import_i18n40.__)("Scroll", "elementor"),
7763
- renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinnedOffIcon, { fontSize: size }),
7762
+ renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons26.PinnedOffIcon, { fontSize: size }),
7764
7763
  showTooltip: true
7765
7764
  }
7766
7765
  ];
7767
7766
  var BackgroundImageOverlayAttachment = () => {
7768
- return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
7767
+ return /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ToggleControl, { options: attachmentControlOptions })));
7769
7768
  };
7770
7769
 
7771
7770
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
7772
- var React92 = __toESM(require("react"));
7773
- var import_react55 = require("react");
7771
+ var React93 = __toESM(require("react"));
7772
+ var import_react54 = require("react");
7774
7773
  var import_editor_props38 = require("@elementor/editor-props");
7775
7774
  var import_editor_ui12 = require("@elementor/editor-ui");
7776
7775
  var import_icons27 = require("@elementor/icons");
7777
- var import_ui75 = require("@elementor/ui");
7776
+ var import_ui76 = require("@elementor/ui");
7778
7777
  var import_i18n41 = require("@wordpress/i18n");
7779
7778
  var backgroundPositionOptions = [
7780
7779
  { label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
@@ -7792,7 +7791,7 @@ var BackgroundImageOverlayPosition = () => {
7792
7791
  const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
7793
7792
  const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
7794
7793
  const isCustom = !!backgroundImageOffsetContext.value;
7795
- const rowRef = (0, import_react55.useRef)(null);
7794
+ const rowRef = (0, import_react54.useRef)(null);
7796
7795
  const handlePositionChange = (event) => {
7797
7796
  const value = event.target.value || null;
7798
7797
  if (value === "custom") {
@@ -7801,8 +7800,8 @@ var BackgroundImageOverlayPosition = () => {
7801
7800
  stringPropContext.setValue(value);
7802
7801
  }
7803
7802
  };
7804
- return /* @__PURE__ */ React92.createElement(import_ui75.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
7805
- import_ui75.Select,
7803
+ return /* @__PURE__ */ React93.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(
7804
+ import_ui76.Select,
7806
7805
  {
7807
7806
  fullWidth: true,
7808
7807
  size: "tiny",
@@ -7810,18 +7809,18 @@ var BackgroundImageOverlayPosition = () => {
7810
7809
  disabled: stringPropContext.disabled,
7811
7810
  value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
7812
7811
  },
7813
- backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
7814
- ))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
7812
+ backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React93.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
7813
+ ))))), isCustom ? /* @__PURE__ */ React93.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React93.createElement(
7815
7814
  SizeControl,
7816
7815
  {
7817
- startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
7816
+ startIcon: /* @__PURE__ */ React93.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
7818
7817
  anchorRef: rowRef,
7819
7818
  min: -Number.MAX_SAFE_INTEGER
7820
7819
  }
7821
- ))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
7820
+ ))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React93.createElement(
7822
7821
  SizeControl,
7823
7822
  {
7824
- startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
7823
+ startIcon: /* @__PURE__ */ React93.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
7825
7824
  anchorRef: rowRef,
7826
7825
  min: -Number.MAX_SAFE_INTEGER
7827
7826
  }
@@ -7829,70 +7828,70 @@ var BackgroundImageOverlayPosition = () => {
7829
7828
  };
7830
7829
 
7831
7830
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
7832
- var React93 = __toESM(require("react"));
7831
+ var React94 = __toESM(require("react"));
7833
7832
  var import_icons28 = require("@elementor/icons");
7834
- var import_ui76 = require("@elementor/ui");
7833
+ var import_ui77 = require("@elementor/ui");
7835
7834
  var import_i18n42 = require("@wordpress/i18n");
7836
7835
  var repeatControlOptions = [
7837
7836
  {
7838
7837
  value: "repeat",
7839
7838
  label: (0, import_i18n42.__)("Repeat", "elementor"),
7840
- renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.GridDotsIcon, { fontSize: size }),
7839
+ renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.GridDotsIcon, { fontSize: size }),
7841
7840
  showTooltip: true
7842
7841
  },
7843
7842
  {
7844
7843
  value: "repeat-x",
7845
7844
  label: (0, import_i18n42.__)("Repeat-x", "elementor"),
7846
- renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsHorizontalIcon, { fontSize: size }),
7845
+ renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.DotsHorizontalIcon, { fontSize: size }),
7847
7846
  showTooltip: true
7848
7847
  },
7849
7848
  {
7850
7849
  value: "repeat-y",
7851
7850
  label: (0, import_i18n42.__)("Repeat-y", "elementor"),
7852
- renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsVerticalIcon, { fontSize: size }),
7851
+ renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.DotsVerticalIcon, { fontSize: size }),
7853
7852
  showTooltip: true
7854
7853
  },
7855
7854
  {
7856
7855
  value: "no-repeat",
7857
7856
  label: (0, import_i18n42.__)("No-repeat", "elementor"),
7858
- renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.XIcon, { fontSize: size }),
7857
+ renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.XIcon, { fontSize: size }),
7859
7858
  showTooltip: true
7860
7859
  }
7861
7860
  ];
7862
7861
  var BackgroundImageOverlayRepeat = () => {
7863
- return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
7862
+ return /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(ToggleControl, { options: repeatControlOptions })));
7864
7863
  };
7865
7864
 
7866
7865
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
7867
- var React94 = __toESM(require("react"));
7868
- var import_react56 = require("react");
7866
+ var React95 = __toESM(require("react"));
7867
+ var import_react55 = require("react");
7869
7868
  var import_editor_props39 = require("@elementor/editor-props");
7870
7869
  var import_icons29 = require("@elementor/icons");
7871
- var import_ui77 = require("@elementor/ui");
7870
+ var import_ui78 = require("@elementor/ui");
7872
7871
  var import_i18n43 = require("@wordpress/i18n");
7873
7872
  var sizeControlOptions = [
7874
7873
  {
7875
7874
  value: "auto",
7876
7875
  label: (0, import_i18n43.__)("Auto", "elementor"),
7877
- renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.LetterAIcon, { fontSize: size }),
7876
+ renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.LetterAIcon, { fontSize: size }),
7878
7877
  showTooltip: true
7879
7878
  },
7880
7879
  {
7881
7880
  value: "cover",
7882
7881
  label: (0, import_i18n43.__)("Cover", "elementor"),
7883
- renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: size }),
7882
+ renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: size }),
7884
7883
  showTooltip: true
7885
7884
  },
7886
7885
  {
7887
7886
  value: "contain",
7888
7887
  label: (0, import_i18n43.__)("Contain", "elementor"),
7889
- renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowBarBothIcon, { fontSize: size }),
7888
+ renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.ArrowBarBothIcon, { fontSize: size }),
7890
7889
  showTooltip: true
7891
7890
  },
7892
7891
  {
7893
7892
  value: "custom",
7894
7893
  label: (0, import_i18n43.__)("Custom", "elementor"),
7895
- renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.PencilIcon, { fontSize: size }),
7894
+ renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.PencilIcon, { fontSize: size }),
7896
7895
  showTooltip: true
7897
7896
  }
7898
7897
  ];
@@ -7900,7 +7899,7 @@ var BackgroundImageOverlaySize = () => {
7900
7899
  const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
7901
7900
  const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
7902
7901
  const isCustom = !!backgroundImageScaleContext.value;
7903
- const rowRef = (0, import_react56.useRef)(null);
7902
+ const rowRef = (0, import_react55.useRef)(null);
7904
7903
  const handleSizeChange = (size) => {
7905
7904
  if (size === "custom") {
7906
7905
  backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7908,7 +7907,7 @@ var BackgroundImageOverlaySize = () => {
7908
7907
  stringPropContext.setValue(size);
7909
7908
  }
7910
7909
  };
7911
- return /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
7910
+ return /* @__PURE__ */ React95.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React95.createElement(
7912
7911
  ControlToggleButtonGroup,
7913
7912
  {
7914
7913
  exclusive: true,
@@ -7917,17 +7916,17 @@ var BackgroundImageOverlaySize = () => {
7917
7916
  disabled: stringPropContext.disabled,
7918
7917
  value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
7919
7918
  }
7920
- )))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
7919
+ )))), isCustom ? /* @__PURE__ */ React95.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React95.createElement(
7921
7920
  SizeControl,
7922
7921
  {
7923
- startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
7922
+ startIcon: /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
7924
7923
  extendedOptions: ["auto"],
7925
7924
  anchorRef: rowRef
7926
7925
  }
7927
- ))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
7926
+ ))), /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React95.createElement(
7928
7927
  SizeControl,
7929
7928
  {
7930
- startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
7929
+ startIcon: /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
7931
7930
  extendedOptions: ["auto"],
7932
7931
  anchorRef: rowRef
7933
7932
  }
@@ -7935,9 +7934,9 @@ var BackgroundImageOverlaySize = () => {
7935
7934
  };
7936
7935
 
7937
7936
  // src/controls/background-control/background-overlay/use-background-tabs-history.ts
7938
- var import_react57 = require("react");
7937
+ var import_react56 = require("react");
7939
7938
  var import_editor_props40 = require("@elementor/editor-props");
7940
- var import_ui78 = require("@elementor/ui");
7939
+ var import_ui79 = require("@elementor/ui");
7941
7940
  var useBackgroundTabsHistory = ({
7942
7941
  color: initialBackgroundColorOverlay2,
7943
7942
  image: initialBackgroundImageOverlay,
@@ -7955,8 +7954,8 @@ var useBackgroundTabsHistory = ({
7955
7954
  }
7956
7955
  return "image";
7957
7956
  };
7958
- const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui78.useTabs)(getCurrentOverlayType());
7959
- const valuesHistory = (0, import_react57.useRef)({
7957
+ const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui79.useTabs)(getCurrentOverlayType());
7958
+ const valuesHistory = (0, import_react56.useRef)({
7960
7959
  image: initialBackgroundImageOverlay,
7961
7960
  color: initialBackgroundColorOverlay2,
7962
7961
  gradient: initialBackgroundGradientOverlay2
@@ -8031,22 +8030,22 @@ var backgroundResolutionOptions = [
8031
8030
  ];
8032
8031
  var BackgroundOverlayRepeaterControl = createControl(() => {
8033
8032
  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
8034
- return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React95.createElement(
8033
+ return /* @__PURE__ */ React96.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React96.createElement(
8035
8034
  ControlRepeater,
8036
8035
  {
8037
8036
  initial: getInitialBackgroundOverlay(),
8038
8037
  propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
8039
8038
  },
8040
- /* @__PURE__ */ React95.createElement(RepeaterHeader, { label: (0, import_i18n44.__)("Overlay", "elementor") }, /* @__PURE__ */ React95.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
8041
- /* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
8039
+ /* @__PURE__ */ React96.createElement(RepeaterHeader, { label: (0, import_i18n44.__)("Overlay", "elementor") }, /* @__PURE__ */ React96.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
8040
+ /* @__PURE__ */ React96.createElement(ItemsContainer, null, /* @__PURE__ */ React96.createElement(
8042
8041
  Item,
8043
8042
  {
8044
8043
  Icon: ItemIcon2,
8045
8044
  Label: ItemLabel3,
8046
- actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
8045
+ actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DuplicateItemAction, null), /* @__PURE__ */ React96.createElement(DisableItemAction, null), /* @__PURE__ */ React96.createElement(RemoveItemAction, null))
8047
8046
  }
8048
8047
  )),
8049
- /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(ItemContent2, null))
8048
+ /* @__PURE__ */ React96.createElement(EditItemPopover, null, /* @__PURE__ */ React96.createElement(ItemContent2, null))
8050
8049
  ));
8051
8050
  });
8052
8051
  var ItemContent2 = () => {
@@ -8056,27 +8055,27 @@ var ItemContent2 = () => {
8056
8055
  gradient: initialBackgroundGradientOverlay.value
8057
8056
  });
8058
8057
  const { rowRef } = useRepeaterContext();
8059
- return /* @__PURE__ */ React95.createElement(import_ui79.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(import_ui79.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
8060
- import_ui79.Tabs,
8058
+ return /* @__PURE__ */ React96.createElement(import_ui80.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React96.createElement(import_ui80.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React96.createElement(
8059
+ import_ui80.Tabs,
8061
8060
  {
8062
8061
  size: "small",
8063
8062
  variant: "fullWidth",
8064
8063
  ...getTabsProps(),
8065
8064
  "aria-label": (0, import_i18n44.__)("Background Overlay", "elementor")
8066
8065
  },
8067
- /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
8068
- /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
8069
- /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
8070
- )), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
8066
+ /* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
8067
+ /* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
8068
+ /* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
8069
+ )), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React96.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
8071
8070
  };
8072
8071
  var ItemIcon2 = ({ value }) => {
8073
8072
  switch (value.$$type) {
8074
8073
  case "background-image-overlay":
8075
- return /* @__PURE__ */ React95.createElement(ItemIconImage, { value });
8074
+ return /* @__PURE__ */ React96.createElement(ItemIconImage, { value });
8076
8075
  case "background-color-overlay":
8077
- return /* @__PURE__ */ React95.createElement(ItemIconColor, { value });
8076
+ return /* @__PURE__ */ React96.createElement(ItemIconColor, { value });
8078
8077
  case "background-gradient-overlay":
8079
- return /* @__PURE__ */ React95.createElement(ItemIconGradient, { value });
8078
+ return /* @__PURE__ */ React96.createElement(ItemIconGradient, { value });
8080
8079
  default:
8081
8080
  return null;
8082
8081
  }
@@ -8089,12 +8088,12 @@ var extractColorFrom = (prop) => {
8089
8088
  };
8090
8089
  var ItemIconColor = ({ value: prop }) => {
8091
8090
  const color = extractColorFrom(prop);
8092
- return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
8091
+ return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
8093
8092
  };
8094
8093
  var ItemIconImage = ({ value }) => {
8095
8094
  const { imageUrl } = useImage(value);
8096
- return /* @__PURE__ */ React95.createElement(
8097
- import_ui79.CardMedia,
8095
+ return /* @__PURE__ */ React96.createElement(
8096
+ import_ui80.CardMedia,
8098
8097
  {
8099
8098
  image: imageUrl,
8100
8099
  sx: (theme) => ({
@@ -8108,43 +8107,43 @@ var ItemIconImage = ({ value }) => {
8108
8107
  };
8109
8108
  var ItemIconGradient = ({ value }) => {
8110
8109
  const gradient = getGradientValue(value);
8111
- return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
8110
+ return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
8112
8111
  };
8113
8112
  var ItemLabel3 = ({ value }) => {
8114
8113
  switch (value.$$type) {
8115
8114
  case "background-image-overlay":
8116
- return /* @__PURE__ */ React95.createElement(ItemLabelImage, { value });
8115
+ return /* @__PURE__ */ React96.createElement(ItemLabelImage, { value });
8117
8116
  case "background-color-overlay":
8118
- return /* @__PURE__ */ React95.createElement(ItemLabelColor, { value });
8117
+ return /* @__PURE__ */ React96.createElement(ItemLabelColor, { value });
8119
8118
  case "background-gradient-overlay":
8120
- return /* @__PURE__ */ React95.createElement(ItemLabelGradient, { value });
8119
+ return /* @__PURE__ */ React96.createElement(ItemLabelGradient, { value });
8121
8120
  default:
8122
8121
  return null;
8123
8122
  }
8124
8123
  };
8125
8124
  var ItemLabelColor = ({ value: prop }) => {
8126
8125
  const color = extractColorFrom(prop);
8127
- return /* @__PURE__ */ React95.createElement("span", null, color);
8126
+ return /* @__PURE__ */ React96.createElement("span", null, color);
8128
8127
  };
8129
8128
  var ItemLabelImage = ({ value }) => {
8130
8129
  const { imageTitle } = useImage(value);
8131
- return /* @__PURE__ */ React95.createElement("span", null, imageTitle);
8130
+ return /* @__PURE__ */ React96.createElement("span", null, imageTitle);
8132
8131
  };
8133
8132
  var ItemLabelGradient = ({ value }) => {
8134
8133
  if (value.value.type.value === "linear") {
8135
- return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Linear Gradient", "elementor"));
8134
+ return /* @__PURE__ */ React96.createElement("span", null, (0, import_i18n44.__)("Linear Gradient", "elementor"));
8136
8135
  }
8137
- return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Radial Gradient", "elementor"));
8136
+ return /* @__PURE__ */ React96.createElement("span", null, (0, import_i18n44.__)("Radial Gradient", "elementor"));
8138
8137
  };
8139
8138
  var ColorOverlayContent = ({ anchorEl }) => {
8140
8139
  const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
8141
- return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React95.createElement(ColorControl, { anchorEl })));
8140
+ return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(ColorControl, { anchorEl })));
8142
8141
  };
8143
8142
  var ImageOverlayContent = () => {
8144
8143
  const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
8145
- return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React95.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayAttachment, null)));
8144
+ return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React96.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayAttachment, null)));
8146
8145
  };
8147
- var StyledUnstableColorIndicator3 = (0, import_ui79.styled)(import_ui79.UnstableColorIndicator)(({ theme }) => ({
8146
+ var StyledUnstableColorIndicator3 = (0, import_ui80.styled)(import_ui80.UnstableColorIndicator)(({ theme }) => ({
8148
8147
  height: "1rem",
8149
8148
  width: "1rem",
8150
8149
  borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -8192,20 +8191,20 @@ var colorLabel = (0, import_i18n45.__)("Color", "elementor");
8192
8191
  var clipLabel = (0, import_i18n45.__)("Clipping", "elementor");
8193
8192
  var BackgroundControl = createControl(() => {
8194
8193
  const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
8195
- return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React96.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React96.createElement(BackgroundColorField, null), /* @__PURE__ */ React96.createElement(BackgroundClipField, null));
8194
+ return /* @__PURE__ */ React97.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React97.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React97.createElement(BackgroundColorField, null), /* @__PURE__ */ React97.createElement(BackgroundClipField, null));
8196
8195
  });
8197
8196
  var BackgroundColorField = () => {
8198
- return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
8197
+ return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ColorControl, null))));
8199
8198
  };
8200
8199
  var BackgroundClipField = () => {
8201
- return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
8200
+ return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(SelectControl, { options: clipOptions }))));
8202
8201
  };
8203
8202
 
8204
8203
  // src/controls/repeatable-control.tsx
8205
- var React97 = __toESM(require("react"));
8206
- var import_react58 = require("react");
8204
+ var React98 = __toESM(require("react"));
8205
+ var import_react57 = require("react");
8207
8206
  var import_editor_props43 = require("@elementor/editor-props");
8208
- var import_ui81 = require("@elementor/ui");
8207
+ var import_ui82 = require("@elementor/ui");
8209
8208
  var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
8210
8209
  var RepeatableControl = createControl(
8211
8210
  ({
@@ -8224,11 +8223,11 @@ var RepeatableControl = createControl(
8224
8223
  if (!childPropTypeUtil) {
8225
8224
  return null;
8226
8225
  }
8227
- const childArrayPropTypeUtil2 = (0, import_react58.useMemo)(
8226
+ const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
8228
8227
  () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
8229
8228
  [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
8230
8229
  );
8231
- const contextValue = (0, import_react58.useMemo)(
8230
+ const contextValue = (0, import_react57.useMemo)(
8232
8231
  () => ({
8233
8232
  ...childControlConfig,
8234
8233
  placeholder: placeholder || "",
@@ -8238,14 +8237,14 @@ var RepeatableControl = createControl(
8238
8237
  );
8239
8238
  const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
8240
8239
  const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
8241
- return /* @__PURE__ */ React97.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React97.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React97.createElement(
8240
+ return /* @__PURE__ */ React98.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React98.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React98.createElement(
8242
8241
  ControlRepeater,
8243
8242
  {
8244
8243
  initial: childPropTypeUtil.create(initialValues || null),
8245
8244
  propTypeUtil: childArrayPropTypeUtil2,
8246
8245
  isItemDisabled: isItemDisabled2
8247
8246
  },
8248
- /* @__PURE__ */ React97.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React97.createElement(
8247
+ /* @__PURE__ */ React98.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React98.createElement(
8249
8248
  TooltipAddItemAction,
8250
8249
  {
8251
8250
  ...addItemTooltipProps,
@@ -8253,22 +8252,22 @@ var RepeatableControl = createControl(
8253
8252
  ariaLabel: repeaterLabel
8254
8253
  }
8255
8254
  )),
8256
- /* @__PURE__ */ React97.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React97.createElement(
8255
+ /* @__PURE__ */ React98.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React98.createElement(
8257
8256
  Item,
8258
8257
  {
8259
8258
  Icon: ItemIcon3,
8260
8259
  Label: ItemLabel4,
8261
- actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, showDuplicate && /* @__PURE__ */ React97.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React97.createElement(DisableItemAction, null), /* @__PURE__ */ React97.createElement(RemoveItemAction, null))
8260
+ actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, showDuplicate && /* @__PURE__ */ React98.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React98.createElement(DisableItemAction, null), /* @__PURE__ */ React98.createElement(RemoveItemAction, null))
8262
8261
  }
8263
8262
  )),
8264
- /* @__PURE__ */ React97.createElement(EditItemPopover, null, /* @__PURE__ */ React97.createElement(Content2, null))
8263
+ /* @__PURE__ */ React98.createElement(EditItemPopover, null, /* @__PURE__ */ React98.createElement(Content2, null))
8265
8264
  )));
8266
8265
  }
8267
8266
  );
8268
- var ItemIcon3 = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null);
8267
+ var ItemIcon3 = () => /* @__PURE__ */ React98.createElement(React98.Fragment, null);
8269
8268
  var Content2 = () => {
8270
8269
  const { component: ChildControl, props = {} } = useRepeatableControlContext();
8271
- return /* @__PURE__ */ React97.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(ChildControl, { ...props })));
8270
+ return /* @__PURE__ */ React98.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(ChildControl, { ...props })));
8272
8271
  };
8273
8272
  var interpolate = (template, data) => {
8274
8273
  if (!data) {
@@ -8351,7 +8350,7 @@ var ItemLabel4 = ({ value }) => {
8351
8350
  const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
8352
8351
  const isReadOnly = !!childProps?.readOnly;
8353
8352
  const color = getTextColor(isReadOnly, showPlaceholder);
8354
- return /* @__PURE__ */ React97.createElement(import_ui81.Box, { component: "span", color }, label);
8353
+ return /* @__PURE__ */ React98.createElement(import_ui82.Box, { component: "span", color }, label);
8355
8354
  };
8356
8355
  var getAllProperties = (pattern) => {
8357
8356
  const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -8359,10 +8358,10 @@ var getAllProperties = (pattern) => {
8359
8358
  };
8360
8359
 
8361
8360
  // src/controls/key-value-control.tsx
8362
- var React98 = __toESM(require("react"));
8363
- var import_react59 = require("react");
8361
+ var React99 = __toESM(require("react"));
8362
+ var import_react58 = require("react");
8364
8363
  var import_editor_props44 = require("@elementor/editor-props");
8365
- var import_ui82 = require("@elementor/ui");
8364
+ var import_ui83 = require("@elementor/ui");
8366
8365
  var import_i18n46 = require("@wordpress/i18n");
8367
8366
 
8368
8367
  // src/utils/escape-html-attr.ts
@@ -8387,9 +8386,9 @@ var getInitialFieldValue = (fieldValue) => {
8387
8386
  };
8388
8387
  var KeyValueControl = createControl((props = {}) => {
8389
8388
  const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
8390
- const [keyError, setKeyError] = (0, import_react59.useState)("");
8391
- const [valueError, setValueError] = (0, import_react59.useState)("");
8392
- const [sessionState, setSessionState] = (0, import_react59.useState)({
8389
+ const [keyError, setKeyError] = (0, import_react58.useState)("");
8390
+ const [valueError, setValueError] = (0, import_react58.useState)("");
8391
+ const [sessionState, setSessionState] = (0, import_react58.useState)({
8393
8392
  key: getInitialFieldValue(value?.key),
8394
8393
  value: getInitialFieldValue(value?.value)
8395
8394
  });
@@ -8399,7 +8398,7 @@ var KeyValueControl = createControl((props = {}) => {
8399
8398
  keyHelper: void 0,
8400
8399
  valueHelper: void 0
8401
8400
  };
8402
- const [keyRegex, valueRegex, errMsg] = (0, import_react59.useMemo)(
8401
+ const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
8403
8402
  () => [
8404
8403
  props.regexKey ? new RegExp(props.regexKey) : void 0,
8405
8404
  props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -8452,14 +8451,14 @@ var KeyValueControl = createControl((props = {}) => {
8452
8451
  });
8453
8452
  }
8454
8453
  };
8455
- return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(import_ui82.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(import_ui82.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui82.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
8454
+ return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(import_ui83.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React99.createElement(
8456
8455
  TextControl,
8457
8456
  {
8458
8457
  inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
8459
8458
  error: !!keyError,
8460
8459
  helperText: keyHelper
8461
8460
  }
8462
- )), !!keyError && /* @__PURE__ */ React98.createElement(import_ui82.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(import_ui82.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui82.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
8461
+ )), !!keyError && /* @__PURE__ */ React99.createElement(import_ui83.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(import_ui83.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React99.createElement(
8463
8462
  TextControl,
8464
8463
  {
8465
8464
  inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -8467,15 +8466,15 @@ var KeyValueControl = createControl((props = {}) => {
8467
8466
  inputDisabled: !!keyError,
8468
8467
  helperText: valueHelper
8469
8468
  }
8470
- )), !!valueError && /* @__PURE__ */ React98.createElement(import_ui82.FormHelperText, { error: true }, valueError))));
8469
+ )), !!valueError && /* @__PURE__ */ React99.createElement(import_ui83.FormHelperText, { error: true }, valueError))));
8471
8470
  });
8472
8471
 
8473
8472
  // src/controls/position-control.tsx
8474
- var React99 = __toESM(require("react"));
8473
+ var React100 = __toESM(require("react"));
8475
8474
  var import_editor_props45 = require("@elementor/editor-props");
8476
8475
  var import_editor_ui13 = require("@elementor/editor-ui");
8477
8476
  var import_icons30 = require("@elementor/icons");
8478
- var import_ui83 = require("@elementor/ui");
8477
+ var import_ui84 = require("@elementor/ui");
8479
8478
  var import_i18n47 = require("@wordpress/i18n");
8480
8479
  var positionOptions = [
8481
8480
  { label: (0, import_i18n47.__)("Center center", "elementor"), value: "center center" },
@@ -8502,8 +8501,8 @@ var PositionControl = () => {
8502
8501
  stringPropContext.setValue(value);
8503
8502
  }
8504
8503
  };
8505
- return /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
8506
- import_ui83.Select,
8504
+ return /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React100.createElement(
8505
+ import_ui84.Select,
8507
8506
  {
8508
8507
  size: "tiny",
8509
8508
  displayEmpty: true,
@@ -8513,28 +8512,28 @@ var PositionControl = () => {
8513
8512
  renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
8514
8513
  fullWidth: true
8515
8514
  },
8516
- positionOptions.map(({ label, value }) => /* @__PURE__ */ React99.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
8517
- )))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
8515
+ positionOptions.map(({ label, value }) => /* @__PURE__ */ React100.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
8516
+ )))), isCustom && /* @__PURE__ */ React100.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React100.createElement(
8518
8517
  SizeControl,
8519
8518
  {
8520
- startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
8519
+ startIcon: /* @__PURE__ */ React100.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
8521
8520
  min: -Number.MAX_SAFE_INTEGER
8522
8521
  }
8523
- ))), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
8522
+ ))), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React100.createElement(
8524
8523
  SizeControl,
8525
8524
  {
8526
- startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
8525
+ startIcon: /* @__PURE__ */ React100.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
8527
8526
  min: -Number.MAX_SAFE_INTEGER
8528
8527
  }
8529
8528
  )))))));
8530
8529
  };
8531
8530
 
8532
8531
  // src/controls/transform-control/transform-repeater-control.tsx
8533
- var React112 = __toESM(require("react"));
8534
- var import_react67 = require("react");
8532
+ var React113 = __toESM(require("react"));
8533
+ var import_react66 = require("react");
8535
8534
  var import_editor_props54 = require("@elementor/editor-props");
8536
8535
  var import_icons37 = require("@elementor/icons");
8537
- var import_ui96 = require("@elementor/ui");
8536
+ var import_ui97 = require("@elementor/ui");
8538
8537
  var import_i18n57 = require("@wordpress/i18n");
8539
8538
 
8540
8539
  // src/controls/transform-control/initial-values.ts
@@ -8584,24 +8583,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
8584
8583
  });
8585
8584
 
8586
8585
  // src/controls/transform-control/transform-content.tsx
8587
- var React106 = __toESM(require("react"));
8588
- var import_ui91 = require("@elementor/ui");
8586
+ var React107 = __toESM(require("react"));
8587
+ var import_ui92 = require("@elementor/ui");
8589
8588
  var import_i18n52 = require("@wordpress/i18n");
8590
8589
 
8591
8590
  // src/controls/transform-control/functions/move.tsx
8592
- var React101 = __toESM(require("react"));
8593
- var import_react60 = require("react");
8591
+ var React102 = __toESM(require("react"));
8592
+ var import_react59 = require("react");
8594
8593
  var import_editor_props47 = require("@elementor/editor-props");
8595
8594
  var import_icons31 = require("@elementor/icons");
8596
- var import_ui85 = require("@elementor/ui");
8595
+ var import_ui86 = require("@elementor/ui");
8597
8596
  var import_i18n48 = require("@wordpress/i18n");
8598
8597
 
8599
8598
  // src/controls/transform-control/functions/axis-row.tsx
8600
- var React100 = __toESM(require("react"));
8601
- var import_ui84 = require("@elementor/ui");
8599
+ var React101 = __toESM(require("react"));
8600
+ var import_ui85 = require("@elementor/ui");
8602
8601
  var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
8603
8602
  const safeId = label.replace(/\s+/g, "-").toLowerCase();
8604
- return /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
8603
+ return /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React101.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(
8605
8604
  SizeControl,
8606
8605
  {
8607
8606
  anchorRef,
@@ -8619,26 +8618,26 @@ var moveAxisControls = [
8619
8618
  {
8620
8619
  label: (0, import_i18n48.__)("Move X", "elementor"),
8621
8620
  bind: "x",
8622
- startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" }),
8621
+ startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" }),
8623
8622
  units: ["px", "%", "em", "rem", "vw"]
8624
8623
  },
8625
8624
  {
8626
8625
  label: (0, import_i18n48.__)("Move Y", "elementor"),
8627
8626
  bind: "y",
8628
- startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownSmallIcon, { fontSize: "tiny" }),
8627
+ startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowDownSmallIcon, { fontSize: "tiny" }),
8629
8628
  units: ["px", "%", "em", "rem", "vh"]
8630
8629
  },
8631
8630
  {
8632
8631
  label: (0, import_i18n48.__)("Move Z", "elementor"),
8633
8632
  bind: "z",
8634
- startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownLeftIcon, { fontSize: "tiny" }),
8633
+ startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowDownLeftIcon, { fontSize: "tiny" }),
8635
8634
  units: ["px", "%", "em", "rem", "vw", "vh"]
8636
8635
  }
8637
8636
  ];
8638
8637
  var Move = () => {
8639
8638
  const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
8640
- const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
8641
- return /* @__PURE__ */ React101.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
8639
+ const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
8640
+ return /* @__PURE__ */ React102.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
8642
8641
  AxisRow,
8643
8642
  {
8644
8643
  key: control.bind,
@@ -8651,34 +8650,34 @@ var Move = () => {
8651
8650
  };
8652
8651
 
8653
8652
  // src/controls/transform-control/functions/rotate.tsx
8654
- var React102 = __toESM(require("react"));
8655
- var import_react61 = require("react");
8653
+ var React103 = __toESM(require("react"));
8654
+ var import_react60 = require("react");
8656
8655
  var import_editor_props48 = require("@elementor/editor-props");
8657
8656
  var import_icons32 = require("@elementor/icons");
8658
- var import_ui86 = require("@elementor/ui");
8657
+ var import_ui87 = require("@elementor/ui");
8659
8658
  var import_i18n49 = require("@wordpress/i18n");
8660
8659
  var rotateAxisControls = [
8661
8660
  {
8662
8661
  label: (0, import_i18n49.__)("Rotate X", "elementor"),
8663
8662
  bind: "x",
8664
- startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny" })
8663
+ startIcon: /* @__PURE__ */ React103.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny" })
8665
8664
  },
8666
8665
  {
8667
8666
  label: (0, import_i18n49.__)("Rotate Y", "elementor"),
8668
8667
  bind: "y",
8669
- startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
8668
+ startIcon: /* @__PURE__ */ React103.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
8670
8669
  },
8671
8670
  {
8672
8671
  label: (0, import_i18n49.__)("Rotate Z", "elementor"),
8673
8672
  bind: "z",
8674
- startIcon: /* @__PURE__ */ React102.createElement(import_icons32.RotateClockwiseIcon, { fontSize: "tiny" })
8673
+ startIcon: /* @__PURE__ */ React103.createElement(import_icons32.RotateClockwiseIcon, { fontSize: "tiny" })
8675
8674
  }
8676
8675
  ];
8677
8676
  var rotateUnits = ["deg", "rad", "grad", "turn"];
8678
8677
  var Rotate = () => {
8679
8678
  const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
8680
- const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
8681
- return /* @__PURE__ */ React102.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
8679
+ const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
8680
+ return /* @__PURE__ */ React103.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React103.createElement(
8682
8681
  AxisRow,
8683
8682
  {
8684
8683
  key: control.bind,
@@ -8690,18 +8689,18 @@ var Rotate = () => {
8690
8689
  };
8691
8690
 
8692
8691
  // src/controls/transform-control/functions/scale.tsx
8693
- var React104 = __toESM(require("react"));
8694
- var import_react62 = require("react");
8692
+ var React105 = __toESM(require("react"));
8693
+ var import_react61 = require("react");
8695
8694
  var import_editor_props49 = require("@elementor/editor-props");
8696
8695
  var import_icons33 = require("@elementor/icons");
8697
- var import_ui88 = require("@elementor/ui");
8696
+ var import_ui89 = require("@elementor/ui");
8698
8697
  var import_i18n50 = require("@wordpress/i18n");
8699
8698
 
8700
8699
  // src/controls/transform-control/functions/scale-axis-row.tsx
8701
- var React103 = __toESM(require("react"));
8702
- var import_ui87 = require("@elementor/ui");
8700
+ var React104 = __toESM(require("react"));
8701
+ var import_ui88 = require("@elementor/ui");
8703
8702
  var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
8704
- return /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
8703
+ return /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlLabel, null, label)), /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React104.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
8705
8704
  };
8706
8705
 
8707
8706
  // src/controls/transform-control/functions/scale.tsx
@@ -8709,49 +8708,49 @@ var scaleAxisControls = [
8709
8708
  {
8710
8709
  label: (0, import_i18n50.__)("Scale X", "elementor"),
8711
8710
  bind: "x",
8712
- startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
8711
+ startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
8713
8712
  },
8714
8713
  {
8715
8714
  label: (0, import_i18n50.__)("Scale Y", "elementor"),
8716
8715
  bind: "y",
8717
- startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" })
8716
+ startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" })
8718
8717
  },
8719
8718
  {
8720
8719
  label: (0, import_i18n50.__)("Scale Z", "elementor"),
8721
8720
  bind: "z",
8722
- startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" })
8721
+ startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" })
8723
8722
  }
8724
8723
  ];
8725
8724
  var Scale = () => {
8726
8725
  const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
8727
- const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
8728
- return /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
8726
+ const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
8727
+ return /* @__PURE__ */ React105.createElement(import_ui89.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
8729
8728
  };
8730
8729
 
8731
8730
  // src/controls/transform-control/functions/skew.tsx
8732
- var React105 = __toESM(require("react"));
8733
- var import_react63 = require("react");
8731
+ var React106 = __toESM(require("react"));
8732
+ var import_react62 = require("react");
8734
8733
  var import_editor_props50 = require("@elementor/editor-props");
8735
8734
  var import_icons34 = require("@elementor/icons");
8736
- var import_ui89 = require("@elementor/ui");
8735
+ var import_ui90 = require("@elementor/ui");
8737
8736
  var import_i18n51 = require("@wordpress/i18n");
8738
8737
  var skewAxisControls = [
8739
8738
  {
8740
8739
  label: (0, import_i18n51.__)("Skew X", "elementor"),
8741
8740
  bind: "x",
8742
- startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowRightIcon, { fontSize: "tiny" })
8741
+ startIcon: /* @__PURE__ */ React106.createElement(import_icons34.ArrowRightIcon, { fontSize: "tiny" })
8743
8742
  },
8744
8743
  {
8745
8744
  label: (0, import_i18n51.__)("Skew Y", "elementor"),
8746
8745
  bind: "y",
8747
- startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
8746
+ startIcon: /* @__PURE__ */ React106.createElement(import_icons34.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
8748
8747
  }
8749
8748
  ];
8750
8749
  var skewUnits = ["deg", "rad", "grad", "turn"];
8751
8750
  var Skew = () => {
8752
8751
  const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
8753
- const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
8754
- return /* @__PURE__ */ React105.createElement(import_ui89.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
8752
+ const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
8753
+ return /* @__PURE__ */ React106.createElement(import_ui90.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
8755
8754
  AxisRow,
8756
8755
  {
8757
8756
  key: control.bind,
@@ -8763,9 +8762,9 @@ var Skew = () => {
8763
8762
  };
8764
8763
 
8765
8764
  // src/controls/transform-control/use-transform-tabs-history.tsx
8766
- var import_react64 = require("react");
8765
+ var import_react63 = require("react");
8767
8766
  var import_editor_props51 = require("@elementor/editor-props");
8768
- var import_ui90 = require("@elementor/ui");
8767
+ var import_ui91 = require("@elementor/ui");
8769
8768
  var useTransformTabsHistory = ({
8770
8769
  move: initialMove,
8771
8770
  scale: initialScale,
@@ -8789,8 +8788,8 @@ var useTransformTabsHistory = ({
8789
8788
  return TransformFunctionKeys.move;
8790
8789
  }
8791
8790
  };
8792
- const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui90.useTabs)(getCurrentTransformType());
8793
- const valuesHistory = (0, import_react64.useRef)({
8791
+ const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui91.useTabs)(getCurrentTransformType());
8792
+ const valuesHistory = (0, import_react63.useRef)({
8794
8793
  move: initialMove,
8795
8794
  scale: initialScale,
8796
8795
  rotate: initialRotate,
@@ -8851,8 +8850,8 @@ var TransformContent = () => {
8851
8850
  rotate: initialRotateValue.value,
8852
8851
  skew: initialSkewValue.value
8853
8852
  });
8854
- return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(import_ui91.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(import_ui91.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
8855
- import_ui91.Tabs,
8853
+ return /* @__PURE__ */ React107.createElement(PopoverContent, null, /* @__PURE__ */ React107.createElement(import_ui92.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React107.createElement(import_ui92.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React107.createElement(
8854
+ import_ui92.Tabs,
8856
8855
  {
8857
8856
  size: "small",
8858
8857
  variant: "fullWidth",
@@ -8864,34 +8863,34 @@ var TransformContent = () => {
8864
8863
  ...getTabsProps(),
8865
8864
  "aria-label": (0, import_i18n52.__)("Transform", "elementor")
8866
8865
  },
8867
- /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
8868
- /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
8869
- /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
8870
- /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
8871
- )), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
8866
+ /* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
8867
+ /* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
8868
+ /* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
8869
+ /* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
8870
+ )), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React107.createElement(Move, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React107.createElement(Scale, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React107.createElement(Rotate, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React107.createElement(Skew, null))));
8872
8871
  };
8873
8872
 
8874
8873
  // src/controls/transform-control/transform-icon.tsx
8875
- var React107 = __toESM(require("react"));
8874
+ var React108 = __toESM(require("react"));
8876
8875
  var import_icons35 = require("@elementor/icons");
8877
8876
  var TransformIcon = ({ value }) => {
8878
8877
  switch (value.$$type) {
8879
8878
  case TransformFunctionKeys.move:
8880
- return /* @__PURE__ */ React107.createElement(import_icons35.ArrowsMaximizeIcon, { fontSize: "tiny" });
8879
+ return /* @__PURE__ */ React108.createElement(import_icons35.ArrowsMaximizeIcon, { fontSize: "tiny" });
8881
8880
  case TransformFunctionKeys.scale:
8882
- return /* @__PURE__ */ React107.createElement(import_icons35.ArrowAutofitHeightIcon, { fontSize: "tiny" });
8881
+ return /* @__PURE__ */ React108.createElement(import_icons35.ArrowAutofitHeightIcon, { fontSize: "tiny" });
8883
8882
  case TransformFunctionKeys.rotate:
8884
- return /* @__PURE__ */ React107.createElement(import_icons35.RotateClockwise2Icon, { fontSize: "tiny" });
8883
+ return /* @__PURE__ */ React108.createElement(import_icons35.RotateClockwise2Icon, { fontSize: "tiny" });
8885
8884
  case TransformFunctionKeys.skew:
8886
- return /* @__PURE__ */ React107.createElement(import_icons35.SkewXIcon, { fontSize: "tiny" });
8885
+ return /* @__PURE__ */ React108.createElement(import_icons35.SkewXIcon, { fontSize: "tiny" });
8887
8886
  default:
8888
8887
  return null;
8889
8888
  }
8890
8889
  };
8891
8890
 
8892
8891
  // src/controls/transform-control/transform-label.tsx
8893
- var React108 = __toESM(require("react"));
8894
- var import_ui92 = require("@elementor/ui");
8892
+ var React109 = __toESM(require("react"));
8893
+ var import_ui93 = require("@elementor/ui");
8895
8894
  var import_i18n53 = require("@wordpress/i18n");
8896
8895
  var orderedAxis = ["x", "y", "z"];
8897
8896
  var formatLabel = (value, functionType) => {
@@ -8910,33 +8909,33 @@ var TransformLabel = (props) => {
8910
8909
  const { $$type, value } = props.value;
8911
8910
  switch ($$type) {
8912
8911
  case TransformFunctionKeys.move:
8913
- return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Move", "elementor"), value: formatLabel(value, "move") });
8912
+ return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Move", "elementor"), value: formatLabel(value, "move") });
8914
8913
  case TransformFunctionKeys.scale:
8915
- return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
8914
+ return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
8916
8915
  case TransformFunctionKeys.rotate:
8917
- return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
8916
+ return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
8918
8917
  case TransformFunctionKeys.skew:
8919
- return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
8918
+ return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
8920
8919
  default:
8921
8920
  return "";
8922
8921
  }
8923
8922
  };
8924
8923
  var Label2 = ({ label, value }) => {
8925
- return /* @__PURE__ */ React108.createElement(import_ui92.Box, { component: "span" }, label, ": ", value);
8924
+ return /* @__PURE__ */ React109.createElement(import_ui93.Box, { component: "span" }, label, ": ", value);
8926
8925
  };
8927
8926
 
8928
8927
  // src/controls/transform-control/transform-settings-control.tsx
8929
- var React111 = __toESM(require("react"));
8928
+ var React112 = __toESM(require("react"));
8930
8929
  var import_editor_ui14 = require("@elementor/editor-ui");
8931
8930
  var import_icons36 = require("@elementor/icons");
8932
- var import_ui95 = require("@elementor/ui");
8931
+ var import_ui96 = require("@elementor/ui");
8933
8932
  var import_i18n56 = require("@wordpress/i18n");
8934
8933
 
8935
8934
  // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
8936
- var React109 = __toESM(require("react"));
8937
- var import_react65 = require("react");
8935
+ var React110 = __toESM(require("react"));
8936
+ var import_react64 = require("react");
8938
8937
  var import_editor_props52 = require("@elementor/editor-props");
8939
- var import_ui93 = require("@elementor/ui");
8938
+ var import_ui94 = require("@elementor/ui");
8940
8939
  var import_i18n54 = require("@wordpress/i18n");
8941
8940
  var ORIGIN_UNITS = ["px", "%", "em", "rem"];
8942
8941
  var PERSPECTIVE_CONTROL_FIELD = {
@@ -8957,24 +8956,24 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
8957
8956
  }
8958
8957
  ];
8959
8958
  var ChildrenPerspectiveControl = () => {
8960
- return /* @__PURE__ */ React109.createElement(import_ui93.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
8959
+ return /* @__PURE__ */ React110.createElement(import_ui94.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React110.createElement(PerspectiveControl, null), /* @__PURE__ */ React110.createElement(PerspectiveOriginControl, null));
8961
8960
  };
8962
- var PerspectiveControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React109.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
8963
- var PerspectiveOriginControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React109.createElement(PerspectiveOriginControlProvider, null));
8961
+ var PerspectiveControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React110.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
8962
+ var PerspectiveOriginControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React110.createElement(PerspectiveOriginControlProvider, null));
8964
8963
  var PerspectiveOriginControlProvider = () => {
8965
8964
  const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
8966
- return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
8965
+ return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React110.createElement(ControlFields, { control }))));
8967
8966
  };
8968
8967
  var ControlFields = ({ control }) => {
8969
- const rowRef = (0, import_react65.useRef)(null);
8970
- return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
8968
+ const rowRef = (0, import_react64.useRef)(null);
8969
+ return /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
8971
8970
  };
8972
8971
 
8973
8972
  // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
8974
- var React110 = __toESM(require("react"));
8975
- var import_react66 = require("react");
8973
+ var React111 = __toESM(require("react"));
8974
+ var import_react65 = require("react");
8976
8975
  var import_editor_props53 = require("@elementor/editor-props");
8977
- var import_ui94 = require("@elementor/ui");
8976
+ var import_ui95 = require("@elementor/ui");
8978
8977
  var import_i18n55 = require("@wordpress/i18n");
8979
8978
  var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
8980
8979
  var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
@@ -8996,12 +8995,12 @@ var TRANSFORM_ORIGIN_FIELDS = [
8996
8995
  }
8997
8996
  ];
8998
8997
  var TransformOriginControl = () => {
8999
- return /* @__PURE__ */ React110.createElement(import_ui94.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
8998
+ return /* @__PURE__ */ React111.createElement(import_ui95.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React111.createElement(ControlFields2, { control, key: control.bind })));
9000
8999
  };
9001
9000
  var ControlFields2 = ({ control }) => {
9002
9001
  const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
9003
- const rowRef = (0, import_react66.useRef)(null);
9004
- return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
9002
+ const rowRef = (0, import_react65.useRef)(null);
9003
+ return /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React111.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
9005
9004
  };
9006
9005
 
9007
9006
  // src/controls/transform-control/transform-settings-control.tsx
@@ -9011,12 +9010,12 @@ var TransformSettingsControl = ({
9011
9010
  anchorRef,
9012
9011
  showChildrenPerspective
9013
9012
  }) => {
9014
- const popupProps = (0, import_ui95.bindPopover)({
9013
+ const popupProps = (0, import_ui96.bindPopover)({
9015
9014
  ...popupState,
9016
9015
  anchorEl: anchorRef.current ?? void 0
9017
9016
  });
9018
- return /* @__PURE__ */ React111.createElement(
9019
- import_ui95.Popover,
9017
+ return /* @__PURE__ */ React112.createElement(
9018
+ import_ui96.Popover,
9020
9019
  {
9021
9020
  disablePortal: true,
9022
9021
  anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -9030,16 +9029,16 @@ var TransformSettingsControl = ({
9030
9029
  },
9031
9030
  ...popupProps
9032
9031
  },
9033
- /* @__PURE__ */ React111.createElement(
9032
+ /* @__PURE__ */ React112.createElement(
9034
9033
  import_editor_ui14.PopoverHeader,
9035
9034
  {
9036
9035
  title: (0, import_i18n56.__)("Transform settings", "elementor"),
9037
9036
  onClose: popupState.close,
9038
- icon: /* @__PURE__ */ React111.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
9037
+ icon: /* @__PURE__ */ React112.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
9039
9038
  }
9040
9039
  ),
9041
- /* @__PURE__ */ React111.createElement(import_ui95.Divider, null),
9042
- /* @__PURE__ */ React111.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React111.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(import_ui95.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(import_ui95.Divider, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
9040
+ /* @__PURE__ */ React112.createElement(import_ui96.Divider, null),
9041
+ /* @__PURE__ */ React112.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React112.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(import_ui96.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React112.createElement(import_ui96.Divider, null)), /* @__PURE__ */ React112.createElement(ChildrenPerspectiveControl, null)))
9043
9042
  );
9044
9043
  };
9045
9044
 
@@ -9048,27 +9047,27 @@ var SIZE11 = "tiny";
9048
9047
  var TransformRepeaterControl = createControl(
9049
9048
  ({ showChildrenPerspective }) => {
9050
9049
  const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
9051
- const headerRef = (0, import_react67.useRef)(null);
9052
- const popupState = (0, import_ui96.usePopupState)({ variant: "popover" });
9053
- return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
9050
+ const headerRef = (0, import_react66.useRef)(null);
9051
+ const popupState = (0, import_ui97.usePopupState)({ variant: "popover" });
9052
+ return /* @__PURE__ */ React113.createElement(PropProvider, { ...context }, /* @__PURE__ */ React113.createElement(
9054
9053
  TransformSettingsControl,
9055
9054
  {
9056
9055
  popupState,
9057
9056
  anchorRef: headerRef,
9058
9057
  showChildrenPerspective
9059
9058
  }
9060
- ), /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React112.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
9059
+ ), /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React113.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
9061
9060
  }
9062
9061
  );
9063
- var ToolTip = /* @__PURE__ */ React112.createElement(
9064
- import_ui96.Box,
9062
+ var ToolTip = /* @__PURE__ */ React113.createElement(
9063
+ import_ui97.Box,
9065
9064
  {
9066
9065
  component: "span",
9067
9066
  "aria-label": void 0,
9068
9067
  sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
9069
9068
  },
9070
- /* @__PURE__ */ React112.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
9071
- /* @__PURE__ */ React112.createElement(import_ui96.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
9069
+ /* @__PURE__ */ React113.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
9070
+ /* @__PURE__ */ React113.createElement(import_ui97.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
9072
9071
  );
9073
9072
  var Repeater2 = ({
9074
9073
  headerRef,
@@ -9082,21 +9081,21 @@ var Repeater2 = ({
9082
9081
  return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
9083
9082
  };
9084
9083
  const shouldDisableAddItem = !getInitialValue2();
9085
- return /* @__PURE__ */ React112.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React112.createElement(
9084
+ return /* @__PURE__ */ React113.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React113.createElement(
9086
9085
  ControlRepeater,
9087
9086
  {
9088
9087
  initial: getInitialValue2() ?? initialTransformValue,
9089
9088
  propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
9090
9089
  },
9091
- /* @__PURE__ */ React112.createElement(
9090
+ /* @__PURE__ */ React113.createElement(
9092
9091
  RepeaterHeader,
9093
9092
  {
9094
9093
  label: (0, import_i18n57.__)("Transform", "elementor"),
9095
- adornment: () => /* @__PURE__ */ React112.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
9094
+ adornment: () => /* @__PURE__ */ React113.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
9096
9095
  ref: headerRef
9097
9096
  },
9098
- /* @__PURE__ */ React112.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
9099
- /* @__PURE__ */ React112.createElement(
9097
+ /* @__PURE__ */ React113.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
9098
+ /* @__PURE__ */ React113.createElement(
9100
9099
  TooltipAddItemAction,
9101
9100
  {
9102
9101
  disabled: shouldDisableAddItem,
@@ -9106,15 +9105,15 @@ var Repeater2 = ({
9106
9105
  }
9107
9106
  )
9108
9107
  ),
9109
- /* @__PURE__ */ React112.createElement(ItemsContainer, null, /* @__PURE__ */ React112.createElement(
9108
+ /* @__PURE__ */ React113.createElement(ItemsContainer, null, /* @__PURE__ */ React113.createElement(
9110
9109
  Item,
9111
9110
  {
9112
9111
  Icon: TransformIcon,
9113
9112
  Label: TransformLabel,
9114
- actions: /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(DisableItemAction, null), /* @__PURE__ */ React112.createElement(RemoveItemAction, null))
9113
+ actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(DisableItemAction, null), /* @__PURE__ */ React113.createElement(RemoveItemAction, null))
9115
9114
  }
9116
9115
  )),
9117
- /* @__PURE__ */ React112.createElement(EditItemPopover, null, /* @__PURE__ */ React112.createElement(TransformContent, null))
9116
+ /* @__PURE__ */ React113.createElement(EditItemPopover, null, /* @__PURE__ */ React113.createElement(TransformContent, null))
9118
9117
  ));
9119
9118
  };
9120
9119
  var TransformBasePopoverTrigger = ({
@@ -9123,29 +9122,29 @@ var TransformBasePopoverTrigger = ({
9123
9122
  }) => {
9124
9123
  const { bind } = useBoundProp();
9125
9124
  const titleLabel = (0, import_i18n57.__)("Transform settings", "elementor");
9126
- return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(import_ui96.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(import_ui96.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui96.bindTrigger)(popupState) }, /* @__PURE__ */ React112.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
9125
+ return bind !== repeaterBindKey ? null : /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui97.bindTrigger)(popupState) }, /* @__PURE__ */ React113.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
9127
9126
  };
9128
9127
 
9129
9128
  // src/controls/transition-control/transition-repeater-control.tsx
9130
- var React115 = __toESM(require("react"));
9131
- var import_react70 = require("react");
9129
+ var React116 = __toESM(require("react"));
9130
+ var import_react69 = require("react");
9132
9131
  var import_editor_props57 = require("@elementor/editor-props");
9133
9132
  var import_icons39 = require("@elementor/icons");
9134
- var import_ui99 = require("@elementor/ui");
9133
+ var import_ui100 = require("@elementor/ui");
9135
9134
  var import_utils8 = require("@elementor/utils");
9136
9135
  var import_i18n60 = require("@wordpress/i18n");
9137
9136
 
9138
9137
  // src/controls/selection-size-control.tsx
9139
- var React113 = __toESM(require("react"));
9140
- var import_react68 = require("react");
9138
+ var React114 = __toESM(require("react"));
9139
+ var import_react67 = require("react");
9141
9140
  var import_editor_props55 = require("@elementor/editor-props");
9142
- var import_ui97 = require("@elementor/ui");
9141
+ var import_ui98 = require("@elementor/ui");
9143
9142
  var SelectionSizeControl = createControl(
9144
9143
  ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
9145
9144
  const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
9146
- const rowRef = (0, import_react68.useRef)(null);
9145
+ const rowRef = (0, import_react67.useRef)(null);
9147
9146
  const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
9148
- const currentSizeConfig = (0, import_react68.useMemo)(() => {
9147
+ const currentSizeConfig = (0, import_react67.useMemo)(() => {
9149
9148
  switch (value.selection.$$type) {
9150
9149
  case "key-value":
9151
9150
  return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -9156,7 +9155,7 @@ var SelectionSizeControl = createControl(
9156
9155
  }
9157
9156
  }, [value, sizeConfigMap]);
9158
9157
  const SelectionComponent = selectionConfig.component;
9159
- return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React113.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
9158
+ return /* @__PURE__ */ React114.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React114.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React114.createElement(
9160
9159
  SizeControl,
9161
9160
  {
9162
9161
  anchorRef: rowRef,
@@ -9357,12 +9356,12 @@ function subscribeToTransitionEvent() {
9357
9356
  }
9358
9357
 
9359
9358
  // src/controls/transition-control/transition-selector.tsx
9360
- var React114 = __toESM(require("react"));
9361
- var import_react69 = require("react");
9359
+ var React115 = __toESM(require("react"));
9360
+ var import_react68 = require("react");
9362
9361
  var import_editor_props56 = require("@elementor/editor-props");
9363
9362
  var import_editor_ui15 = require("@elementor/editor-ui");
9364
9363
  var import_icons38 = require("@elementor/icons");
9365
- var import_ui98 = require("@elementor/ui");
9364
+ var import_ui99 = require("@elementor/ui");
9366
9365
  var import_i18n59 = require("@wordpress/i18n");
9367
9366
 
9368
9367
  // src/utils/tracking.ts
@@ -9444,9 +9443,9 @@ var TransitionSelector = ({
9444
9443
  const {
9445
9444
  key: { value: transitionLabel }
9446
9445
  } = value;
9447
- const defaultRef = (0, import_react69.useRef)(null);
9448
- const popoverState = (0, import_ui98.usePopupState)({ variant: "popover" });
9449
- const disabledCategories = (0, import_react69.useMemo)(() => {
9446
+ const defaultRef = (0, import_react68.useRef)(null);
9447
+ const popoverState = (0, import_ui99.usePopupState)({ variant: "popover" });
9448
+ const disabledCategories = (0, import_react68.useMemo)(() => {
9450
9449
  return new Set(
9451
9450
  transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
9452
9451
  );
@@ -9490,27 +9489,27 @@ var TransitionSelector = ({
9490
9489
  left: rect.right + 36
9491
9490
  };
9492
9491
  };
9493
- return /* @__PURE__ */ React114.createElement(import_ui98.Box, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
9494
- import_ui98.UnstableTag,
9492
+ return /* @__PURE__ */ React115.createElement(import_ui99.Box, { ref: defaultRef }, /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
9493
+ import_ui99.UnstableTag,
9495
9494
  {
9496
9495
  variant: "outlined",
9497
9496
  label: transitionLabel,
9498
- endIcon: /* @__PURE__ */ React114.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
9499
- ...(0, import_ui98.bindTrigger)(popoverState),
9497
+ endIcon: /* @__PURE__ */ React115.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
9498
+ ...(0, import_ui99.bindTrigger)(popoverState),
9500
9499
  fullWidth: true
9501
9500
  }
9502
- )), /* @__PURE__ */ React114.createElement(
9503
- import_ui98.Popover,
9501
+ )), /* @__PURE__ */ React115.createElement(
9502
+ import_ui99.Popover,
9504
9503
  {
9505
9504
  disablePortal: true,
9506
9505
  disableScrollLock: true,
9507
- ...(0, import_ui98.bindPopover)(popoverState),
9506
+ ...(0, import_ui99.bindPopover)(popoverState),
9508
9507
  anchorReference: "anchorPosition",
9509
9508
  anchorPosition: getAnchorPosition(),
9510
9509
  anchorOrigin: { vertical: "top", horizontal: "right" },
9511
9510
  transformOrigin: { vertical: "top", horizontal: "left" }
9512
9511
  },
9513
- /* @__PURE__ */ React114.createElement(
9512
+ /* @__PURE__ */ React115.createElement(
9514
9513
  ItemSelector,
9515
9514
  {
9516
9515
  itemsList: getItemList(),
@@ -9521,8 +9520,8 @@ var TransitionSelector = ({
9521
9520
  title: (0, import_i18n59.__)("Transition Property", "elementor"),
9522
9521
  icon: import_icons38.VariationsIcon,
9523
9522
  disabledItems: includeCurrentValueInOptions(value, disabledItems),
9524
- categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
9525
- import_ui98.Box,
9523
+ categoryItemContentTemplate: (item) => /* @__PURE__ */ React115.createElement(
9524
+ import_ui99.Box,
9526
9525
  {
9527
9526
  sx: {
9528
9527
  display: "flex",
@@ -9531,10 +9530,10 @@ var TransitionSelector = ({
9531
9530
  width: "100%"
9532
9531
  }
9533
9532
  },
9534
- /* @__PURE__ */ React114.createElement("span", null, item.value),
9535
- showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React114.createElement(import_editor_ui15.PromotionChip, null)
9533
+ /* @__PURE__ */ React115.createElement("span", null, item.value),
9534
+ showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React115.createElement(import_editor_ui15.PromotionChip, null)
9536
9535
  ),
9537
- footer: showPromotion ? /* @__PURE__ */ React114.createElement(
9536
+ footer: showPromotion ? /* @__PURE__ */ React115.createElement(
9538
9537
  import_editor_ui15.PromotionAlert,
9539
9538
  {
9540
9539
  message: (0, import_i18n59.__)(
@@ -9653,18 +9652,18 @@ var getInitialValue = (values = []) => {
9653
9652
  }
9654
9653
  return initialTransitionValue;
9655
9654
  };
9656
- var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
9657
- import_ui99.Alert,
9655
+ var disableAddItemTooltipContent = /* @__PURE__ */ React116.createElement(
9656
+ import_ui100.Alert,
9658
9657
  {
9659
9658
  sx: {
9660
9659
  width: 280,
9661
9660
  gap: 0.5
9662
9661
  },
9663
9662
  color: "secondary",
9664
- icon: /* @__PURE__ */ React115.createElement(import_icons39.InfoCircleFilledIcon, null)
9663
+ icon: /* @__PURE__ */ React116.createElement(import_icons39.InfoCircleFilledIcon, null)
9665
9664
  },
9666
- /* @__PURE__ */ React115.createElement(import_ui99.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
9667
- /* @__PURE__ */ React115.createElement(import_ui99.Box, { component: "span" }, /* @__PURE__ */ React115.createElement(import_ui99.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
9665
+ /* @__PURE__ */ React116.createElement(import_ui100.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
9666
+ /* @__PURE__ */ React116.createElement(import_ui100.Box, { component: "span" }, /* @__PURE__ */ React116.createElement(import_ui100.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
9668
9667
  );
9669
9668
  var TransitionRepeaterControl = createControl(
9670
9669
  ({
@@ -9672,14 +9671,14 @@ var TransitionRepeaterControl = createControl(
9672
9671
  currentStyleState
9673
9672
  }) => {
9674
9673
  const currentStyleIsNormal = currentStyleState === null;
9675
- const [recentlyUsedList, setRecentlyUsedList] = (0, import_react70.useState)([]);
9674
+ const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
9676
9675
  const proInstalled = (0, import_utils8.hasProInstalled)();
9677
9676
  const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
9678
- const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react70.useMemo)(
9677
+ const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
9679
9678
  () => getDisabledItemLabels(value),
9680
9679
  [value]
9681
9680
  );
9682
- const allowedTransitionSet = (0, import_react70.useMemo)(() => {
9681
+ const allowedTransitionSet = (0, import_react69.useMemo)(() => {
9683
9682
  const set = /* @__PURE__ */ new Set();
9684
9683
  transitionProperties.forEach((category) => {
9685
9684
  category.properties.forEach((prop) => {
@@ -9690,7 +9689,7 @@ var TransitionRepeaterControl = createControl(
9690
9689
  });
9691
9690
  return set;
9692
9691
  }, [proInstalled]);
9693
- (0, import_react70.useEffect)(() => {
9692
+ (0, import_react69.useEffect)(() => {
9694
9693
  if (!value || value.length === 0) {
9695
9694
  return;
9696
9695
  }
@@ -9702,12 +9701,12 @@ var TransitionRepeaterControl = createControl(
9702
9701
  setValue(sanitized);
9703
9702
  }
9704
9703
  }, [allowedTransitionSet]);
9705
- (0, import_react70.useEffect)(() => {
9704
+ (0, import_react69.useEffect)(() => {
9706
9705
  recentlyUsedListGetter().then(setRecentlyUsedList);
9707
9706
  }, [recentlyUsedListGetter]);
9708
- const allPropertiesUsed = (0, import_react70.useMemo)(() => areAllPropertiesUsed(value), [value]);
9707
+ const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
9709
9708
  const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
9710
- return /* @__PURE__ */ React115.createElement(
9709
+ return /* @__PURE__ */ React116.createElement(
9711
9710
  RepeatableControl,
9712
9711
  {
9713
9712
  label: (0, import_i18n60.__)("Transitions", "elementor"),
@@ -9734,11 +9733,11 @@ var TransitionRepeaterControl = createControl(
9734
9733
  );
9735
9734
 
9736
9735
  // src/controls/date-time-control.tsx
9737
- var React116 = __toESM(require("react"));
9736
+ var React117 = __toESM(require("react"));
9738
9737
  var dayjs = __toESM(require("dayjs"));
9739
9738
  var import_editor_props58 = require("@elementor/editor-props");
9740
9739
  var import_editor_props59 = require("@elementor/editor-props");
9741
- var import_ui100 = require("@elementor/ui");
9740
+ var import_ui101 = require("@elementor/ui");
9742
9741
  var DATE_FORMAT = "YYYY-MM-DD";
9743
9742
  var TIME_FORMAT = "HH:mm";
9744
9743
  var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -9782,8 +9781,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
9782
9781
  const base = dayjs.default();
9783
9782
  return base.hour(h).minute(m).second(0).millisecond(0);
9784
9783
  };
9785
- return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React116.createElement(import_ui100.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
9786
- import_ui100.DatePicker,
9784
+ return /* @__PURE__ */ React117.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(import_ui101.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(import_ui101.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React117.createElement(
9785
+ import_ui101.DatePicker,
9787
9786
  {
9788
9787
  value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
9789
9788
  onChange: (v) => handleChange({ date: v }, { bind: "date" }),
@@ -9794,8 +9793,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
9794
9793
  openPickerIcon: { fontSize: "tiny" }
9795
9794
  }
9796
9795
  }
9797
- )), /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React116.createElement(
9798
- import_ui100.TimePicker,
9796
+ )), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React117.createElement(
9797
+ import_ui101.TimePicker,
9799
9798
  {
9800
9799
  value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
9801
9800
  onChange: (v) => handleChange({ time: v }, { bind: "time" }),
@@ -9810,15 +9809,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
9810
9809
  });
9811
9810
 
9812
9811
  // src/controls/date-range-control.tsx
9813
- var React118 = __toESM(require("react"));
9812
+ var React119 = __toESM(require("react"));
9814
9813
  var import_editor_props61 = require("@elementor/editor-props");
9815
- var import_ui102 = require("@elementor/ui");
9814
+ var import_ui103 = require("@elementor/ui");
9816
9815
  var import_i18n61 = require("@wordpress/i18n");
9817
9816
 
9818
9817
  // src/controls/date-string-control.tsx
9819
- var React117 = __toESM(require("react"));
9818
+ var React118 = __toESM(require("react"));
9820
9819
  var import_editor_props60 = require("@elementor/editor-props");
9821
- var import_ui101 = require("@elementor/ui");
9820
+ var import_ui102 = require("@elementor/ui");
9822
9821
 
9823
9822
  // src/utils/date-time.ts
9824
9823
  var dayjs2 = __toESM(require("dayjs"));
@@ -9875,8 +9874,8 @@ var DateStringControl = createControl(
9875
9874
  }
9876
9875
  setValue(newValue.format(format));
9877
9876
  };
9878
- return /* @__PURE__ */ React117.createElement(import_ui101.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
9879
- import_ui101.DatePicker,
9877
+ return /* @__PURE__ */ React118.createElement(import_ui102.LocalizationProvider, null, /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
9878
+ import_ui102.DatePicker,
9880
9879
  {
9881
9880
  value: parseDateString(value ?? ""),
9882
9881
  onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
@@ -9904,34 +9903,34 @@ var DateRangeControl = createControl(() => {
9904
9903
  const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
9905
9904
  const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
9906
9905
  const hasInvalidRange = isMaxBeforeMin(minString, maxString);
9907
- return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
9906
+ return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 0.75 }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
9908
9907
  BoundDateStringControl,
9909
9908
  {
9910
9909
  bind: "min",
9911
9910
  ariaLabel: RANGE_LABELS.min,
9912
9911
  error: hasInvalidRange
9913
9912
  }
9914
- ))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
9913
+ ))), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
9915
9914
  BoundDateStringControl,
9916
9915
  {
9917
9916
  bind: "max",
9918
9917
  ariaLabel: RANGE_LABELS.max,
9919
9918
  error: hasInvalidRange
9920
9919
  }
9921
- )))), hasInvalidRange && /* @__PURE__ */ React118.createElement(import_ui102.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
9920
+ )))), hasInvalidRange && /* @__PURE__ */ React119.createElement(import_ui103.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
9922
9921
  });
9923
9922
  var BoundDateStringControl = ({
9924
9923
  bind,
9925
9924
  ariaLabel,
9926
9925
  error
9927
9926
  }) => {
9928
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
9927
+ return /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
9929
9928
  };
9930
9929
 
9931
9930
  // src/controls/time-string-control.tsx
9932
- var React119 = __toESM(require("react"));
9931
+ var React120 = __toESM(require("react"));
9933
9932
  var import_editor_props62 = require("@elementor/editor-props");
9934
- var import_ui103 = require("@elementor/ui");
9933
+ var import_ui104 = require("@elementor/ui");
9935
9934
  var TimeStringControl = createControl(
9936
9935
  ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
9937
9936
  const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
@@ -9957,8 +9956,8 @@ var TimeStringControl = createControl(
9957
9956
  }
9958
9957
  setValue(newValue.format(format));
9959
9958
  };
9960
- return /* @__PURE__ */ React119.createElement(import_ui103.LocalizationProvider, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
9961
- import_ui103.TimePicker,
9959
+ return /* @__PURE__ */ React120.createElement(import_ui104.LocalizationProvider, null, /* @__PURE__ */ React120.createElement(ControlActions, null, /* @__PURE__ */ React120.createElement(
9960
+ import_ui104.TimePicker,
9962
9961
  {
9963
9962
  value: parseTimeString(value ?? ""),
9964
9963
  onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
@@ -9970,9 +9969,9 @@ var TimeStringControl = createControl(
9970
9969
  );
9971
9970
 
9972
9971
  // src/controls/time-range-control.tsx
9973
- var React120 = __toESM(require("react"));
9972
+ var React121 = __toESM(require("react"));
9974
9973
  var import_editor_props63 = require("@elementor/editor-props");
9975
- var import_ui104 = require("@elementor/ui");
9974
+ var import_ui105 = require("@elementor/ui");
9976
9975
  var import_i18n62 = require("@wordpress/i18n");
9977
9976
  var RANGE_LABELS2 = {
9978
9977
  min: (0, import_i18n62.__)("Start time", "elementor"),
@@ -9980,22 +9979,22 @@ var RANGE_LABELS2 = {
9980
9979
  };
9981
9980
  var TimeRangeControl = createControl(() => {
9982
9981
  const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
9983
- return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
9982
+ return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
9984
9983
  });
9985
9984
  var BoundTimeStringControl = ({ bind, ariaLabel }) => {
9986
- return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React120.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
9985
+ return /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React121.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
9987
9986
  };
9988
9987
 
9989
9988
  // src/controls/inline-editing-control.tsx
9990
- var React124 = __toESM(require("react"));
9991
- var import_react76 = require("react");
9989
+ var React125 = __toESM(require("react"));
9990
+ var import_react75 = require("react");
9992
9991
  var import_editor_props65 = require("@elementor/editor-props");
9993
- var import_ui108 = require("@elementor/ui");
9992
+ var import_ui109 = require("@elementor/ui");
9994
9993
 
9995
9994
  // src/components/inline-editor.tsx
9996
- var React121 = __toESM(require("react"));
9997
- var import_react71 = require("react");
9998
- var import_ui105 = require("@elementor/ui");
9995
+ var React122 = __toESM(require("react"));
9996
+ var import_react70 = require("react");
9997
+ var import_ui106 = require("@elementor/ui");
9999
9998
  var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
10000
9999
  var import_extension_document = __toESM(require("@tiptap/extension-document"));
10001
10000
  var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
@@ -10008,7 +10007,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
10008
10007
  var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
10009
10008
  var import_extension_text = __toESM(require("@tiptap/extension-text"));
10010
10009
  var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
10011
- var import_react72 = require("@tiptap/react");
10010
+ var import_react71 = require("@tiptap/react");
10012
10011
 
10013
10012
  // src/utils/inline-editing.ts
10014
10013
  var import_editor_props64 = require("@elementor/editor-props");
@@ -10040,7 +10039,7 @@ function extractInlineHtmlContent(propValue) {
10040
10039
  var ITALIC_KEYBOARD_SHORTCUT = "i";
10041
10040
  var BOLD_KEYBOARD_SHORTCUT = "b";
10042
10041
  var UNDERLINE_KEYBOARD_SHORTCUT = "u";
10043
- var InlineEditor = React121.forwardRef((props, ref) => {
10042
+ var InlineEditor = React122.forwardRef((props, ref) => {
10044
10043
  const {
10045
10044
  value,
10046
10045
  setValue,
@@ -10057,8 +10056,8 @@ var InlineEditor = React121.forwardRef((props, ref) => {
10057
10056
  onSelectionEnd,
10058
10057
  mountElement = null
10059
10058
  } = props;
10060
- const containerRef = (0, import_react71.useRef)(null);
10061
- const onBlurRef = (0, import_react71.useRef)(onBlur);
10059
+ const containerRef = (0, import_react70.useRef)(null);
10060
+ const onBlurRef = (0, import_react70.useRef)(onBlur);
10062
10061
  onBlurRef.current = onBlur;
10063
10062
  const documentContentSettings = !!expectedTag ? "block+" : "inline*";
10064
10063
  const onUpdate = ({ editor: updatedEditor }) => {
@@ -10080,7 +10079,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
10080
10079
  ...HTMLAttributes,
10081
10080
  class: elementClasses
10082
10081
  });
10083
- const editor = (0, import_react72.useEditor)({
10082
+ const editor = (0, import_react71.useEditor)({
10084
10083
  ...mountElement ? { element: mountElement } : {},
10085
10084
  extensions: [
10086
10085
  import_extension_document.default.extend({
@@ -10153,11 +10152,11 @@ var InlineEditor = React121.forwardRef((props, ref) => {
10153
10152
  if (mountElement) {
10154
10153
  return null;
10155
10154
  }
10156
- return /* @__PURE__ */ React121.createElement(import_ui105.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react72.EditorContent, { ref, editor }));
10155
+ return /* @__PURE__ */ React122.createElement(import_ui106.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React122.createElement(import_react71.EditorContent, { ref, editor }));
10157
10156
  });
10158
10157
  var useOnUpdate = (callback, dependencies) => {
10159
- const hasMounted = (0, import_react71.useRef)(false);
10160
- (0, import_react71.useEffect)(() => {
10158
+ const hasMounted = (0, import_react70.useRef)(false);
10159
+ (0, import_react70.useEffect)(() => {
10161
10160
  if (hasMounted.current) {
10162
10161
  callback();
10163
10162
  } else {
@@ -10167,19 +10166,19 @@ var useOnUpdate = (callback, dependencies) => {
10167
10166
  };
10168
10167
 
10169
10168
  // src/components/inline-editor-toolbar.tsx
10170
- var React123 = __toESM(require("react"));
10171
- var import_react74 = require("react");
10169
+ var React124 = __toESM(require("react"));
10170
+ var import_react73 = require("react");
10172
10171
  var import_editor_elements7 = require("@elementor/editor-elements");
10173
10172
  var import_icons41 = require("@elementor/icons");
10174
- var import_ui107 = require("@elementor/ui");
10175
- var import_react75 = require("@tiptap/react");
10173
+ var import_ui108 = require("@elementor/ui");
10174
+ var import_react74 = require("@tiptap/react");
10176
10175
  var import_i18n64 = require("@wordpress/i18n");
10177
10176
 
10178
10177
  // src/components/url-popover.tsx
10179
- var React122 = __toESM(require("react"));
10180
- var import_react73 = require("react");
10178
+ var React123 = __toESM(require("react"));
10179
+ var import_react72 = require("react");
10181
10180
  var import_icons40 = require("@elementor/icons");
10182
- var import_ui106 = require("@elementor/ui");
10181
+ var import_ui107 = require("@elementor/ui");
10183
10182
  var import_i18n63 = require("@wordpress/i18n");
10184
10183
  var UrlPopover = ({
10185
10184
  popupState,
@@ -10190,8 +10189,8 @@ var UrlPopover = ({
10190
10189
  openInNewTab,
10191
10190
  onToggleNewTab
10192
10191
  }) => {
10193
- const inputRef = (0, import_react73.useRef)(null);
10194
- (0, import_react73.useEffect)(() => {
10192
+ const inputRef = (0, import_react72.useRef)(null);
10193
+ (0, import_react72.useEffect)(() => {
10195
10194
  if (popupState.isOpen) {
10196
10195
  requestAnimationFrame(() => inputRef.current?.focus());
10197
10196
  }
@@ -10200,19 +10199,19 @@ var UrlPopover = ({
10200
10199
  restoreValue();
10201
10200
  popupState.close();
10202
10201
  };
10203
- return /* @__PURE__ */ React122.createElement(
10204
- import_ui106.Popover,
10202
+ return /* @__PURE__ */ React123.createElement(
10203
+ import_ui107.Popover,
10205
10204
  {
10206
10205
  slotProps: {
10207
10206
  paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
10208
10207
  },
10209
- ...(0, import_ui106.bindPopover)(popupState),
10208
+ ...(0, import_ui107.bindPopover)(popupState),
10210
10209
  anchorOrigin: { vertical: "top", horizontal: "left" },
10211
10210
  transformOrigin: { vertical: "top", horizontal: "left" },
10212
10211
  onClose: handleClose
10213
10212
  },
10214
- /* @__PURE__ */ React122.createElement(import_ui106.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
10215
- import_ui106.TextField,
10213
+ /* @__PURE__ */ React123.createElement(import_ui107.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React123.createElement(
10214
+ import_ui107.TextField,
10216
10215
  {
10217
10216
  value,
10218
10217
  onChange,
@@ -10224,8 +10223,8 @@ var UrlPopover = ({
10224
10223
  InputProps: { sx: { borderRadius: "8px" } },
10225
10224
  onKeyUp: (event) => event.key === "Enter" && handleClose()
10226
10225
  }
10227
- ), /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
10228
- import_ui106.ToggleButton,
10226
+ ), /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React123.createElement(
10227
+ import_ui107.ToggleButton,
10229
10228
  {
10230
10229
  size: "tiny",
10231
10230
  value: "newTab",
@@ -10234,7 +10233,7 @@ var UrlPopover = ({
10234
10233
  "aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
10235
10234
  sx: { borderRadius: "8px" }
10236
10235
  },
10237
- /* @__PURE__ */ React122.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
10236
+ /* @__PURE__ */ React123.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
10238
10237
  )))
10239
10238
  );
10240
10239
  };
@@ -10246,16 +10245,16 @@ var InlineEditorToolbar = ({
10246
10245
  sx = {},
10247
10246
  inControlPanel = false
10248
10247
  }) => {
10249
- const [urlValue, setUrlValue] = (0, import_react74.useState)("");
10250
- const [openInNewTab, setOpenInNewTab] = (0, import_react74.useState)(false);
10251
- const toolbarRef = (0, import_react74.useRef)(null);
10252
- const linkPopupState = (0, import_ui107.usePopupState)({ variant: "popover" });
10248
+ const [urlValue, setUrlValue] = (0, import_react73.useState)("");
10249
+ const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
10250
+ const toolbarRef = (0, import_react73.useRef)(null);
10251
+ const linkPopupState = (0, import_ui108.usePopupState)({ variant: "popover" });
10253
10252
  const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
10254
- const editorState = (0, import_react75.useEditorState)({
10253
+ const editorState = (0, import_react74.useEditorState)({
10255
10254
  editor,
10256
10255
  selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
10257
10256
  });
10258
- const formatButtonsList = (0, import_react74.useMemo)(() => {
10257
+ const formatButtonsList = (0, import_react73.useMemo)(() => {
10259
10258
  const buttons = Object.values(formatButtons);
10260
10259
  if (isElementClickable) {
10261
10260
  return buttons.filter((button) => button.action !== "link");
@@ -10292,13 +10291,13 @@ var InlineEditorToolbar = ({
10292
10291
  }
10293
10292
  linkPopupState.close();
10294
10293
  };
10295
- (0, import_react74.useEffect)(() => {
10294
+ (0, import_react73.useEffect)(() => {
10296
10295
  if (!inControlPanel) {
10297
10296
  editor?.commands?.focus();
10298
10297
  }
10299
10298
  }, [editor, inControlPanel]);
10300
- return /* @__PURE__ */ React123.createElement(
10301
- import_ui107.Box,
10299
+ return /* @__PURE__ */ React124.createElement(
10300
+ import_ui108.Box,
10302
10301
  {
10303
10302
  ref: toolbarRef,
10304
10303
  sx: {
@@ -10331,9 +10330,9 @@ var InlineEditorToolbar = ({
10331
10330
  }
10332
10331
  }
10333
10332
  },
10334
- /* @__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)),
10335
- /* @__PURE__ */ React123.createElement(
10336
- import_ui107.ToggleButtonGroup,
10333
+ /* @__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)),
10334
+ /* @__PURE__ */ React124.createElement(
10335
+ import_ui108.ToggleButtonGroup,
10337
10336
  {
10338
10337
  value: editorState,
10339
10338
  size: "tiny",
@@ -10341,7 +10340,7 @@ var InlineEditorToolbar = ({
10341
10340
  display: "flex",
10342
10341
  gap: 0.5,
10343
10342
  border: "none",
10344
- [`& .${import_ui107.toggleButtonGroupClasses.firstButton}, & .${import_ui107.toggleButtonGroupClasses.middleButton}, & .${import_ui107.toggleButtonGroupClasses.lastButton}`]: {
10343
+ [`& .${import_ui108.toggleButtonGroupClasses.firstButton}, & .${import_ui108.toggleButtonGroupClasses.middleButton}, & .${import_ui108.toggleButtonGroupClasses.lastButton}`]: {
10345
10344
  borderRadius: "8px",
10346
10345
  border: "none",
10347
10346
  marginLeft: 0,
@@ -10362,8 +10361,8 @@ var InlineEditorToolbar = ({
10362
10361
  }
10363
10362
  }
10364
10363
  },
10365
- formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
10366
- import_ui107.ToggleButton,
10364
+ formatButtonsList.map((button) => /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React124.createElement(
10365
+ import_ui108.ToggleButton,
10367
10366
  {
10368
10367
  value: button.action,
10369
10368
  "aria-label": button.label,
@@ -10380,7 +10379,7 @@ var InlineEditorToolbar = ({
10380
10379
  button.icon
10381
10380
  )))
10382
10381
  ),
10383
- /* @__PURE__ */ React123.createElement(
10382
+ /* @__PURE__ */ React124.createElement(
10384
10383
  UrlPopover,
10385
10384
  {
10386
10385
  popupState: linkPopupState,
@@ -10404,7 +10403,7 @@ var checkIfElementIsClickable = (elementId) => {
10404
10403
  var toolbarButtons = {
10405
10404
  clear: {
10406
10405
  label: (0, import_i18n64.__)("Clear", "elementor"),
10407
- icon: /* @__PURE__ */ React123.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
10406
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
10408
10407
  action: "clear",
10409
10408
  method: (editor) => {
10410
10409
  editor.chain().focus().clearNodes().unsetAllMarks().run();
@@ -10412,7 +10411,7 @@ var toolbarButtons = {
10412
10411
  },
10413
10412
  bold: {
10414
10413
  label: (0, import_i18n64.__)("Bold", "elementor"),
10415
- icon: /* @__PURE__ */ React123.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
10414
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
10416
10415
  action: "bold",
10417
10416
  method: (editor) => {
10418
10417
  editor.chain().focus().toggleBold().run();
@@ -10420,7 +10419,7 @@ var toolbarButtons = {
10420
10419
  },
10421
10420
  italic: {
10422
10421
  label: (0, import_i18n64.__)("Italic", "elementor"),
10423
- icon: /* @__PURE__ */ React123.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
10422
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
10424
10423
  action: "italic",
10425
10424
  method: (editor) => {
10426
10425
  editor.chain().focus().toggleItalic().run();
@@ -10428,7 +10427,7 @@ var toolbarButtons = {
10428
10427
  },
10429
10428
  underline: {
10430
10429
  label: (0, import_i18n64.__)("Underline", "elementor"),
10431
- icon: /* @__PURE__ */ React123.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
10430
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
10432
10431
  action: "underline",
10433
10432
  method: (editor) => {
10434
10433
  editor.chain().focus().toggleUnderline().run();
@@ -10436,7 +10435,7 @@ var toolbarButtons = {
10436
10435
  },
10437
10436
  strike: {
10438
10437
  label: (0, import_i18n64.__)("Strikethrough", "elementor"),
10439
- icon: /* @__PURE__ */ React123.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
10438
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
10440
10439
  action: "strike",
10441
10440
  method: (editor) => {
10442
10441
  editor.chain().focus().toggleStrike().run();
@@ -10444,7 +10443,7 @@ var toolbarButtons = {
10444
10443
  },
10445
10444
  superscript: {
10446
10445
  label: (0, import_i18n64.__)("Superscript", "elementor"),
10447
- icon: /* @__PURE__ */ React123.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
10446
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
10448
10447
  action: "superscript",
10449
10448
  method: (editor) => {
10450
10449
  editor.chain().focus().toggleSuperscript().run();
@@ -10452,7 +10451,7 @@ var toolbarButtons = {
10452
10451
  },
10453
10452
  subscript: {
10454
10453
  label: (0, import_i18n64.__)("Subscript", "elementor"),
10455
- icon: /* @__PURE__ */ React123.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
10454
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
10456
10455
  action: "subscript",
10457
10456
  method: (editor) => {
10458
10457
  editor.chain().focus().toggleSubscript().run();
@@ -10460,7 +10459,7 @@ var toolbarButtons = {
10460
10459
  },
10461
10460
  link: {
10462
10461
  label: (0, import_i18n64.__)("Link", "elementor"),
10463
- icon: /* @__PURE__ */ React123.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
10462
+ icon: /* @__PURE__ */ React124.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
10464
10463
  action: "link",
10465
10464
  method: null
10466
10465
  }
@@ -10473,15 +10472,15 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
10473
10472
  const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
10474
10473
  const { value: rawValue } = usePropKeyContext();
10475
10474
  const content = value ?? extractInlineHtmlContent(rawValue);
10476
- const [editor, setEditor] = (0, import_react76.useState)(null);
10477
- const handleChange = (0, import_react76.useCallback)(
10475
+ const [editor, setEditor] = (0, import_react75.useState)(null);
10476
+ const handleChange = (0, import_react75.useCallback)(
10478
10477
  (newValue) => {
10479
10478
  const html = newValue ?? "";
10480
10479
  setValue(html);
10481
10480
  },
10482
10481
  [setValue]
10483
10482
  );
10484
- return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(import_ui108.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
10483
+ return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(import_ui109.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React125.createElement(
10485
10484
  InlineEditorToolbar,
10486
10485
  {
10487
10486
  editor,
@@ -10494,8 +10493,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
10494
10493
  }),
10495
10494
  inControlPanel: true
10496
10495
  }
10497
- ), /* @__PURE__ */ React124.createElement(
10498
- import_ui108.Box,
10496
+ ), /* @__PURE__ */ React125.createElement(
10497
+ import_ui109.Box,
10499
10498
  {
10500
10499
  sx: (theme) => ({
10501
10500
  p: 0.8,
@@ -10539,7 +10538,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
10539
10538
  ...attributes,
10540
10539
  ...props
10541
10540
  },
10542
- /* @__PURE__ */ React124.createElement(
10541
+ /* @__PURE__ */ React125.createElement(
10543
10542
  InlineEditor,
10544
10543
  {
10545
10544
  value: content,
@@ -10556,16 +10555,16 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
10556
10555
  });
10557
10556
 
10558
10557
  // src/controls/email-form-action-control/index.tsx
10559
- var React128 = __toESM(require("react"));
10558
+ var React129 = __toESM(require("react"));
10560
10559
  var import_editor_props68 = require("@elementor/editor-props");
10561
10560
  var import_editor_ui17 = require("@elementor/editor-ui");
10562
- var import_ui112 = require("@elementor/ui");
10561
+ var import_ui113 = require("@elementor/ui");
10563
10562
  var import_i18n66 = require("@wordpress/i18n");
10564
10563
 
10565
10564
  // src/controls/email-form-action-control/fields.tsx
10566
- var React127 = __toESM(require("react"));
10565
+ var React128 = __toESM(require("react"));
10567
10566
  var import_editor_ui16 = require("@elementor/editor-ui");
10568
- var import_ui111 = require("@elementor/ui");
10567
+ var import_ui112 = require("@elementor/ui");
10569
10568
  var import_i18n65 = require("@wordpress/i18n");
10570
10569
 
10571
10570
  // src/hooks/use-form-field-suggestions.ts
@@ -10655,10 +10654,10 @@ function useFormFieldSuggestions(options) {
10655
10654
  }
10656
10655
 
10657
10656
  // src/controls/email-form-action-control/email-chips-field.tsx
10658
- var React125 = __toESM(require("react"));
10659
- var import_react77 = require("react");
10657
+ var React126 = __toESM(require("react"));
10658
+ var import_react76 = require("react");
10660
10659
  var import_editor_props67 = require("@elementor/editor-props");
10661
- var import_ui109 = require("@elementor/ui");
10660
+ var import_ui110 = require("@elementor/ui");
10662
10661
 
10663
10662
  // src/controls/email-form-action-control/utils.ts
10664
10663
  var import_schema = require("@elementor/schema");
@@ -10694,10 +10693,10 @@ function resolveMention(raw, suggestions) {
10694
10693
  }
10695
10694
  var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
10696
10695
  const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
10697
- const [inputValue, setInputValue] = (0, import_react77.useState)("");
10696
+ const [inputValue, setInputValue] = (0, import_react76.useState)("");
10698
10697
  const items2 = value || [];
10699
10698
  const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
10700
- const suggestionOptions = (0, import_react77.useMemo)(
10699
+ const suggestionOptions = (0, import_react76.useMemo)(
10701
10700
  () => suggestions.map((suggestion) => `[${suggestion.value}]`),
10702
10701
  [suggestions]
10703
10702
  );
@@ -10732,8 +10731,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
10732
10731
  tryAddChip(inputValue);
10733
10732
  }
10734
10733
  };
10735
- return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
10736
- import_ui109.Autocomplete,
10734
+ return /* @__PURE__ */ React126.createElement(ControlActions, null, /* @__PURE__ */ React126.createElement(
10735
+ import_ui110.Autocomplete,
10737
10736
  {
10738
10737
  fullWidth: true,
10739
10738
  multiple: true,
@@ -10757,31 +10756,31 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
10757
10756
  onBlur: handleBlur,
10758
10757
  getOptionLabel: (option) => option,
10759
10758
  isOptionEqualToValue: (option, val) => option === val,
10760
- renderInput: (params) => /* @__PURE__ */ React125.createElement(import_ui109.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
10761
- renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React125.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
10759
+ renderInput: (params) => /* @__PURE__ */ React126.createElement(import_ui110.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
10760
+ renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React126.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
10762
10761
  }
10763
10762
  ));
10764
10763
  });
10765
- var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(import_ui109.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
10764
+ var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React126.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(EmailChipsControl, { placeholder, suggestions })));
10766
10765
 
10767
10766
  // src/controls/email-form-action-control/email-field.tsx
10768
- var React126 = __toESM(require("react"));
10769
- var import_ui110 = require("@elementor/ui");
10770
- var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
10767
+ var React127 = __toESM(require("react"));
10768
+ var import_ui111 = require("@elementor/ui");
10769
+ var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(TextControl, { placeholder }))));
10771
10770
 
10772
10771
  // src/controls/email-form-action-control/fields.tsx
10773
10772
  var SendToField = ({ placeholder }) => {
10774
10773
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
10775
- return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(import_ui111.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
10774
+ return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(
10776
10775
  EmailChipsField,
10777
10776
  {
10778
10777
  fieldLabel: (0, import_i18n65.__)("Send to", "elementor"),
10779
10778
  placeholder,
10780
10779
  suggestions
10781
10780
  }
10782
- ), shouldShowMentionsInfo() && /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n65.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
10781
+ ), shouldShowMentionsInfo() && /* @__PURE__ */ React128.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n65.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
10783
10782
  };
10784
- var SubjectField = () => /* @__PURE__ */ React127.createElement(
10783
+ var SubjectField = () => /* @__PURE__ */ React128.createElement(
10785
10784
  EmailField,
10786
10785
  {
10787
10786
  bind: "subject",
@@ -10791,12 +10790,12 @@ var SubjectField = () => /* @__PURE__ */ React127.createElement(
10791
10790
  );
10792
10791
  var MessageField = () => {
10793
10792
  const suggestions = useFormFieldSuggestions();
10794
- return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
10793
+ return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
10795
10794
  "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
10796
10795
  "elementor"
10797
10796
  ) : (0, import_i18n65.__)("[all-fields] shortcode sends all fields.", "elementor")))));
10798
10797
  };
10799
- var FromEmailField = () => /* @__PURE__ */ React127.createElement(
10798
+ var FromEmailField = () => /* @__PURE__ */ React128.createElement(
10800
10799
  EmailField,
10801
10800
  {
10802
10801
  bind: "from",
@@ -10804,7 +10803,7 @@ var FromEmailField = () => /* @__PURE__ */ React127.createElement(
10804
10803
  placeholder: (0, import_i18n65.__)("What email should appear as the sender?", "elementor")
10805
10804
  }
10806
10805
  );
10807
- var FromNameField = () => /* @__PURE__ */ React127.createElement(
10806
+ var FromNameField = () => /* @__PURE__ */ React128.createElement(
10808
10807
  EmailField,
10809
10808
  {
10810
10809
  bind: "from-name",
@@ -10814,7 +10813,7 @@ var FromNameField = () => /* @__PURE__ */ React127.createElement(
10814
10813
  );
10815
10814
  var ReplyToField = () => {
10816
10815
  const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
10817
- return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
10816
+ return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(
10818
10817
  MentionTextAreaControl,
10819
10818
  {
10820
10819
  suggestions: emailSuggestions,
@@ -10826,13 +10825,13 @@ var ReplyToField = () => {
10826
10825
  };
10827
10826
  var CcField = () => {
10828
10827
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
10829
- return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Cc", "elementor"), suggestions }));
10828
+ return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Cc", "elementor"), suggestions }));
10830
10829
  };
10831
10830
  var BccField = () => {
10832
10831
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
10833
- return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
10832
+ return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
10834
10833
  };
10835
- var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(import_ui111.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
10834
+ var MetaDataField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React128.createElement(
10836
10835
  ChipsControl,
10837
10836
  {
10838
10837
  options: [
@@ -10844,7 +10843,7 @@ var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider
10844
10843
  ]
10845
10844
  }
10846
10845
  )));
10847
- var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
10846
+ var SendAsField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(
10848
10847
  SelectControl,
10849
10848
  {
10850
10849
  options: [
@@ -10858,30 +10857,30 @@ var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider,
10858
10857
  var EmailFormActionControl = createControl(
10859
10858
  ({ toPlaceholder, label }) => {
10860
10859
  const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
10861
- return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("Email settings", "elementor")), /* @__PURE__ */ React128.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React128.createElement(SubjectField, null), /* @__PURE__ */ React128.createElement(MessageField, null), /* @__PURE__ */ React128.createElement(FromEmailField, null), /* @__PURE__ */ React128.createElement(AdvancedSettings, null)));
10860
+ return /* @__PURE__ */ React129.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React129.createElement(import_ui113.Stack, { gap: 2 }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("Email settings", "elementor")), /* @__PURE__ */ React129.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React129.createElement(SubjectField, null), /* @__PURE__ */ React129.createElement(MessageField, null), /* @__PURE__ */ React129.createElement(FromEmailField, null), /* @__PURE__ */ React129.createElement(AdvancedSettings, null)));
10862
10861
  }
10863
10862
  );
10864
- var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(FromNameField, null), /* @__PURE__ */ React128.createElement(ReplyToField, null), /* @__PURE__ */ React128.createElement(CcField, null), /* @__PURE__ */ React128.createElement(BccField, null), /* @__PURE__ */ React128.createElement(import_ui112.Divider, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
10863
+ var AdvancedSettings = () => /* @__PURE__ */ React129.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React129.createElement(import_ui113.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React129.createElement(import_ui113.Stack, { gap: 2 }, /* @__PURE__ */ React129.createElement(FromNameField, null), /* @__PURE__ */ React129.createElement(ReplyToField, null), /* @__PURE__ */ React129.createElement(CcField, null), /* @__PURE__ */ React129.createElement(BccField, null), /* @__PURE__ */ React129.createElement(import_ui113.Divider, null), /* @__PURE__ */ React129.createElement(MetaDataField, null), /* @__PURE__ */ React129.createElement(SendAsField, null))));
10865
10864
 
10866
10865
  // src/controls/attachment-type-control.tsx
10867
- var React129 = __toESM(require("react"));
10866
+ var React130 = __toESM(require("react"));
10868
10867
  var import_editor_ui18 = require("@elementor/editor-ui");
10869
- var import_ui113 = require("@elementor/ui");
10868
+ var import_ui114 = require("@elementor/ui");
10870
10869
  var import_i18n67 = require("@wordpress/i18n");
10871
10870
  var AttachmentTypeControl = createControl(({ label, options }) => {
10872
- return /* @__PURE__ */ React129.createElement(import_ui113.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
10871
+ return /* @__PURE__ */ React130.createElement(import_ui114.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(SelectControl, { options })), /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
10873
10872
  "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
10874
10873
  "elementor"
10875
10874
  ))));
10876
10875
  });
10877
10876
 
10878
10877
  // src/controls/notice-control.tsx
10879
- var React130 = __toESM(require("react"));
10880
- var import_react78 = require("react");
10878
+ var React131 = __toESM(require("react"));
10879
+ var import_react77 = require("react");
10881
10880
  var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
10882
10881
  var import_icons42 = require("@elementor/icons");
10883
- var import_ui114 = require("@elementor/ui");
10884
- var NoticeTitle = (0, import_ui114.styled)(import_ui114.AlertTitle)({
10882
+ var import_ui115 = require("@elementor/ui");
10883
+ var NoticeTitle = (0, import_ui115.styled)(import_ui115.AlertTitle)({
10885
10884
  "&.MuiAlertTitle-root.MuiAlertTitle-root": {
10886
10885
  marginBottom: 4,
10887
10886
  fontStyle: "italic"
@@ -10895,12 +10894,12 @@ var markNoticeAsDismissedInSession = (dismissId) => {
10895
10894
  };
10896
10895
  var NoticeControl = createControl(
10897
10896
  ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
10898
- const [isDismissed, setIsDismissed] = (0, import_react78.useState)(false);
10897
+ const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
10899
10898
  if (isDismissed || !content) {
10900
10899
  return null;
10901
10900
  }
10902
10901
  const severity = noticeType === "danger" ? "error" : noticeType;
10903
- const icon = noticeType === "info" ? /* @__PURE__ */ React130.createElement(import_icons42.BulbIcon, { fontSize: "inherit" }) : void 0;
10902
+ const icon = noticeType === "info" ? /* @__PURE__ */ React131.createElement(import_icons42.BulbIcon, { fontSize: "inherit" }) : void 0;
10904
10903
  const handleDismiss = () => {
10905
10904
  setIsDismissed(true);
10906
10905
  if (!dismissible) {
@@ -10920,8 +10919,8 @@ var NoticeControl = createControl(
10920
10919
  markNoticeAsDismissedInSession(dismissible);
10921
10920
  }
10922
10921
  };
10923
- return /* @__PURE__ */ React130.createElement(import_ui114.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(import_ui114.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
10924
- import_ui114.AlertAction,
10922
+ return /* @__PURE__ */ React131.createElement(import_ui115.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React131.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React131.createElement(import_ui115.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React131.createElement(
10923
+ import_ui115.AlertAction,
10925
10924
  {
10926
10925
  variant: "contained",
10927
10926
  color: severity,
@@ -10937,9 +10936,9 @@ var NoticeControl = createControl(
10937
10936
  );
10938
10937
 
10939
10938
  // src/controls/grid-span-control.tsx
10940
- var React131 = __toESM(require("react"));
10939
+ var React132 = __toESM(require("react"));
10941
10940
  var import_editor_props69 = require("@elementor/editor-props");
10942
- var import_ui115 = require("@elementor/ui");
10941
+ var import_ui116 = require("@elementor/ui");
10943
10942
  var GridSpanControl = createControl(
10944
10943
  ({
10945
10944
  placeholder: propPlaceholder,
@@ -10956,8 +10955,8 @@ var GridSpanControl = createControl(
10956
10955
  setValue(next === "" ? null : next);
10957
10956
  };
10958
10957
  const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
10959
- return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
10960
- import_ui115.TextField,
10958
+ return /* @__PURE__ */ React132.createElement(ControlActions, null, /* @__PURE__ */ React132.createElement(
10959
+ import_ui116.TextField,
10961
10960
  {
10962
10961
  size: "tiny",
10963
10962
  fullWidth: true,
@@ -10977,25 +10976,25 @@ var GridSpanControl = createControl(
10977
10976
  );
10978
10977
 
10979
10978
  // src/components/promotions/display-conditions-control.tsx
10980
- var React133 = __toESM(require("react"));
10981
- var import_react80 = require("react");
10979
+ var React134 = __toESM(require("react"));
10980
+ var import_react79 = require("react");
10982
10981
  var import_icons43 = require("@elementor/icons");
10983
- var import_ui117 = require("@elementor/ui");
10982
+ var import_ui118 = require("@elementor/ui");
10984
10983
  var import_i18n68 = require("@wordpress/i18n");
10985
10984
 
10986
10985
  // src/components/promotions/promotion-trigger.tsx
10987
- var React132 = __toESM(require("react"));
10988
- var import_react79 = require("react");
10986
+ var React133 = __toESM(require("react"));
10987
+ var import_react78 = require("react");
10989
10988
  var import_editor_ui19 = require("@elementor/editor-ui");
10990
- var import_ui116 = require("@elementor/ui");
10989
+ var import_ui117 = require("@elementor/ui");
10991
10990
  function getV4Promotion(key) {
10992
10991
  return window.elementor?.config?.v4Promotions?.[key];
10993
10992
  }
10994
- var PromotionTrigger = (0, import_react79.forwardRef)(
10993
+ var PromotionTrigger = (0, import_react78.forwardRef)(
10995
10994
  ({ promotionKey, children, trackingData }, ref) => {
10996
- const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
10995
+ const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
10997
10996
  const promotion = getV4Promotion(promotionKey);
10998
- const toggle = (0, import_react79.useCallback)(() => {
10997
+ const toggle = (0, import_react78.useCallback)(() => {
10999
10998
  setIsOpen((prev) => {
11000
10999
  if (!prev) {
11001
11000
  trackViewPromotion(trackingData);
@@ -11003,8 +11002,8 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
11003
11002
  return !prev;
11004
11003
  });
11005
11004
  }, [trackingData]);
11006
- (0, import_react79.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
11007
- return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
11005
+ (0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
11006
+ return /* @__PURE__ */ React133.createElement(React133.Fragment, null, promotion && /* @__PURE__ */ React133.createElement(
11008
11007
  import_editor_ui19.PromotionInfotip,
11009
11008
  {
11010
11009
  title: promotion.title,
@@ -11018,8 +11017,8 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
11018
11017
  },
11019
11018
  onCtaClick: () => trackUpgradePromotionClick(trackingData)
11020
11019
  },
11021
- /* @__PURE__ */ React132.createElement(
11022
- import_ui116.Box,
11020
+ /* @__PURE__ */ React133.createElement(
11021
+ import_ui117.Box,
11023
11022
  {
11024
11023
  onClick: (e) => {
11025
11024
  e.stopPropagation();
@@ -11027,7 +11026,7 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
11027
11026
  },
11028
11027
  sx: { cursor: "pointer", display: "inline-flex" }
11029
11028
  },
11030
- children ?? /* @__PURE__ */ React132.createElement(import_editor_ui19.PromotionChip, null)
11029
+ children ?? /* @__PURE__ */ React133.createElement(import_editor_ui19.PromotionChip, null)
11031
11030
  )
11032
11031
  ));
11033
11032
  }
@@ -11037,9 +11036,9 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
11037
11036
  var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
11038
11037
  var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
11039
11038
  var DisplayConditionsControl = createControl(() => {
11040
- const triggerRef = (0, import_react80.useRef)(null);
11041
- return /* @__PURE__ */ React133.createElement(
11042
- import_ui117.Stack,
11039
+ const triggerRef = (0, import_react79.useRef)(null);
11040
+ return /* @__PURE__ */ React134.createElement(
11041
+ import_ui118.Stack,
11043
11042
  {
11044
11043
  direction: "row",
11045
11044
  spacing: 2,
@@ -11048,9 +11047,9 @@ var DisplayConditionsControl = createControl(() => {
11048
11047
  alignItems: "center"
11049
11048
  }
11050
11049
  },
11051
- /* @__PURE__ */ React133.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
11052
- /* @__PURE__ */ React133.createElement(import_ui117.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
11053
- import_ui117.IconButton,
11050
+ /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
11051
+ /* @__PURE__ */ React134.createElement(import_ui118.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React134.createElement(
11052
+ import_ui118.IconButton,
11054
11053
  {
11055
11054
  size: "tiny",
11056
11055
  "aria-label": ARIA_LABEL,
@@ -11062,23 +11061,23 @@ var DisplayConditionsControl = createControl(() => {
11062
11061
  borderRadius: 1
11063
11062
  }
11064
11063
  },
11065
- /* @__PURE__ */ React133.createElement(import_icons43.SitemapIcon, { fontSize: "tiny", color: "disabled" })
11064
+ /* @__PURE__ */ React134.createElement(import_icons43.SitemapIcon, { fontSize: "tiny", color: "disabled" })
11066
11065
  ))
11067
11066
  );
11068
11067
  });
11069
11068
 
11070
11069
  // src/components/promotions/attributes-control.tsx
11071
- var React134 = __toESM(require("react"));
11072
- var import_react81 = require("react");
11070
+ var React135 = __toESM(require("react"));
11071
+ var import_react80 = require("react");
11073
11072
  var import_icons44 = require("@elementor/icons");
11074
- var import_ui118 = require("@elementor/ui");
11073
+ var import_ui119 = require("@elementor/ui");
11075
11074
  var import_i18n69 = require("@wordpress/i18n");
11076
11075
  var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
11077
11076
  var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
11078
11077
  var AttributesControl = createControl(() => {
11079
- const triggerRef = (0, import_react81.useRef)(null);
11080
- return /* @__PURE__ */ React134.createElement(
11081
- import_ui118.Stack,
11078
+ const triggerRef = (0, import_react80.useRef)(null);
11079
+ return /* @__PURE__ */ React135.createElement(
11080
+ import_ui119.Stack,
11082
11081
  {
11083
11082
  direction: "row",
11084
11083
  spacing: 2,
@@ -11087,8 +11086,8 @@ var AttributesControl = createControl(() => {
11087
11086
  alignItems: "center"
11088
11087
  }
11089
11088
  },
11090
- /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
11091
- /* @__PURE__ */ React134.createElement(import_ui118.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
11089
+ /* @__PURE__ */ React135.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
11090
+ /* @__PURE__ */ React135.createElement(import_ui119.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React135.createElement(
11092
11091
  import_icons44.PlusIcon,
11093
11092
  {
11094
11093
  "aria-label": ARIA_LABEL2,
@@ -11102,20 +11101,20 @@ var AttributesControl = createControl(() => {
11102
11101
  });
11103
11102
 
11104
11103
  // src/components/icon-buttons/clear-icon-button.tsx
11105
- var React135 = __toESM(require("react"));
11104
+ var React136 = __toESM(require("react"));
11106
11105
  var import_icons45 = require("@elementor/icons");
11107
- var import_ui119 = require("@elementor/ui");
11108
- var CustomIconButton = (0, import_ui119.styled)(import_ui119.IconButton)(({ theme }) => ({
11106
+ var import_ui120 = require("@elementor/ui");
11107
+ var CustomIconButton = (0, import_ui120.styled)(import_ui120.IconButton)(({ theme }) => ({
11109
11108
  width: theme.spacing(2.5),
11110
11109
  height: theme.spacing(2.5)
11111
11110
  }));
11112
- var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(import_ui119.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
11111
+ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React136.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React136.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
11113
11112
 
11114
11113
  // src/components/repeater/repeater.tsx
11115
- var React136 = __toESM(require("react"));
11116
- var import_react82 = require("react");
11114
+ var React137 = __toESM(require("react"));
11115
+ var import_react81 = require("react");
11117
11116
  var import_icons46 = require("@elementor/icons");
11118
- var import_ui120 = require("@elementor/ui");
11117
+ var import_ui121 = require("@elementor/ui");
11119
11118
  var import_i18n70 = require("@wordpress/i18n");
11120
11119
  var SIZE12 = "tiny";
11121
11120
  var EMPTY_OPEN_ITEM2 = -1;
@@ -11135,7 +11134,7 @@ var Repeater3 = ({
11135
11134
  isSortable = true,
11136
11135
  adornment = ControlAdornments
11137
11136
  }) => {
11138
- const [openItem, setOpenItem] = (0, import_react82.useState)(initialOpenItem);
11137
+ const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
11139
11138
  const uniqueKeys = items2.map(
11140
11139
  (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
11141
11140
  );
@@ -11198,8 +11197,8 @@ var Repeater3 = ({
11198
11197
  };
11199
11198
  const isButtonDisabled = disabled || disableAddItemButton;
11200
11199
  const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
11201
- const addButton = /* @__PURE__ */ React136.createElement(
11202
- import_ui120.IconButton,
11200
+ const addButton = /* @__PURE__ */ React137.createElement(
11201
+ import_ui121.IconButton,
11203
11202
  {
11204
11203
  size: SIZE12,
11205
11204
  sx: {
@@ -11209,30 +11208,30 @@ var Repeater3 = ({
11209
11208
  onClick: addRepeaterItem,
11210
11209
  "aria-label": (0, import_i18n70.__)("Add item", "elementor")
11211
11210
  },
11212
- /* @__PURE__ */ React136.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
11211
+ /* @__PURE__ */ React137.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
11213
11212
  );
11214
- return /* @__PURE__ */ React136.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React136.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React136.createElement(
11215
- import_ui120.Infotip,
11213
+ return /* @__PURE__ */ React137.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React137.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React137.createElement(
11214
+ import_ui121.Infotip,
11216
11215
  {
11217
11216
  placement: "right",
11218
11217
  content: addButtonInfotipContent,
11219
11218
  color: "secondary",
11220
11219
  slotProps: { popper: { sx: { width: 300 } } }
11221
11220
  },
11222
- /* @__PURE__ */ React136.createElement(import_ui120.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
11223
- ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React136.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
11221
+ /* @__PURE__ */ React137.createElement(import_ui121.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
11222
+ ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React137.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
11224
11223
  const index = uniqueKeys.indexOf(key);
11225
11224
  const value = items2[index];
11226
11225
  if (!value) {
11227
11226
  return null;
11228
11227
  }
11229
- return /* @__PURE__ */ React136.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React136.createElement(
11228
+ return /* @__PURE__ */ React137.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React137.createElement(
11230
11229
  RepeaterItem,
11231
11230
  {
11232
11231
  disabled,
11233
11232
  propDisabled: value?.disabled,
11234
- label: /* @__PURE__ */ React136.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Label, { value, index })),
11235
- startIcon: /* @__PURE__ */ React136.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Icon, { value })),
11233
+ label: /* @__PURE__ */ React137.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Label, { value, index })),
11234
+ startIcon: /* @__PURE__ */ React137.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Icon, { value })),
11236
11235
  removeItem: () => removeRepeaterItem(index),
11237
11236
  duplicateItem: () => duplicateRepeaterItem(index),
11238
11237
  toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -11246,7 +11245,7 @@ var Repeater3 = ({
11246
11245
  actions: itemSettings.actions,
11247
11246
  value
11248
11247
  },
11249
- (props) => /* @__PURE__ */ React136.createElement(
11248
+ (props) => /* @__PURE__ */ React137.createElement(
11250
11249
  itemSettings.Content,
11251
11250
  {
11252
11251
  ...props,
@@ -11286,12 +11285,12 @@ var RepeaterItem = ({
11286
11285
  },
11287
11286
  wrappedOnPopoverClose
11288
11287
  );
11289
- const triggerProps = (0, import_ui120.bindTrigger)(popoverState);
11288
+ const triggerProps = (0, import_ui121.bindTrigger)(popoverState);
11290
11289
  usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
11291
11290
  const duplicateLabel = (0, import_i18n70.__)("Duplicate", "elementor");
11292
11291
  const toggleLabel = propDisabled ? (0, import_i18n70.__)("Show", "elementor") : (0, import_i18n70.__)("Hide", "elementor");
11293
11292
  const removeLabel = (0, import_i18n70.__)("Remove", "elementor");
11294
- return /* @__PURE__ */ React136.createElement(import_ui120.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
11293
+ return /* @__PURE__ */ React137.createElement(import_ui121.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React137.createElement(
11295
11294
  RepeaterTag,
11296
11295
  {
11297
11296
  disabled,
@@ -11306,15 +11305,15 @@ var RepeaterItem = ({
11306
11305
  }
11307
11306
  },
11308
11307
  startIcon,
11309
- actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
11308
+ actions: /* @__PURE__ */ React137.createElement(React137.Fragment, null, showDuplicate && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React137.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React137.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React137.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React137.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
11310
11309
  }
11311
- ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui120.Box, null, children({ anchorEl: ref }))));
11310
+ ), /* @__PURE__ */ React137.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React137.createElement(import_ui121.Box, null, children({ anchorEl: ref }))));
11312
11311
  };
11313
11312
  var usePopover = (openOnMount, onOpen, onPopoverClose) => {
11314
- const [ref, setRef] = (0, import_react82.useState)(null);
11315
- const popoverState = (0, import_ui120.usePopupState)({ variant: "popover" });
11316
- const popoverProps = (0, import_ui120.bindPopover)(popoverState);
11317
- (0, import_react82.useEffect)(() => {
11313
+ const [ref, setRef] = (0, import_react81.useState)(null);
11314
+ const popoverState = (0, import_ui121.usePopupState)({ variant: "popover" });
11315
+ const popoverProps = (0, import_ui121.bindPopover)(popoverState);
11316
+ (0, import_react81.useEffect)(() => {
11318
11317
  if (openOnMount && ref) {
11319
11318
  popoverState.open(ref);
11320
11319
  onOpen?.();
@@ -11333,8 +11332,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
11333
11332
  };
11334
11333
 
11335
11334
  // src/components/size/unstable-size-field.tsx
11336
- var React139 = __toESM(require("react"));
11337
- var import_ui122 = require("@elementor/ui");
11335
+ var React140 = __toESM(require("react"));
11336
+ var import_ui123 = require("@elementor/ui");
11338
11337
 
11339
11338
  // src/hooks/use-size-value.ts
11340
11339
  var DEFAULT_UNIT2 = "px";
@@ -11376,25 +11375,25 @@ var differsFromExternal = (newState, externalState) => {
11376
11375
  };
11377
11376
 
11378
11377
  // src/components/size/unit-select.tsx
11379
- var React137 = __toESM(require("react"));
11380
- var import_react83 = require("react");
11378
+ var React138 = __toESM(require("react"));
11379
+ var import_react82 = require("react");
11381
11380
  var import_editor_ui20 = require("@elementor/editor-ui");
11382
- var import_ui121 = require("@elementor/ui");
11381
+ var import_ui122 = require("@elementor/ui");
11383
11382
  var menuItemContentStyles2 = {
11384
11383
  display: "flex",
11385
11384
  flexDirection: "column",
11386
11385
  justifyContent: "center"
11387
11386
  };
11388
11387
  var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
11389
- const popupState = (0, import_ui121.usePopupState)({
11388
+ const popupState = (0, import_ui122.usePopupState)({
11390
11389
  variant: "popover",
11391
- popupId: (0, import_react83.useId)()
11390
+ popupId: (0, import_react82.useId)()
11392
11391
  });
11393
11392
  const handleMenuItemClick = (index) => {
11394
11393
  onClick(options[index]);
11395
11394
  popupState.close();
11396
11395
  };
11397
- return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui121.bindTrigger)(popupState) }, value), /* @__PURE__ */ React137.createElement(import_ui121.Menu, { MenuListProps: { dense: true }, ...(0, import_ui121.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
11396
+ return /* @__PURE__ */ React138.createElement(React138.Fragment, null, /* @__PURE__ */ React138.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui122.bindTrigger)(popupState) }, value), /* @__PURE__ */ React138.createElement(import_ui122.Menu, { MenuListProps: { dense: true }, ...(0, import_ui122.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React138.createElement(
11398
11397
  import_editor_ui20.MenuListItem,
11399
11398
  {
11400
11399
  key: option,
@@ -11413,7 +11412,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
11413
11412
  option.toUpperCase()
11414
11413
  ))));
11415
11414
  };
11416
- var StyledButton3 = (0, import_ui121.styled)(import_ui121.Button, {
11415
+ var StyledButton3 = (0, import_ui122.styled)(import_ui122.Button, {
11417
11416
  shouldForwardProp: (prop) => prop !== "isPrimaryColor"
11418
11417
  })(({ isPrimaryColor, theme }) => ({
11419
11418
  color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -11423,11 +11422,11 @@ var StyledButton3 = (0, import_ui121.styled)(import_ui121.Button, {
11423
11422
  }));
11424
11423
 
11425
11424
  // src/components/size/unstable-size-input.tsx
11426
- var React138 = __toESM(require("react"));
11427
- var import_react84 = require("react");
11428
- var UnstableSizeInput = (0, import_react84.forwardRef)(
11425
+ var React139 = __toESM(require("react"));
11426
+ var import_react83 = require("react");
11427
+ var UnstableSizeInput = (0, import_react83.forwardRef)(
11429
11428
  ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
11430
- return /* @__PURE__ */ React138.createElement(
11429
+ return /* @__PURE__ */ React139.createElement(
11431
11430
  NumberInput,
11432
11431
  {
11433
11432
  ref,
@@ -11465,7 +11464,7 @@ var UnstableSizeField = ({
11465
11464
  const shouldHighlightUnit2 = () => {
11466
11465
  return hasValue(size);
11467
11466
  };
11468
- return /* @__PURE__ */ React139.createElement(
11467
+ return /* @__PURE__ */ React140.createElement(
11469
11468
  UnstableSizeInput,
11470
11469
  {
11471
11470
  type: "number",
@@ -11474,8 +11473,8 @@ var UnstableSizeField = ({
11474
11473
  onChange: (event) => setSize(event.target.value),
11475
11474
  InputProps: {
11476
11475
  ...InputProps,
11477
- startAdornment: startIcon && /* @__PURE__ */ React139.createElement(import_ui122.InputAdornment, { position: "start" }, startIcon),
11478
- endAdornment: /* @__PURE__ */ React139.createElement(import_ui122.InputAdornment, { position: "end" }, /* @__PURE__ */ React139.createElement(
11476
+ startAdornment: startIcon && /* @__PURE__ */ React140.createElement(import_ui123.InputAdornment, { position: "start" }, startIcon),
11477
+ endAdornment: /* @__PURE__ */ React140.createElement(import_ui123.InputAdornment, { position: "end" }, /* @__PURE__ */ React140.createElement(
11479
11478
  UnitSelect,
11480
11479
  {
11481
11480
  options: units2,
@@ -11493,7 +11492,7 @@ var hasValue = (value) => {
11493
11492
  };
11494
11493
 
11495
11494
  // src/hooks/use-font-families.ts
11496
- var import_react85 = require("react");
11495
+ var import_react84 = require("react");
11497
11496
  var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
11498
11497
  var getFontControlConfig = () => {
11499
11498
  const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
@@ -11501,7 +11500,7 @@ var getFontControlConfig = () => {
11501
11500
  };
11502
11501
  var useFontFamilies = () => {
11503
11502
  const { groups, options } = getFontControlConfig();
11504
- return (0, import_react85.useMemo)(() => {
11503
+ return (0, import_react84.useMemo)(() => {
11505
11504
  if (!groups || !options) {
11506
11505
  return [];
11507
11506
  }