@elementor/editor-controls 0.6.0 → 0.7.0

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/index.js +287 -112
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +281 -106
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +5 -5
  7. package/src/components/repeater.tsx +2 -1
  8. package/src/controls/autocomplete-control.tsx +19 -24
  9. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx +38 -0
  10. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx +31 -0
  11. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx +50 -0
  12. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx +27 -0
  13. package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx +44 -0
  14. package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +88 -26
  15. package/src/controls/box-shadow-repeater-control.tsx +3 -2
  16. package/src/controls/equal-unequal-sizes-control.tsx +4 -2
  17. package/src/controls/gap-control.tsx +33 -31
  18. package/src/controls/image-media-control.tsx +23 -15
  19. package/src/controls/link-control.tsx +2 -2
  20. package/src/controls/linked-dimensions-control.tsx +48 -36
  21. package/src/controls/select-control.tsx +5 -3
package/dist/index.js CHANGED
@@ -314,13 +314,14 @@ function ControlActions({ children }) {
314
314
  }
315
315
 
316
316
  // src/controls/image-media-control.tsx
317
- var ImageMediaControl = createControl(() => {
317
+ var ImageMediaControl = createControl((props) => {
318
318
  const { value, setValue } = useBoundProp(import_editor_props.imageSrcPropTypeUtil);
319
319
  const { id, url } = value ?? {};
320
320
  const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
321
321
  const src = attachment?.url ?? url?.value ?? null;
322
322
  const { open } = (0, import_wp_media.useWpMediaFrame)({
323
- types: ["image"],
323
+ types: ["image", "image/svg+xml"],
324
+ allowedExtensions: props.allowedExtensions,
324
325
  multiple: false,
325
326
  selected: id?.value || null,
326
327
  onSelect: (selectedAttachment) => {
@@ -333,7 +334,7 @@ var ImageMediaControl = createControl(() => {
333
334
  });
334
335
  }
335
336
  });
336
- return /* @__PURE__ */ React8.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(import_ui4.CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(import_ui4.CircularProgress, null)) : null), /* @__PURE__ */ React8.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
337
+ return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(import_ui4.CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(import_ui4.CircularProgress, null)) : /* @__PURE__ */ React8.createElement(React8.Fragment, null)), /* @__PURE__ */ React8.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React8.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
337
338
  import_ui4.Button,
338
339
  {
339
340
  size: "tiny",
@@ -362,10 +363,11 @@ var import_ui5 = require("@elementor/ui");
362
363
  var SelectControl = createControl(({ options, onChange }) => {
363
364
  const { value, setValue } = useBoundProp(import_editor_props2.stringPropTypeUtil);
364
365
  const handleChange = (event) => {
365
- onChange?.(event.target.value, value);
366
- setValue(event.target.value);
366
+ const newValue = event.target.value || null;
367
+ onChange?.(newValue, value);
368
+ setValue(newValue);
367
369
  };
368
- return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_ui5.MenuItem, { key: props.value, ...props }, label))));
370
+ return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_ui5.MenuItem, { key: props.value, ...props, value: props.value ?? "" }, label))));
369
371
  });
370
372
 
371
373
  // src/controls/image-control.tsx
@@ -376,7 +378,6 @@ var ImageControl = createControl((props) => {
376
378
 
377
379
  // src/controls/autocomplete-control.tsx
378
380
  var React11 = __toESM(require("react"));
379
- var import_react5 = require("react");
380
381
  var import_editor_props4 = require("@elementor/editor-props");
381
382
  var import_icons2 = require("@elementor/icons");
382
383
  var import_ui7 = require("@elementor/ui");
@@ -389,21 +390,16 @@ var AutocompleteControl = createControl(
389
390
  minInputLength = 2
390
391
  }) => {
391
392
  const { value = "", setValue } = useBoundProp(propType);
392
- const [inputValue, setInputValue] = (0, import_react5.useState)(
393
- value && options[value]?.label ? options[value]?.label : value
394
- );
395
- const hasSelectedValue = !!(inputValue && (options[inputValue] || Object.values(options).find(({ label }) => label === inputValue)));
396
- const allowClear = !!inputValue;
393
+ const hasSelectedValue = !!(value && (options[value] || Object.values(options).find(({ label }) => label === value)));
394
+ const allowClear = !!value;
397
395
  const formattedOptions = Object.keys(options);
398
- const handleChange = (_, newValue = null) => {
399
- const formattedInputValue = newValue && options[newValue]?.label ? options[newValue]?.label : newValue;
400
- setInputValue(formattedInputValue || "");
401
- if (!allowCustomValues && newValue && !options[newValue]) {
402
- return;
403
- }
396
+ const onOptionSelect = (_, newValue) => {
404
397
  setValue(newValue);
405
398
  };
406
- const filterOptions = () => {
399
+ const handleChange = (newValue) => {
400
+ setValue(newValue);
401
+ };
402
+ const filterOptions = (_, { inputValue }) => {
407
403
  const formattedValue = inputValue?.toLowerCase() || "";
408
404
  if (formattedValue.length < minInputLength) {
409
405
  return [];
@@ -415,18 +411,16 @@ var AutocompleteControl = createControl(
415
411
  const isOptionEqualToValue = () => {
416
412
  return muiWarningPreventer() ? void 0 : () => true;
417
413
  };
418
- const muiWarningPreventer = () => allowCustomValues || !!filterOptions().length;
414
+ const muiWarningPreventer = () => allowCustomValues || !!filterOptions([], { inputValue: value }).length;
419
415
  return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
420
416
  import_ui7.Autocomplete,
421
417
  {
422
418
  forcePopupIcon: false,
423
419
  disableClearable: true,
424
420
  freeSolo: muiWarningPreventer(),
425
- value: inputValue || "",
421
+ value: value || "",
426
422
  size: "tiny",
427
- onChange: handleChange,
428
- onInputChange: handleChange,
429
- onBlur: allowCustomValues ? void 0 : () => handleChange(null, value),
423
+ onChange: onOptionSelect,
430
424
  readOnly: hasSelectedValue,
431
425
  options: formattedOptions,
432
426
  getOptionKey: (option) => option,
@@ -456,11 +450,15 @@ var TextInput = ({
456
450
  handleChange,
457
451
  hasSelectedValue
458
452
  }) => {
453
+ const onChange = (event) => {
454
+ handleChange(event.target.value);
455
+ };
459
456
  return /* @__PURE__ */ React11.createElement(
460
457
  import_ui7.TextField,
461
458
  {
462
459
  ...params,
463
460
  placeholder,
461
+ onChange,
464
462
  sx: {
465
463
  "& .MuiInputBase-input": {
466
464
  cursor: hasSelectedValue ? "default" : void 0
@@ -477,7 +475,7 @@ var ClearButton = ({
477
475
  allowClear,
478
476
  handleChange,
479
477
  params
480
- }) => /* @__PURE__ */ React11.createElement(import_ui7.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: params.size, onClick: handleChange, sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(import_icons2.XIcon, { fontSize: params.size })));
478
+ }) => /* @__PURE__ */ React11.createElement(import_ui7.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(import_icons2.XIcon, { fontSize: params.size })));
481
479
  function shouldGroupOptions(options) {
482
480
  return Object.values(options).every((option) => "groupLabel" in option);
483
481
  }
@@ -531,9 +529,9 @@ var import_ui11 = require("@elementor/ui");
531
529
 
532
530
  // src/components/text-field-inner-selection.tsx
533
531
  var React14 = __toESM(require("react"));
534
- var import_react6 = require("react");
532
+ var import_react5 = require("react");
535
533
  var import_ui10 = require("@elementor/ui");
536
- var TextFieldInnerSelection = (0, import_react6.forwardRef)(
534
+ var TextFieldInnerSelection = (0, import_react5.forwardRef)(
537
535
  ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
538
536
  return /* @__PURE__ */ React14.createElement(
539
537
  import_ui10.TextField,
@@ -560,7 +558,7 @@ var SelectionEndAdornment = ({
560
558
  }) => {
561
559
  const popupState = (0, import_ui10.usePopupState)({
562
560
  variant: "popover",
563
- popupId: (0, import_react6.useId)()
561
+ popupId: (0, import_react5.useId)()
564
562
  });
565
563
  const handleMenuItemClick = (index) => {
566
564
  onClick(options[index]);
@@ -579,7 +577,7 @@ var SelectionEndAdornment = ({
579
577
  };
580
578
 
581
579
  // src/hooks/use-sync-external-state.tsx
582
- var import_react7 = require("react");
580
+ var import_react6 = require("react");
583
581
  var useSyncExternalState = ({
584
582
  external,
585
583
  setExternal,
@@ -598,8 +596,8 @@ var useSyncExternalState = ({
598
596
  }
599
597
  return externalValue;
600
598
  }
601
- const [internal, setInternal] = (0, import_react7.useState)(toInternal(external, null));
602
- (0, import_react7.useEffect)(() => {
599
+ const [internal, setInternal] = (0, import_react6.useState)(toInternal(external, null));
600
+ (0, import_react6.useEffect)(() => {
603
601
  setInternal((prevInternal) => toInternal(external, prevInternal));
604
602
  }, [external]);
605
603
  const setInternalValue = (setter) => {
@@ -690,7 +688,7 @@ var import_i18n5 = require("@wordpress/i18n");
690
688
 
691
689
  // src/components/repeater.tsx
692
690
  var React18 = __toESM(require("react"));
693
- var import_react8 = require("react");
691
+ var import_react7 = require("react");
694
692
  var import_icons3 = require("@elementor/icons");
695
693
  var import_ui14 = require("@elementor/ui");
696
694
  var import_i18n4 = require("@wordpress/i18n");
@@ -738,7 +736,7 @@ var Repeater = ({
738
736
  duplicateItem: () => duplicateRepeaterItem(index),
739
737
  toggleDisableItem: () => toggleDisableRepeaterItem(index)
740
738
  },
741
- (props) => /* @__PURE__ */ React18.createElement(itemSettings.Content, { ...props, bind: String(index) })
739
+ (props) => /* @__PURE__ */ React18.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
742
740
  ))));
743
741
  };
744
742
  var RepeaterItem = ({
@@ -752,8 +750,8 @@ var RepeaterItem = ({
752
750
  toggleDisableItem
753
751
  }) => {
754
752
  const popupId = `repeater-popup-${bind}`;
755
- const controlRef = (0, import_react8.useRef)(null);
756
- const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
753
+ const controlRef = (0, import_react7.useRef)(null);
754
+ const [anchorEl, setAnchorEl] = (0, import_react7.useState)(null);
757
755
  const popoverState = (0, import_ui14.usePopupState)({ popupId, variant: "popover" });
758
756
  const popoverProps = (0, import_ui14.bindPopover)(popoverState);
759
757
  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
@@ -855,7 +853,7 @@ var Content = ({ anchorEl }) => {
855
853
  {
856
854
  options: [
857
855
  { label: (0, import_i18n5.__)("Inset", "elementor"), value: "inset" },
858
- { label: (0, import_i18n5.__)("Outset", "elementor"), value: "" }
856
+ { label: (0, import_i18n5.__)("Outset", "elementor"), value: null }
859
857
  ]
860
858
  }
861
859
  ))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)))));
@@ -867,13 +865,14 @@ var ItemLabel = ({ value }) => {
867
865
  const { size: spreadSize = "", unit: spreadUnit = "" } = spread?.value || {};
868
866
  const { size: hOffsetSize = "unset", unit: hOffsetUnit = "" } = hOffset?.value || {};
869
867
  const { size: vOffsetSize = "unset", unit: vOffsetUnit = "" } = vOffset?.value || {};
868
+ const positionLabel = position?.value || "outset";
870
869
  const sizes = [
871
870
  hOffsetSize + hOffsetUnit,
872
871
  vOffsetSize + vOffsetUnit,
873
872
  blurSize + blurUnit,
874
873
  spreadSize + spreadUnit
875
874
  ].join(" ");
876
- return /* @__PURE__ */ React19.createElement("span", { style: { textTransform: "capitalize" } }, position ?? "outset", ": ", sizes);
875
+ return /* @__PURE__ */ React19.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
877
876
  };
878
877
  var initialShadow = {
879
878
  $$type: "shadow",
@@ -1013,7 +1012,7 @@ var NumberControl = createControl(
1013
1012
 
1014
1013
  // src/controls/equal-unequal-sizes-control.tsx
1015
1014
  var React23 = __toESM(require("react"));
1016
- var import_react9 = require("react");
1015
+ var import_react8 = require("react");
1017
1016
  var import_editor_props13 = require("@elementor/editor-props");
1018
1017
  var import_ui18 = require("@elementor/ui");
1019
1018
  var import_i18n6 = require("@wordpress/i18n");
@@ -1033,8 +1032,8 @@ function EqualUnequalSizesControl({
1033
1032
  items,
1034
1033
  multiSizePropTypeUtil
1035
1034
  }) {
1036
- const popupId = (0, import_react9.useId)();
1037
- const controlRef = (0, import_react9.useRef)(null);
1035
+ const popupId = (0, import_react8.useId)();
1036
+ const controlRef = (0, import_react8.useRef)(null);
1038
1037
  const popupState = (0, import_ui18.usePopupState)({ variant: "popover", popupId });
1039
1038
  const {
1040
1039
  propType: multiSizePropType,
@@ -1058,7 +1057,7 @@ function EqualUnequalSizesControl({
1058
1057
  };
1059
1058
  const isEqual = isEqualSizes(newMappedValues, items);
1060
1059
  if (isEqual) {
1061
- return setSizeValue(Object.values(newMappedValues)[0].value);
1060
+ return setSizeValue(Object.values(newMappedValues)[0]?.value);
1062
1061
  }
1063
1062
  setMultiSizeValue(newMappedValues);
1064
1063
  };
@@ -1068,7 +1067,8 @@ function EqualUnequalSizesControl({
1068
1067
  }
1069
1068
  return splitEqualValue() ?? null;
1070
1069
  };
1071
- return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: (0, import_i18n6.__)("MIXED", "elementor") }), /* @__PURE__ */ React23.createElement(
1070
+ const isMixed = !!multiSizeValue;
1071
+ return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React23.createElement(
1072
1072
  import_ui18.ToggleButton,
1073
1073
  {
1074
1074
  size: "tiny",
@@ -1108,33 +1108,24 @@ var import_icons4 = require("@elementor/icons");
1108
1108
  var import_ui19 = require("@elementor/ui");
1109
1109
  var import_i18n7 = require("@wordpress/i18n");
1110
1110
  var LinkedDimensionsControl = createControl(({ label }) => {
1111
- const { value, setValue, propType } = useBoundProp(import_editor_props14.linkedDimensionsPropTypeUtil);
1112
- const { top, right, bottom, left, isLinked = true } = value || {};
1113
- const setLinkedValue = (newValue, _, meta) => {
1111
+ const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(import_editor_props14.dimensionsPropTypeUtil);
1112
+ const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props14.sizePropTypeUtil);
1113
+ const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
1114
+ const onLinkToggle = () => {
1114
1115
  if (!isLinked) {
1115
- return setValue(newValue);
1116
+ setSizeValue(dimensionsValue?.top?.value);
1117
+ return;
1116
1118
  }
1117
- const newDimension = newValue[meta?.bind];
1118
- setValue({
1119
- isLinked,
1120
- top: newDimension,
1121
- right: newDimension,
1122
- bottom: newDimension,
1123
- left: newDimension
1119
+ const value = sizeValue ? import_editor_props14.sizePropTypeUtil.create(sizeValue) : null;
1120
+ setDimensionsValue({
1121
+ top: value,
1122
+ right: value,
1123
+ bottom: value,
1124
+ left: value
1124
1125
  });
1125
1126
  };
1126
- const toggleLinked = () => {
1127
- const updatedValue = {
1128
- isLinked: !isLinked,
1129
- top,
1130
- right: !isLinked ? top : right,
1131
- bottom: !isLinked ? top : bottom,
1132
- left: !isLinked ? top : left
1133
- };
1134
- setValue(updatedValue);
1135
- };
1136
1127
  const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
1137
- return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
1128
+ return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
1138
1129
  import_ui19.ToggleButton,
1139
1130
  {
1140
1131
  "aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
@@ -1142,15 +1133,48 @@ var LinkedDimensionsControl = createControl(({ label }) => {
1142
1133
  value: "check",
1143
1134
  selected: isLinked,
1144
1135
  sx: { marginLeft: "auto" },
1145
- onChange: toggleLinked
1136
+ onChange: onLinkToggle
1146
1137
  },
1147
1138
  /* @__PURE__ */ React24.createElement(LinkedIcon, { fontSize: "tiny" })
1148
- )), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "top", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "right", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) })))), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "bottom", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(Control3, { bind: "left", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) })))));
1139
+ )), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
1140
+ Control3,
1141
+ {
1142
+ bind: "top",
1143
+ startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
1144
+ isLinked
1145
+ }
1146
+ ))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
1147
+ Control3,
1148
+ {
1149
+ bind: "right",
1150
+ startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
1151
+ isLinked
1152
+ }
1153
+ )))), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
1154
+ Control3,
1155
+ {
1156
+ bind: "bottom",
1157
+ startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
1158
+ isLinked
1159
+ }
1160
+ ))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
1161
+ Control3,
1162
+ {
1163
+ bind: "left",
1164
+ startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
1165
+ isLinked
1166
+ }
1167
+ )))));
1149
1168
  });
1150
- var Control3 = ({ bind, startIcon }) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
1169
+ var Control3 = ({ bind, startIcon, isLinked }) => {
1170
+ if (isLinked) {
1171
+ return /* @__PURE__ */ React24.createElement(SizeControl, { startIcon });
1172
+ }
1173
+ return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
1174
+ };
1151
1175
 
1152
1176
  // src/controls/font-family-control.tsx
1153
- var import_react10 = require("react");
1177
+ var import_react9 = require("react");
1154
1178
  var React25 = __toESM(require("react"));
1155
1179
  var import_editor_props15 = require("@elementor/editor-props");
1156
1180
  var import_icons5 = require("@elementor/icons");
@@ -1190,9 +1214,9 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
1190
1214
  // src/controls/font-family-control.tsx
1191
1215
  var SIZE2 = "tiny";
1192
1216
  var FontFamilyControl = createControl(({ fontFamilies }) => {
1193
- const [searchValue, setSearchValue] = (0, import_react10.useState)("");
1217
+ const [searchValue, setSearchValue] = (0, import_react9.useState)("");
1194
1218
  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props15.stringPropTypeUtil);
1195
- const popupId = (0, import_react10.useId)();
1219
+ const popupId = (0, import_react9.useId)();
1196
1220
  const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
1197
1221
  const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
1198
1222
  if (!filteredFontFamilies) {
@@ -1235,7 +1259,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
1235
1259
  startAdornment: /* @__PURE__ */ React25.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React25.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
1236
1260
  }
1237
1261
  }
1238
- )), /* @__PURE__ */ React25.createElement(import_ui20.Divider, null), /* @__PURE__ */ React25.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(import_react10.Fragment, { key: index }, /* @__PURE__ */ React25.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
1262
+ )), /* @__PURE__ */ React25.createElement(import_ui20.Divider, null), /* @__PURE__ */ React25.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(import_react9.Fragment, { key: index }, /* @__PURE__ */ React25.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
1239
1263
  const isSelected = item === fontFamily;
1240
1264
  return /* @__PURE__ */ React25.createElement(
1241
1265
  import_ui20.MenuItem,
@@ -1329,7 +1353,7 @@ var LinkControl = createControl((props) => {
1329
1353
  {
1330
1354
  allowCustomValues: Object.keys(options).length ? allowCustomValues : true,
1331
1355
  options,
1332
- propType: import_editor_props17.stringPropTypeUtil,
1356
+ propType: import_editor_props17.urlPropTypeUtil,
1333
1357
  placeholder
1334
1358
  }
1335
1359
  )), /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React27.createElement(SwitchControl, null))))));
@@ -1352,29 +1376,26 @@ var import_icons7 = require("@elementor/icons");
1352
1376
  var import_ui23 = require("@elementor/ui");
1353
1377
  var import_i18n11 = require("@wordpress/i18n");
1354
1378
  var GapControl = createControl(({ label }) => {
1355
- const { propType, value, setValue } = useBoundProp(import_editor_props18.gapPropTypeUtil);
1356
- const { column, row, isLinked = true } = value || {};
1357
- const setLinkedValue = (newValue, _, meta) => {
1379
+ const {
1380
+ value: directionValue,
1381
+ setValue: setDirectionValue,
1382
+ propType
1383
+ } = useBoundProp(import_editor_props18.layoutDirectionPropTypeUtil);
1384
+ const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props18.sizePropTypeUtil);
1385
+ const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
1386
+ const onLinkToggle = () => {
1358
1387
  if (!isLinked) {
1359
- return setValue(newValue);
1388
+ setSizeValue(directionValue?.column.value);
1389
+ return;
1360
1390
  }
1361
- const newDimension = newValue[meta?.bind];
1362
- setValue({
1363
- isLinked,
1364
- column: newDimension,
1365
- row: newDimension
1391
+ const value = sizeValue ? import_editor_props18.sizePropTypeUtil.create(sizeValue) : null;
1392
+ setDirectionValue({
1393
+ row: value,
1394
+ column: value
1366
1395
  });
1367
1396
  };
1368
- const toggleLinked = () => {
1369
- const updatedValue = {
1370
- isLinked: !isLinked,
1371
- column,
1372
- row: !isLinked ? column : row
1373
- };
1374
- setValue(updatedValue);
1375
- };
1376
1397
  const LinkedIcon = isLinked ? import_icons7.LinkIcon : import_icons7.DetachIcon;
1377
- return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
1398
+ return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
1378
1399
  import_ui23.ToggleButton,
1379
1400
  {
1380
1401
  "aria-label": (0, import_i18n11.__)("Link Inputs", "elementor"),
@@ -1382,36 +1403,176 @@ var GapControl = createControl(({ label }) => {
1382
1403
  value: "check",
1383
1404
  selected: isLinked,
1384
1405
  sx: { marginLeft: "auto" },
1385
- onChange: toggleLinked
1406
+ onChange: onLinkToggle
1386
1407
  },
1387
1408
  /* @__PURE__ */ React28.createElement(LinkedIcon, { fontSize: "tiny" })
1388
- )), /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "column" }, /* @__PURE__ */ React28.createElement(SizeControl, null)))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "row" }, /* @__PURE__ */ React28.createElement(SizeControl, null))))));
1409
+ )), /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(Control4, { bind: "row", isLinked })))));
1389
1410
  });
1411
+ var Control4 = ({ bind, isLinked }) => {
1412
+ if (isLinked) {
1413
+ return /* @__PURE__ */ React28.createElement(SizeControl, null);
1414
+ }
1415
+ return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(SizeControl, null));
1416
+ };
1390
1417
 
1391
1418
  // src/controls/background-control/background-control.tsx
1392
- var React30 = __toESM(require("react"));
1419
+ var React35 = __toESM(require("react"));
1393
1420
  var import_editor_props20 = require("@elementor/editor-props");
1394
- var import_ui25 = require("@elementor/ui");
1395
- var import_i18n13 = require("@wordpress/i18n");
1421
+ var import_ui30 = require("@elementor/ui");
1422
+ var import_i18n18 = require("@wordpress/i18n");
1396
1423
 
1397
1424
  // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
1398
- var React29 = __toESM(require("react"));
1425
+ var React34 = __toESM(require("react"));
1399
1426
  var import_editor_props19 = require("@elementor/editor-props");
1400
- var import_ui24 = require("@elementor/ui");
1427
+ var import_ui29 = require("@elementor/ui");
1401
1428
  var import_wp_media2 = require("@elementor/wp-media");
1429
+ var import_i18n17 = require("@wordpress/i18n");
1430
+
1431
+ // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
1432
+ var React29 = __toESM(require("react"));
1433
+ var import_icons8 = require("@elementor/icons");
1434
+ var import_ui24 = require("@elementor/ui");
1402
1435
  var import_i18n12 = require("@wordpress/i18n");
1436
+ var attachmentControlOptions = [
1437
+ {
1438
+ value: "fixed",
1439
+ label: (0, import_i18n12.__)("Fixed", "elementor"),
1440
+ renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(import_icons8.PinIcon, { fontSize: size }),
1441
+ showTooltip: true
1442
+ },
1443
+ {
1444
+ value: "scroll",
1445
+ label: (0, import_i18n12.__)("Scroll", "elementor"),
1446
+ renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(import_icons8.PinnedOffIcon, { fontSize: size }),
1447
+ showTooltip: true
1448
+ }
1449
+ ];
1450
+ var BackgroundImageOverlayAttachment = () => {
1451
+ return /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, gap: 8, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 2 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, (0, import_i18n12.__)("Attachment", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, justifyContent: "flex-end", xs: 8, sx: { display: "flex" } }, /* @__PURE__ */ React29.createElement(ToggleControl, { options: attachmentControlOptions })));
1452
+ };
1453
+
1454
+ // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
1455
+ var React30 = __toESM(require("react"));
1456
+ var import_ui25 = require("@elementor/ui");
1457
+ var import_i18n13 = require("@wordpress/i18n");
1458
+ var backgroundPositionOptions = [
1459
+ { label: (0, import_i18n13.__)("Center Center", "elementor"), value: "center center" },
1460
+ { label: (0, import_i18n13.__)("Center Left", "elementor"), value: "center left" },
1461
+ { label: (0, import_i18n13.__)("Center Right", "elementor"), value: "center right" },
1462
+ { label: (0, import_i18n13.__)("Top Center", "elementor"), value: "top center" },
1463
+ { label: (0, import_i18n13.__)("Top Left", "elementor"), value: "top left" },
1464
+ { label: (0, import_i18n13.__)("Top Right", "elementor"), value: "top right" },
1465
+ { label: (0, import_i18n13.__)("Bottom Center", "elementor"), value: "bottom center" },
1466
+ { label: (0, import_i18n13.__)("Bottom Left", "elementor"), value: "bottom left" },
1467
+ { label: (0, import_i18n13.__)("Bottom Right", "elementor"), value: "bottom right" }
1468
+ ];
1469
+ var BackgroundImageOverlayPosition = () => {
1470
+ return /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n13.__)("Position", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SelectControl, { options: backgroundPositionOptions })));
1471
+ };
1472
+
1473
+ // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
1474
+ var React31 = __toESM(require("react"));
1475
+ var import_icons9 = require("@elementor/icons");
1476
+ var import_ui26 = require("@elementor/ui");
1477
+ var import_i18n14 = require("@wordpress/i18n");
1478
+ var repeatControlOptions = [
1479
+ {
1480
+ value: "repeat",
1481
+ label: (0, import_i18n14.__)("Repeat", "elementor"),
1482
+ renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.GridDotsIcon, { fontSize: size }),
1483
+ showTooltip: true
1484
+ },
1485
+ {
1486
+ value: "repeat-x",
1487
+ label: (0, import_i18n14.__)("Repeat-x", "elementor"),
1488
+ renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.DotsHorizontalIcon, { fontSize: size }),
1489
+ showTooltip: true
1490
+ },
1491
+ {
1492
+ value: "repeat-y",
1493
+ label: (0, import_i18n14.__)("Repeat-y", "elementor"),
1494
+ renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.DotsVerticalIcon, { fontSize: size }),
1495
+ showTooltip: true
1496
+ },
1497
+ {
1498
+ value: "no-repeat",
1499
+ label: (0, import_i18n14.__)("No-Repeat", "elementor"),
1500
+ renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.XIcon, { fontSize: size }),
1501
+ showTooltip: true
1502
+ }
1503
+ ];
1504
+ var BackgroundImageOverlayRepeat = () => {
1505
+ return /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n14.__)("Repeat", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ToggleControl, { options: repeatControlOptions })));
1506
+ };
1507
+
1508
+ // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx
1509
+ var React32 = __toESM(require("react"));
1510
+ var import_ui27 = require("@elementor/ui");
1511
+ var import_i18n15 = require("@wordpress/i18n");
1512
+ var backgroundResolutionOptions = [
1513
+ { label: (0, import_i18n15.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
1514
+ { label: (0, import_i18n15.__)("Medium - 300 x 300", "elementor"), value: "medium" },
1515
+ { label: (0, import_i18n15.__)("Medium Large - 768 x 768"), value: "medium_large" },
1516
+ { label: (0, import_i18n15.__)("Large 1024 x 1024", "elementor"), value: "large" },
1517
+ { label: (0, import_i18n15.__)("Full", "elementor"), value: "full" }
1518
+ ];
1519
+ var BackgroundImageOverlayResolution = () => {
1520
+ return /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n15.__)("Resolution", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(SelectControl, { options: backgroundResolutionOptions })));
1521
+ };
1522
+
1523
+ // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
1524
+ var React33 = __toESM(require("react"));
1525
+ var import_icons10 = require("@elementor/icons");
1526
+ var import_ui28 = require("@elementor/ui");
1527
+ var import_i18n16 = require("@wordpress/i18n");
1528
+ var sizeControlOptions = [
1529
+ {
1530
+ value: "auto",
1531
+ label: (0, import_i18n16.__)("Auto", "elementor"),
1532
+ renderContent: () => "Auto",
1533
+ showTooltip: true
1534
+ },
1535
+ {
1536
+ value: "cover",
1537
+ label: (0, import_i18n16.__)("Cover", "elementor"),
1538
+ renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowsMaximizeIcon, { fontSize: size }),
1539
+ showTooltip: true
1540
+ },
1541
+ {
1542
+ value: "contain",
1543
+ label: (0, import_i18n16.__)("Contain", "elementor"),
1544
+ renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowBarBothIcon, { fontSize: size }),
1545
+ showTooltip: true
1546
+ }
1547
+ ];
1548
+ var BackgroundImageOverlaySize = () => {
1549
+ return /* @__PURE__ */ React33.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React33.createElement(ToggleControl, { options: sizeControlOptions })));
1550
+ };
1551
+
1552
+ // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
1553
+ var defaultImagePlaceholderId = 1;
1403
1554
  var initialBackgroundOverlay = {
1404
- $$type: "background-color-overlay",
1405
- value: "rgba(0, 0, 0, 0.2)"
1555
+ $$type: "background-image-overlay",
1556
+ value: {
1557
+ "image-src": {
1558
+ $$type: "image-src",
1559
+ value: {
1560
+ id: {
1561
+ $$type: "image-attachment-id",
1562
+ value: defaultImagePlaceholderId
1563
+ }
1564
+ }
1565
+ }
1566
+ }
1406
1567
  };
1407
1568
  var BackgroundOverlayRepeaterControl = createControl(() => {
1408
1569
  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props19.backgroundOverlayPropTypeUtil);
1409
- return /* @__PURE__ */ React29.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React29.createElement(
1570
+ return /* @__PURE__ */ React34.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React34.createElement(
1410
1571
  Repeater,
1411
1572
  {
1412
1573
  values: overlayValues ?? [],
1413
1574
  setValues: setValue,
1414
- label: (0, import_i18n12.__)("Overlay", "elementor"),
1575
+ label: (0, import_i18n17.__)("Overlay", "elementor"),
1415
1576
  itemSettings: {
1416
1577
  Icon: ItemIcon2,
1417
1578
  Label: ItemLabel2,
@@ -1421,36 +1582,50 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
1421
1582
  }
1422
1583
  ));
1423
1584
  });
1424
- var ItemIcon2 = ({ value }) => /* @__PURE__ */ React29.createElement(import_ui24.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
1425
- var ItemContent2 = ({ bind }) => {
1426
- return /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(Content2, null));
1585
+ var ItemIcon2 = ({ value }) => /* @__PURE__ */ React34.createElement(import_ui29.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
1586
+ var ItemContent2 = ({ bind, value }) => {
1587
+ return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2, { value }));
1427
1588
  };
1428
- var Content2 = () => {
1429
- const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
1430
- return /* @__PURE__ */ React29.createElement(import_ui24.Stack, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, (0, import_i18n12.__)("Color", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ColorControl, { propTypeUtil: import_editor_props19.backgroundColorOverlayPropTypeUtil }))), /* @__PURE__ */ React29.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ImageMediaControl, null))))));
1589
+ var Content2 = ({ value }) => {
1590
+ const activeTab = deriveOverlayType(value.$$type);
1591
+ const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui29.useTabs)(activeTab);
1592
+ return /* @__PURE__ */ React34.createElement(import_ui29.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(import_ui29.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(import_ui29.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(import_ui29.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(import_ui29.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(import_ui29.TabPanel, { ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(import_ui29.TabPanel, { ...getTabPanelProps("color") }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: import_editor_props19.backgroundColorOverlayPropTypeUtil })))));
1431
1593
  };
1432
1594
  var ItemLabel2 = ({ value }) => {
1433
1595
  const type = value.$$type;
1434
1596
  if (type === "background-color-overlay") {
1435
- return /* @__PURE__ */ React29.createElement(ItemLabelColor, { value });
1597
+ return /* @__PURE__ */ React34.createElement(ItemLabelColor, { value });
1436
1598
  }
1437
1599
  if (type === "background-image-overlay") {
1438
- return /* @__PURE__ */ React29.createElement(ItemLabelImage, { value });
1600
+ return /* @__PURE__ */ React34.createElement(ItemLabelImage, { value });
1439
1601
  }
1440
1602
  };
1441
1603
  var ItemLabelColor = ({ value }) => {
1442
- return /* @__PURE__ */ React29.createElement("span", null, value.value);
1604
+ return /* @__PURE__ */ React34.createElement("span", null, value.value);
1443
1605
  };
1444
1606
  var ItemLabelImage = ({ value }) => {
1445
1607
  const { data: attachment } = (0, import_wp_media2.useWpMediaAttachment)(value?.value["image-src"]?.value.id.value || null);
1446
1608
  const imageTitle = attachment?.title || null;
1447
- return /* @__PURE__ */ React29.createElement("span", null, imageTitle);
1609
+ return /* @__PURE__ */ React34.createElement("span", null, imageTitle);
1610
+ };
1611
+ var ImageOverlayContent = () => {
1612
+ const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
1613
+ return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ImageMediaControl, null)))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "resolution" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayResolution, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayAttachment, null)));
1614
+ };
1615
+ var deriveOverlayType = (type) => {
1616
+ if (type === "background-color-overlay") {
1617
+ return "color";
1618
+ }
1619
+ if (type === "background-image-overlay") {
1620
+ return "image";
1621
+ }
1622
+ throw new Error(`Invalid overlay type: ${type}`);
1448
1623
  };
1449
1624
 
1450
1625
  // src/controls/background-control/background-control.tsx
1451
1626
  var BackgroundControl = createControl(() => {
1452
1627
  const propContext = useBoundProp(import_editor_props20.backgroundPropTypeUtil);
1453
- return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React30.createElement(import_ui25.Stack, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React30.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n13.__)("Color", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ColorControl, null))))));
1628
+ return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React35.createElement(import_ui30.Stack, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React35.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ColorControl, null))))));
1454
1629
  });
1455
1630
  // Annotate the CommonJS export names for ESM import in node:
1456
1631
  0 && (module.exports = {