@elementor/editor-controls 3.33.0-254 → 3.33.0-256

package/dist/index.js

@@ -1261,7 +1261,7 @@ var Control = (0, import_react14.forwardRef)(({ bind, label, children }, ref) =>
 
 // src/controls/box-shadow-repeater-control.tsx
 var React39 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_editor_props10 = require("@elementor/editor-props");
 var import_ui30 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -1554,11 +1554,22 @@ var React27 = __toESM(require("react"));
 var import_ui21 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
+// src/hooks/use-repeatable-control-context.ts
+var import_react17 = require("react");
+var RepeatableControlContext = (0, import_react17.createContext)(void 0);
+var useRepeatableControlContext = () => {
+  const context = (0, import_react17.useContext)(RepeatableControlContext);
+  if (!context) {
+    throw new Error("useRepeatableControlContext must be used within RepeatableControl");
+  }
+  return context;
+};
+
 // src/components/repeater/repeater-tag.tsx
 var React26 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_ui20 = require("@elementor/ui");
-var RepeaterTag = (0, import_react17.forwardRef)((props, ref) => {
+var RepeaterTag = (0, import_react18.forwardRef)((props, ref) => {
   return /* @__PURE__ */ React26.createElement(
     import_ui20.UnstableTag,
     {
@@ -1581,8 +1592,13 @@ var { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = (
 // src/components/control-repeater/items/item.tsx
 var Item = ({ Label: Label3, Icon, actions }) => {
   const { popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
+  const repeatableContext = React27.useContext(RepeatableControlContext);
+  const disableOpen = !!repeatableContext?.props?.readOnly;
   const triggerProps = (0, import_ui21.bindTrigger)(popoverState);
   const onClick = (ev) => {
+    if (disableOpen) {
+      return;
+    }
     triggerProps.onClick(ev);
     setOpenItemIndex(index);
   };
@@ -1720,16 +1736,16 @@ var import_ui27 = require("@elementor/ui");
 var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React34.createElement(import_ui27.Stack, { ...props, gap }, children);
 
 // src/components/popover-grid-container.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var React35 = __toESM(require("react"));
 var import_ui28 = require("@elementor/ui");
-var PopoverGridContainer = (0, import_react18.forwardRef)(
+var PopoverGridContainer = (0, import_react19.forwardRef)(
   ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater/repeater-header.tsx
 var React38 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_ui29 = require("@elementor/ui");
 
 // src/control-adornments/control-adornments.tsx
@@ -1737,11 +1753,11 @@ var React37 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
 var React36 = __toESM(require("react"));
-var import_react19 = require("react");
-var Context2 = (0, import_react19.createContext)(null);
+var import_react20 = require("react");
+var Context2 = (0, import_react20.createContext)(null);
 var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React36.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react19.useContext)(Context2);
+  const context = (0, import_react20.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -1757,7 +1773,7 @@ function ControlAdornments({
 }
 
 // src/components/repeater/repeater-header.tsx
-var RepeaterHeader = (0, import_react20.forwardRef)(
+var RepeaterHeader = (0, import_react21.forwardRef)(
   ({
     label,
     children,
@@ -1798,7 +1814,7 @@ var StyledUnstableColorIndicator = (0, import_ui30.styled)(import_ui30.UnstableC
 var ItemIcon = ({ value }) => /* @__PURE__ */ React39.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(import_editor_props10.shadowPropTypeUtil);
-  const rowRef = [(0, import_react21.useRef)(null), (0, import_react21.useRef)(null)];
+  const rowRef = [(0, import_react22.useRef)(null), (0, import_react22.useRef)(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
   return /* @__PURE__ */ React39.createElement(PropProvider, { ...context }, /* @__PURE__ */ React39.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(Control2, { bind: "color", label: (0, import_i18n11.__)("Color", "elementor") }, /* @__PURE__ */ React39.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React39.createElement(Control2, { bind: "position", label: (0, import_i18n11.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(
     SelectControl,
@@ -1870,7 +1886,7 @@ var import_i18n16 = require("@wordpress/i18n");
 
 // src/controls/filter-control/context/filter-config-context.tsx
 var React40 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_editor_props11 = require("@elementor/editor-props");
 
 // src/controls/filter-control/utils.ts
@@ -1969,10 +1985,10 @@ function extractPropType(propType, filterFunctionGroup) {
 }
 
 // src/controls/filter-control/context/filter-config-context.tsx
-var FilterConfigContext = (0, import_react22.createContext)(null);
+var FilterConfigContext = (0, import_react23.createContext)(null);
 function FilterConfigProvider({ children }) {
   const propContext = useBoundProp(import_editor_props11.cssFilterFunctionPropUtil);
-  const contextValue = (0, import_react22.useMemo)(() => {
+  const contextValue = (0, import_react23.useMemo)(() => {
     const config = buildFilterConfig(propContext.propType.item_prop_type);
     const filterOptions = Object.entries(config).map(([key, conf]) => ({
       value: key,
@@ -1988,7 +2004,7 @@ function FilterConfigProvider({ children }) {
   return /* @__PURE__ */ React40.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
 }
 function useFilterConfig() {
-  const context = (0, import_react22.useContext)(FilterConfigContext);
+  const context = (0, import_react23.useContext)(FilterConfigContext);
   if (!context) {
     throw new Error("useFilterConfig must be used within FilterConfigProvider");
   }
@@ -2003,7 +2019,7 @@ var import_i18n15 = require("@wordpress/i18n");
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
 var React41 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_ui31 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
@@ -2031,7 +2047,7 @@ var items = [
 ];
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(import_editor_props12.dropShadowFilterPropTypeUtil);
-  const rowRefs = [(0, import_react23.useRef)(null), (0, import_react23.useRef)(null)];
+  const rowRefs = [(0, import_react24.useRef)(null), (0, import_react24.useRef)(null)];
   return /* @__PURE__ */ React41.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React41.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React41.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React41.createElement(
     SizeControl,
     {
@@ -2044,7 +2060,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 };
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var React42 = __toESM(require("react"));
 var import_editor_props13 = require("@elementor/editor-props");
 var import_ui32 = require("@elementor/ui");
@@ -2055,7 +2071,7 @@ var propTypeMap = {
   "color-tone": import_editor_props13.colorToneFilterPropTypeUtil
 };
 var SingleSizeItemContent = ({ filterFunc }) => {
-  const rowRef = (0, import_react24.useRef)(null);
+  const rowRef = (0, import_react25.useRef)(null);
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
@@ -2195,7 +2211,7 @@ function ensureFilterConfig(name) {
 
 // src/controls/select-control-wrapper.tsx
 var React49 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2213,8 +2229,8 @@ var collectionMethods = {
   "off-canvas": getOffCanvasElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = (0, import_react25.useState)(initialOptions ?? []);
-  (0, import_react25.useEffect)(() => {
+  const [options, setOptions] = (0, import_react26.useState)(initialOptions ?? []);
+  (0, import_react26.useEffect)(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
       return;
@@ -2236,7 +2252,7 @@ var import_editor_props16 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
 var React51 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_icons9 = require("@elementor/icons");
 var import_ui38 = require("@elementor/ui");
 
@@ -2299,7 +2315,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = (0, import_react26.useMemo)(() => {
+  const getGridTemplateColumns = (0, import_react27.useMemo)(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -2380,8 +2396,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react26.useState)(false);
-  const menuButtonRef = (0, import_react26.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react27.useState)(false);
+  const menuButtonRef = (0, import_react27.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2450,10 +2466,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react26.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react27.useState)(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2586,7 +2602,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React56 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_ui41 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
@@ -2616,7 +2632,7 @@ function EqualUnequalSizesControl({
   items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react27.useId)();
+  const popupId = (0, import_react28.useId)();
   const popupState = (0, import_ui41.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -2625,7 +2641,7 @@ function EqualUnequalSizesControl({
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props18.sizePropTypeUtil);
-  const rowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
+  const rowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -2707,7 +2723,7 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 
 // src/controls/linked-dimensions-control.tsx
 var React57 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_editor_props19 = require("@elementor/editor-props");
 var import_icons10 = require("@elementor/icons");
 var import_ui42 = require("@elementor/ui");
@@ -2724,7 +2740,7 @@ var LinkedDimensionsControl = ({
     disabled: sizeDisabled,
     placeholder: sizePlaceholder
   } = useBoundProp(import_editor_props19.sizePropTypeUtil);
-  const gridRowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
+  const gridRowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2859,7 +2875,7 @@ var import_i18n20 = require("@wordpress/i18n");
 
 // src/components/item-selector.tsx
 var React58 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_ui43 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
@@ -2896,7 +2912,7 @@ var ItemSelector = ({
   disabledItems,
   id = "item-selector"
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react29.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react30.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -2993,7 +3009,7 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = (0, import_react29.useCallback)((item) => itemStyle(item), [itemStyle]);
+  const memoizedItemStyle = (0, import_react30.useCallback)((item) => itemStyle(item), [itemStyle]);
   return /* @__PURE__ */ React58.createElement(
     import_editor_ui4.PopoverMenuList,
     {
@@ -3008,8 +3024,8 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react29.useState)(() => (0, import_utils3.debounce)(fn, delay));
-  (0, import_react29.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react30.useState)(() => (0, import_utils3.debounce)(fn, delay));
+  (0, import_react30.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -3110,7 +3126,7 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 var React65 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props24 = require("@elementor/editor-props");
 var import_icons15 = require("@elementor/icons");
@@ -3179,7 +3195,7 @@ var RestrictedLinkInfotip = ({
 
 // src/controls/query-control.tsx
 var React63 = __toESM(require("react"));
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons14 = require("@elementor/icons");
@@ -3188,10 +3204,10 @@ var import_i18n22 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React62 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_icons13 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
-var Autocomplete = (0, import_react30.forwardRef)((props, ref) => {
+var Autocomplete = (0, import_react31.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -3322,7 +3338,7 @@ var QueryControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const normalizedPlaceholder = placeholder || (0, import_i18n22.__)("Search", "elementor");
-  const [options, setOptions] = (0, import_react31.useState)(
+  const [options, setOptions] = (0, import_react32.useState)(
     generateFirstLoadedOption(value?.value)
   );
   const onOptionChange = (newValue) => {
@@ -3360,7 +3376,7 @@ var QueryControl = createControl((props) => {
     }
     debounceFetch({ ...params, term: newValue });
   };
-  const debounceFetch = (0, import_react31.useMemo)(
+  const debounceFetch = (0, import_react32.useMemo)(
     () => (0, import_utils4.debounce)(
       (queryParams) => fetchOptions(url, queryParams).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -3444,7 +3460,7 @@ var SIZE6 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props24.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react32.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react33.useState)(!!value);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3454,7 +3470,7 @@ var LinkControl = createControl((props) => {
     label = (0, import_i18n23.__)("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react32.useState)((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react33.useState)((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
     setLinkInLinkRestriction((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
@@ -3618,7 +3634,7 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
 
 // src/controls/gap-control.tsx
 var React68 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_editor_props26 = require("@elementor/editor-props");
 var import_icons16 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
@@ -3630,7 +3646,7 @@ var GapControl = ({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(import_editor_props26.layoutDirectionPropTypeUtil);
-  const stackRef = (0, import_react33.useRef)(null);
+  const stackRef = (0, import_react34.useRef)(null);
   const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props26.sizePropTypeUtil);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
@@ -3676,7 +3692,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 var React69 = __toESM(require("react"));
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_editor_props27 = require("@elementor/editor-props");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons17 = require("@elementor/icons");
@@ -3697,13 +3713,13 @@ var AspectRatioControl = createControl(({ label }) => {
   const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props27.stringPropTypeUtil);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = (0, import_react34.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react34.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react34.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react34.useState)(
+  const [isCustom, setIsCustom] = (0, import_react35.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react35.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react35.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react35.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -3787,7 +3803,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 var React71 = __toESM(require("react"));
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props28 = require("@elementor/editor-props");
 var import_icons18 = require("@elementor/icons");
@@ -3797,7 +3813,7 @@ var import_i18n28 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React70 = __toESM(require("react"));
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_ui55 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n27.__)("Enable Unfiltered Uploads", "elementor");
@@ -3813,7 +3829,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n27.__)(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = (0, import_react35.useState)(false);
+  const [isError, setIsError] = (0, import_react36.useState)(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -3876,7 +3892,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react36.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react37.useState)(false);
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const canManageOptions = canUser("manage_options");
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
@@ -4059,7 +4075,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React74 = __toESM(require("react"));
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_editor_props30 = require("@elementor/editor-props");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons20 = require("@elementor/icons");
@@ -4081,7 +4097,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props30.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props30.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react37.useRef)(null);
+  const rowRef = (0, import_react38.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -4154,7 +4170,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React76 = __toESM(require("react"));
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_editor_props31 = require("@elementor/editor-props");
 var import_icons22 = require("@elementor/icons");
 var import_ui61 = require("@elementor/ui");
@@ -4189,7 +4205,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props31.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props31.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react38.useRef)(null);
+  const rowRef = (0, import_react39.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -4224,7 +4240,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_editor_props32 = require("@elementor/editor-props");
 var import_ui62 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -4245,7 +4261,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui62.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react39.useRef)({
+  const valuesHistory = (0, import_react40.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -4493,19 +4509,6 @@ var React79 = __toESM(require("react"));
 var import_react41 = require("react");
 var import_editor_props35 = require("@elementor/editor-props");
 var import_ui65 = require("@elementor/ui");
-
-// src/hooks/use-repeatable-control-context.ts
-var import_react40 = require("react");
-var RepeatableControlContext = (0, import_react40.createContext)(void 0);
-var useRepeatableControlContext = () => {
-  const context = (0, import_react40.useContext)(RepeatableControlContext);
-  if (!context) {
-    throw new Error("useRepeatableControlContext must be used within RepeatableControl");
-  }
-  return context;
-};
-
-// src/controls/repeatable-control.tsx
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -4636,11 +4639,18 @@ var shouldShowPlaceholder = (pattern, data) => {
   }
   return false;
 };
+var getTextColor = (isReadOnly, showPlaceholder) => {
+  if (isReadOnly) {
+    return "text.disabled";
+  }
+  return showPlaceholder ? "text.tertiary" : "text.primary";
+};
 var ItemLabel3 = ({ value }) => {
-  const { placeholder, patternLabel } = useRepeatableControlContext();
+  const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
   const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
-  const color = showPlaceholder ? "text.tertiary" : "text.primary";
+  const isReadOnly = !!childProps?.readOnly;
+  const color = getTextColor(isReadOnly, showPlaceholder);
   return /* @__PURE__ */ React79.createElement(import_ui65.Box, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {