# elementor/trunk/assets/js/packages/editor-editing-panel/editor-editing-panel.js

Elementor Website Builder – more than just a page builder, version trunk. 7,766 lines.

- Page: https://pluginprobe.com/plugins/elementor/trunk/code/assets/js/packages/editor-editing-panel/editor-editing-panel.js
- Raw: https://pluginprobe.com/plugins/elementor/trunk/raw/assets/js/packages/editor-editing-panel/editor-editing-panel.js
- Modified: 2026-09-22T14:03:08+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/trunk/code/assets/js/packages/editor-editing-panel/editor-editing-panel.js#L10-L20`.

```javascript
(function(react, _elementor_ui, _elementor_editor_elements, _elementor_editor_props, _elementor_locations, _elementor_session, _elementor_editor_styles_repository, _elementor_utils, _elementor_editor_controls, _elementor_icons, _elementor_editor_ui, _wordpress_i18n, _elementor_editor_styles, _elementor_editor_v1_adapters, _elementor_editor_documents, _elementor_editor_responsive, _elementor_editor_panels, _elementor_menus, _elementor_editor_interactions, _elementor_editor_variables, _elementor_editor_canvas, _elementor_editor, _elementor_schema, _elementor_wp_media) {

//#region \0rolldown/runtime.js
	var __create = Object.create;
	var __defProp$1 = Object.defineProperty;
	var __name = (target, value) => __defProp$1(target, "name", {
		value,
		configurable: true
	});
	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
	var __getOwnPropNames = Object.getOwnPropertyNames;
	var __getProtoOf = Object.getPrototypeOf;
	var __hasOwnProp = Object.prototype.hasOwnProperty;
	var __exportAll = (all, no_symbols) => {
		let target = {};
		for (var name in all) {
			__defProp$1(target, name, {
				get: all[name],
				enumerable: true
			});
		}
		if (!no_symbols) {
			__defProp$1(target, Symbol.toStringTag, { value: "Module" });
		}
		return target;
	};
	var __copyProps = (to, from, except, desc) => {
		if (from && typeof from === "object" || typeof from === "function") {
			for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
				key = keys[i];
				if (!__hasOwnProp.call(to, key) && key !== except) {
					__defProp$1(to, key, {
						get: ((k) => from[k]).bind(null, key),
						enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
					});
				}
			}
		}
		return to;
	};
	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp$1(target, "default", {
		value: mod,
		enumerable: true
	}) : target, mod));

//#endregion
react = __toESM(react);

//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts
	function addGroupToOptions(options, pluralEntityName) {
		return options.map((option) => {
			return {
				...option,
				_group: `Existing ${pluralEntityName ?? "options"}`
			};
		});
	}
	function removeInternalKeys(option) {
		const { _group, _action, ...rest } = option;
		return rest;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-change.ts
	function useAutocompleteChange(params) {
		const { options, onSelect, createOption, setInputValue, closeDropdown } = params;
		if (!onSelect && !createOption) return;
		const handleChange = async (_, selectedOrInputValue, reason, details) => {
			const changedOption = details?.option;
			if (!changedOption || typeof changedOption === "object" && changedOption.fixed) return;
			const selectedOptions = selectedOrInputValue.filter((option) => typeof option !== "string");
			switch (reason) {
				case "removeOption":
					updateSelectedOptions(selectedOptions, "removeOption", changedOption);
					break;
				case "selectOption": {
					const selectedOption = changedOption;
					if (selectedOption._action === "create") {
						const newOption = selectedOption.value;
						return createOption?.(newOption);
					}
					updateSelectedOptions(selectedOptions, "selectOption", selectedOption);
					break;
				}
				case "createOption": {
					const inputValue = changedOption;
					const matchingOption = options.find((option) => option.label.toLocaleLowerCase() === inputValue.toLocaleLowerCase());
					if (matchingOption) {
						selectedOptions.push(matchingOption);
						updateSelectedOptions(selectedOptions, "selectOption", matchingOption);
					} else return createOption?.(inputValue);
					break;
				}
			}
			setInputValue("");
			closeDropdown();
		};
		return handleChange;
		function updateSelectedOptions(selectedOptions, reason, changedOption) {
			onSelect?.(selectedOptions.map((option) => removeInternalKeys(option)), reason, removeInternalKeys(changedOption));
		}
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-states.ts
	function useInputState(validate) {
		const [inputValue, setInputValue] = (0, react.useState)("");
		const [error, setError] = (0, react.useState)(null);
		const handleInputChange = (event) => {
			const { value } = event.target;
			setInputValue(value);
			if (!validate) return;
			if (!value) {
				setError(null);
				return;
			}
			const { isValid, errorMessage } = validate(value, "inputChange");
			if (isValid) setError(null);
			else setError(errorMessage);
		};
		const handleInputBlur = () => {
			setInputValue("");
			setError(null);
		};
		return {
			inputValue,
			setInputValue,
			error,
			setError,
			inputHandlers: {
				onChange: handleInputChange,
				onBlur: handleInputBlur
			}
		};
	}
	function useOpenState(initialOpen = false) {
		const [open, setOpen] = (0, react.useState)(initialOpen);
		const openDropdown = () => setOpen(true);
		const closeDropdown = () => setOpen(false);
		return {
			open,
			openDropdown,
			closeDropdown
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-create-option.ts
	function useCreateOption(params) {
		const { onCreate, validate, setInputValue, setError, closeDropdown } = params;
		const [loading, setLoading] = (0, react.useState)(false);
		if (!onCreate) return {
			createOption: null,
			loading: false
		};
		const createOption = async (value) => {
			setLoading(true);
			if (validate) {
				const { isValid, errorMessage } = validate(value, "create");
				if (!isValid) {
					setError(errorMessage);
					setLoading(false);
					return;
				}
			}
			try {
				setInputValue("");
				closeDropdown();
				await onCreate(value);
			} catch {} finally {
				setLoading(false);
			}
		};
		return {
			createOption,
			loading
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-filter-options.ts
	var STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
	function normalizeClassSearch(value) {
		return value.replace(STRIP_NON_CLASS_CHARS, "").toLowerCase();
	}
	function useFilterOptions(parameters) {
		const { options, selected, onCreate, entityName } = parameters;
		const filter = (0, _elementor_ui.createFilterOptions)({ matchFrom: "any" });
		const filterOptions = (optionList, params) => {
			const selectedValues = selected.map((option) => option.value);
			const filteredOptions = filter(optionList.filter((option) => !selectedValues.includes(option.value)), {
				...params,
				inputValue: normalizeClassSearch(params.inputValue)
			});
			const isExisting = options.some((option) => params.inputValue === option.label);
			if (Boolean(onCreate) && params.inputValue !== "" && !selectedValues.includes(params.inputValue) && !isExisting) filteredOptions.unshift({
				label: `Create "${params.inputValue}"`,
				value: params.inputValue,
				_group: `Create a new ${entityName?.singular ?? "option"}`,
				key: `create-${params.inputValue}`,
				_action: "create"
			});
			return filteredOptions;
		};
		return filterOptions;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/creatable-autocomplete.tsx
	var MIN_INPUT_LENGTH = 2;
	var CreatableAutocomplete = react.forwardRef(CreatableAutocompleteInner);
	function CreatableAutocompleteInner({ selected, options, entityName, onSelect, placeholder, onCreate, validate, renderEmptyState, ...props }, ref) {
		const { inputValue, setInputValue, error, setError, inputHandlers } = useInputState(validate);
		const { open, openDropdown, closeDropdown } = useOpenState(props.open);
		const { createOption, loading } = useCreateOption({
			onCreate,
			validate,
			setInputValue,
			setError,
			closeDropdown
		});
		const [internalOptions, internalSelected] = (0, react.useMemo)(() => [options, selected].map((optionsArr) => addGroupToOptions(optionsArr, entityName?.plural)), [
			options,
			selected,
			entityName?.plural
		]);
		const handleChange = useAutocompleteChange({
			options: internalOptions,
			onSelect,
			createOption,
			setInputValue,
			closeDropdown
		});
		const filterOptions = useFilterOptions({
			options,
			selected,
			onCreate,
			entityName
		});
		const freeSolo = Boolean(onCreate) || inputValue.length < MIN_INPUT_LENGTH || void 0;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Autocomplete, {
			renderTags: (tagValue, getTagProps) => {
				return tagValue.map((option, index) => /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
					size: "tiny",
					...getTagProps({ index }),
					key: option.key ?? option.value ?? option.label,
					label: option.label
				}));
			},
			...props,
			ref,
			freeSolo,
			forcePopupIcon: false,
			multiple: true,
			clearOnBlur: true,
			selectOnFocus: true,
			disableClearable: true,
			handleHomeEndKeys: true,
			disabled: loading,
			open,
			onOpen: openDropdown,
			onClose: closeDropdown,
			disableCloseOnSelect: true,
			value: internalSelected,
			options: internalOptions,
			ListboxComponent: error ? react.forwardRef((_, errorTextRef) => /* @__PURE__ */ react.createElement(ErrorText, {
				ref: errorTextRef,
				error
			})) : void 0,
			renderGroup: (params) => /* @__PURE__ */ react.createElement(Group, { ...params }),
			inputValue,
			renderInput: (params) => {
				return /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
					...params,
					error: Boolean(error),
					placeholder,
					...inputHandlers,
					sx: (theme) => ({ ".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart": {
						paddingLeft: theme.spacing(.25),
						paddingRight: theme.spacing(.25)
					} })
				});
			},
			onChange: handleChange,
			getOptionLabel: (option) => typeof option === "string" ? option : option.label,
			getOptionKey: (option) => {
				if (typeof option === "string") return option;
				return option.key ?? option.value ?? option.label;
			},
			filterOptions,
			groupBy: (option) => option._group ?? "",
			renderOption: (optionProps, option) => {
				const { _group, label } = option;
				return /* @__PURE__ */ react.createElement("li", {
					...optionProps,
					style: {
						display: "block",
						textOverflow: "ellipsis"
					},
					"data-group": _group
				}, label);
			},
			noOptionsText: renderEmptyState?.({
				searchValue: inputValue,
				onClear: () => {
					setInputValue("");
					closeDropdown();
				}
			}),
			isOptionEqualToValue: (option, value) => {
				if (typeof option === "string") return option === value;
				return option.value === value.value;
			}
		});
	}
	var Group = (params) => {
		const id = `combobox-group-${(0, react.useId)().replace(/:/g, "_")}`;
		return /* @__PURE__ */ react.createElement(StyledGroup, {
			role: "group",
			"aria-labelledby": id
		}, /* @__PURE__ */ react.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ react.createElement(StyledGroupItems, { role: "listbox" }, params.children));
	};
	var ErrorText = react.forwardRef(({ error = "error" }, ref) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
			ref,
			sx: (theme) => ({ padding: theme.spacing(2) })
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
			variant: "caption",
			sx: {
				color: "error.main",
				display: "inline-block"
			}
		}, error));
	});
	var StyledGroup = (0, _elementor_ui.styled)("li")`
	&:not( :last-of-type ) {
		border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
	}
`;
	var StyledGroupHeader = (0, _elementor_ui.styled)(_elementor_ui.Box)(({ theme }) => ({
		position: "sticky",
		top: "-8px",
		padding: theme.spacing(1, 2),
		color: theme.palette.text.tertiary,
		backgroundColor: theme.palette.primary.contrastText
	}));
	var StyledGroupItems = (0, _elementor_ui.styled)("ul")`
	padding: 0;
`;

//#endregion
//#region packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx
	var Context$3 = (0, react.createContext)(null);
	function ClassesPropProvider({ children, prop }) {
		return /* @__PURE__ */ react.createElement(Context$3.Provider, { value: { prop } }, children);
	}
	function useClassesProp() {
		const context = (0, react.useContext)(Context$3);
		if (!context) throw new Error("useClassesProp must be used within a ClassesPropProvider");
		return context.prop;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx
	var Context$2 = (0, react.createContext)(null);
	function ElementProvider({ children, element, elementType, settings }) {
		return /* @__PURE__ */ react.createElement(Context$2.Provider, { value: {
			element,
			elementType,
			settings
		} }, children);
	}
	function useElement() {
		const context = (0, react.useContext)(Context$2);
		if (!context) throw new Error("useElement must be used within a ElementProvider");
		return context;
	}
	function usePanelElementSetting(propKey) {
		const context = (0, react.useContext)(Context$2);
		if (!context) throw new Error("usePanelElementSetting must be used within a ElementProvider");
		return context.settings[propKey] ?? null;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/errors.ts
	var ControlTypeNotFoundError = (0, _elementor_utils.createError)({
		code: "control_type_not_found",
		message: "Control type not found."
	});
	var ControlTypeAlreadyRegisteredError = (0, _elementor_utils.createError)({
		code: "control_type_already_registered",
		message: "Control type is already registered."
	});
	var ControlTypeNotRegisteredError = (0, _elementor_utils.createError)({
		code: "control_type_not_registered",
		message: "Control type is not registered."
	});
	var StylesProviderNotFoundError = (0, _elementor_utils.createError)({
		code: "provider_not_found",
		message: "Styles provider not found."
	});
	var StylesProviderCannotUpdatePropsError = (0, _elementor_utils.createError)({
		code: "provider_cannot_update_props",
		message: "Styles provider doesn't support updating props."
	});
	var StyleNotFoundUnderProviderError = (0, _elementor_utils.createError)({
		code: "style_not_found_under_provider",
		message: "Style not found under the provider."
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx
	var Context$1 = (0, react.createContext)(null);
	function StyleProvider({ children, ...props }) {
		const provider = props.id === null ? null : getProviderByStyleId(props.id);
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		if (props.id && !provider) throw new StylesProviderNotFoundError({ context: { styleId: props.id } });
		const canEdit = userCan(provider?.getKey() ?? "").updateProps;
		return /* @__PURE__ */ react.createElement(Context$1.Provider, { value: {
			...props,
			provider,
			canEdit
		} }, children);
	}
	function useStyle() {
		const context = (0, react.useContext)(Context$1);
		if (!context) throw new Error("useStyle must be used within a StyleProvider");
		return context;
	}
	function getProviderByStyleId(styleId) {
		return _elementor_editor_styles_repository.stylesRepository.getProviders().find((provider) => {
			return provider.actions.all().find((style) => style.id === styleId);
		}) ?? null;
	}
	function useIsStyle() {
		return !!(0, react.useContext)(Context$1);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/consts.ts
	var PENDING_CLASS_RENAME_SESSION_KEY = "pending-class-rename-id";

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-convert-local.tsx
	var { Slot: CssClassConvertSlot, inject: injectIntoCssClassConvert } = (0, _elementor_locations.createLocation)();
	var CssClassConvert = (props) => {
		const { element } = useElement();
		const elementId = element.id;
		const currentClassesProp = useClassesProp();
		const { setId: setActiveId } = useStyle();
		const [, saveValue] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app");
		const successCallback = (newId) => {
			if (!props.styleDef) throw new Error("Style definition is required for converting local class to global class.");
			onConvert({
				newId,
				elementId,
				classesProp: currentClassesProp,
				styleDef: props.styleDef
			});
			saveValue(newId);
			setActiveId(newId);
			props.closeMenu();
		};
		return /* @__PURE__ */ react.createElement(CssClassConvertSlot, {
			canConvert: !!props.canConvert,
			styleDef: props.styleDef,
			successCallback
		});
	};
	var onConvert = (opts) => {
		const { newId, elementId, classesProp } = opts;
		(0, _elementor_editor_elements.deleteElementStyle)(elementId, opts.styleDef.id);
		const currentUsedClasses = (0, _elementor_editor_elements.getElementSetting)(elementId, classesProp) || { value: [] };
		(0, _elementor_editor_elements.updateElementSettings)({
			id: elementId,
			props: { [classesProp]: _elementor_editor_props.classesPropTypeUtil.create([newId, ...currentUsedClasses.value]) },
			withHistory: false
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/control-label.tsx
	var ControlLabel = ({ children, infoTooltip }) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			alignItems: "center",
			justifyItems: "start",
			gap: .25
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: infoTooltip,
			placement: "top"
		}, /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornments, null));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/provider-colors-registry.ts
	var DEFAULT_COLORS = {
		name: "default",
		getThemeColor: null
	};
	var providerColorsRegistry = /* @__PURE__ */ new Map();
	var registerStyleProviderToColors = (provider, colors) => {
		providerColorsRegistry.set(provider, colors);
	};
	var getStyleProviderColors = (provider) => providerColorsRegistry.get(provider) ?? DEFAULT_COLORS;

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts
	var getStylesProviderColorName = (provider) => {
		if (!provider || provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return "default";
		if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return "accent";
		return getStyleProviderColors(provider).name;
	};
	var getStylesProviderThemeColor = (provider) => {
		if (!provider || provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return null;
		if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return (theme) => theme.palette.accent.main;
		return getStyleProviderColors(provider).getThemeColor;
	};
	function getTempStylesProviderThemeColor(provider) {
		if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return (theme) => theme.palette.primary.main;
		return getStylesProviderThemeColor(provider);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/tracking/subscribe.ts
	var trackStyles = (provider, event, data) => {
		_elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider)?.actions.tracking?.({
			event,
			...data
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-context.tsx
	var CssClassContext = (0, react.createContext)(null);
	var useCssClass = () => {
		const context = (0, react.useContext)(CssClassContext);
		if (!context) throw new Error("useCssClass must be used within a CssClassProvider");
		return context;
	};
	function CssClassProvider({ children, ...contextValue }) {
		return /* @__PURE__ */ react.createElement(CssClassContext.Provider, { value: contextValue }, children);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx
	var StyleIndicator = (0, _elementor_ui.styled)("div", { shouldForwardProp: (prop) => !["isOverridden", "getColor"].includes(prop) })`
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: ${({ theme, isOverridden, getColor }) => {
		if (isOverridden) return theme.palette.warning.light;
		return getColor?.(theme) ?? theme.palette.text.disabled;
	}};
`;

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-states/pseudo-states.ts
	var DEFAULT_PSEUDO_STATES = [
		{
			key: "normal",
			value: null,
			label: (0, _wordpress_i18n.__)("normal", "elementor")
		},
		{
			key: "hover",
			value: "hover",
			label: (0, _wordpress_i18n.__)("hover", "elementor")
		},
		{
			key: "focus",
			value: "focus",
			label: (0, _wordpress_i18n.__)("focus", "elementor")
		},
		{
			key: "active",
			value: "active",
			label: (0, _wordpress_i18n.__)("active", "elementor")
		}
	];

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-states/use-pseudo-states.ts
	function usePseudoStates() {
		const { elementType } = useElement();
		const { pseudoStates = [] } = elementType;
		const additionalStates = pseudoStates.map(({ name, value }) => ({
			key: value,
			value,
			label: name
		}));
		return [...DEFAULT_PSEUDO_STATES, ...additionalStates];
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/apply-unapply-actions.ts
	function doGetAppliedClasses(elementId, classesPropType = "classes") {
		return (0, _elementor_editor_elements.getElementSetting)(elementId, classesPropType)?.value || [];
	}
	function doApplyClasses(elementId, classIds, classesPropType = "classes") {
		(0, _elementor_editor_elements.updateElementSettings)({
			id: elementId,
			props: { [classesPropType]: _elementor_editor_props.classesPropTypeUtil.create(classIds) },
			withHistory: false
		});
		(0, _elementor_editor_documents.setDocumentModifiedStatus)(true);
		ensureClassesAreLoaded(classIds);
	}
	function ensureClassesAreLoaded(classIds) {
		const providers = _elementor_editor_styles_repository.stylesRepository.getProviders();
		classIds.forEach((classId) => {
			_elementor_editor_styles_repository.stylesRepository.getProviderByKey(classId)?.actions.get(classId);
			const owningProvider = providers.find((provider) => provider.actions.all().some((style) => style.id === classId));
			try {
				owningProvider?.actions.get(classId);
			} catch {}
		});
	}
	function doUnapplyClass(elementId, classId, classesPropType = "classes") {
		const appliedClasses = (0, _elementor_editor_elements.getElementSetting)(elementId, classesPropType)?.value || [];
		if (!appliedClasses.includes(classId)) return false;
		doApplyClasses(elementId, appliedClasses.filter((id) => id !== classId), classesPropType);
		return true;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-apply-and-unapply-class.ts
	function useUndoableApplyClass() {
		const { id: activeId, setId: setActiveId } = useStyle();
		const { element } = useElement();
		const applyClass = useApplyClass();
		const unapplyClasses = useUnapplyClasses();
		return (0, react.useMemo)(() => {
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: ({ classId }) => {
					const prevActiveId = activeId;
					applyClass(classId);
					return prevActiveId;
				},
				undo: ({ classId }, prevActiveId) => {
					unapplyClasses([classId]);
					setActiveId(prevActiveId);
				}
			}, {
				title: (0, _elementor_editor_elements.getElementLabel)(element.id),
				subtitle: ({ classLabel }) => {
					return (0, _wordpress_i18n.__)(`class %s applied`, "elementor").replace("%s", classLabel);
				}
			});
		}, [
			activeId,
			applyClass,
			element.id,
			unapplyClasses,
			setActiveId
		]);
	}
	function useUndoableUnapplyClass() {
		const { id: activeId, setId: setActiveId } = useStyle();
		const { element } = useElement();
		const applyClass = useApplyClass();
		const unapplyClasses = useUnapplyClasses();
		return (0, react.useMemo)(() => {
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: ({ classId }) => {
					const prevActiveId = activeId;
					unapplyClasses([classId]);
					return prevActiveId;
				},
				undo: ({ classId }, prevActiveId) => {
					applyClass(classId);
					setActiveId(prevActiveId);
				}
			}, {
				title: (0, _elementor_editor_elements.getElementLabel)(element.id),
				subtitle: ({ classLabel }) => {
					return (0, _wordpress_i18n.__)(`class %s removed`, "elementor").replace("%s", classLabel);
				}
			});
		}, [
			activeId,
			applyClass,
			element.id,
			unapplyClasses,
			setActiveId
		]);
	}
	function useCreateAndApplyClass() {
		const { id: activeId, setId: setActiveId } = useStyle();
		const [provider, createAction] = (0, _elementor_editor_styles_repository.useGetStylesRepositoryCreateAction)() ?? [null, null];
		const deleteAction = provider?.actions.delete;
		const applyClass = useApplyClass();
		const unapplyClasses = useUnapplyClasses();
		const undoableCreateAndApply = (0, react.useMemo)(() => {
			if (!provider || !createAction) return;
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: ({ classLabel }) => {
					const prevActiveId = activeId;
					const createdId = createAction(classLabel);
					applyClass(createdId);
					return {
						prevActiveId,
						createdId
					};
				},
				undo: (_, { prevActiveId, createdId }) => {
					unapplyClasses([createdId]);
					deleteAction?.(createdId);
					setActiveId(prevActiveId);
				},
				redo: ({ classLabel }, { createdId }) => {
					const prevActiveId = activeId;
					createAction(classLabel, [], createdId);
					applyClass(createdId);
					return {
						prevActiveId,
						createdId
					};
				}
			}, {
				title: (0, _wordpress_i18n.__)("Class", "elementor"),
				subtitle: ({ classLabel }) => {
					return (0, _wordpress_i18n.__)(`%s created`, "elementor").replace("%s", classLabel);
				}
			});
		}, [
			activeId,
			applyClass,
			createAction,
			deleteAction,
			provider,
			setActiveId,
			unapplyClasses
		]);
		if (!provider || !undoableCreateAndApply) return [null, null];
		return [provider, undoableCreateAndApply];
	}
	function useApplyClass() {
		const { element } = useElement();
		const { setId: setActiveId } = useStyle();
		const { setClasses, getAppliedClasses } = useClasses();
		return (0, react.useCallback)((classIDToApply) => {
			const appliedClasses = getAppliedClasses();
			if (appliedClasses.includes(classIDToApply)) throw new Error(`Class ${classIDToApply} is already applied to element ${element.id}, cannot re-apply.`);
			const updatedClassesIds = [...appliedClasses, classIDToApply];
			setClasses(updatedClassesIds);
			setActiveId(classIDToApply);
		}, [
			element.id,
			getAppliedClasses,
			setActiveId,
			setClasses
		]);
	}
	function useUnapplyClasses() {
		const { element } = useElement();
		const { id: activeId, setId: setActiveId } = useStyle();
		const { setClasses, getAppliedClasses } = useClasses();
		return (0, react.useCallback)((classIDsToUnapply) => {
			const appliedClasses = getAppliedClasses();
			if (!classIDsToUnapply.every((classID) => appliedClasses.includes(classID))) {
				const missingClasses = classIDsToUnapply.filter((classID) => !appliedClasses.includes(classID));
				throw new Error(`Classes ${missingClasses.join(", ")} are not applied to element ${element.id}, cannot unapply them.`);
			}
			const updatedClassesIds = appliedClasses.filter((id) => !classIDsToUnapply.includes(id));
			setClasses(updatedClassesIds);
			if (activeId && classIDsToUnapply.includes(activeId)) setActiveId(updatedClassesIds[0] ?? null);
		}, [
			activeId,
			element.id,
			getAppliedClasses,
			setActiveId,
			setClasses
		]);
	}
	function useClasses() {
		const { element } = useElement();
		const currentClassesProp = useClassesProp();
		return (0, react.useMemo)(() => {
			const setClasses = (ids) => {
				doApplyClasses(element.id, ids, currentClassesProp);
			};
			const getAppliedClasses = () => doGetAppliedClasses(element.id, currentClassesProp) || [];
			return {
				setClasses,
				getAppliedClasses
			};
		}, [currentClassesProp, element.id]);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/duplicate-class-menu-item.tsx
	var DUPLICATE_LABEL_PREFIX = "copy-of";
	function getUniqueDuplicateLabel(originalLabel, existingLabels) {
		let newLabel = `${DUPLICATE_LABEL_PREFIX}-${originalLabel}`;
		let counter = 2;
		while (existingLabels.includes(newLabel)) {
			newLabel = `${DUPLICATE_LABEL_PREFIX}-${originalLabel}-${counter}`;
			counter++;
		}
		return newLabel;
	}
	function DuplicateClassMenuItem({ closeMenu }) {
		const { id: classId, provider } = useCssClass();
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		const applyClass = useUndoableApplyClass();
		const [, setPendingEditId] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app");
		if (!provider || !classId) return null;
		const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider);
		const createAction = providerInstance?.actions.create;
		const getAction = providerInstance?.actions.get;
		if (!createAction || !getAction) return null;
		if (!userCan(provider).create) return null;
		const handleDuplicate = () => {
			const styleDef = getAction(classId);
			if (!styleDef) {
				closeMenu();
				return;
			}
			const existingLabels = providerInstance.actions.all().map((style) => style.label);
			const newLabel = getUniqueDuplicateLabel(styleDef.label, existingLabels);
			const newId = createAction(newLabel, styleDef.variants);
			if (newId) {
				applyClass({
					classId: newId,
					classLabel: newLabel
				});
				setPendingEditId(newId);
				trackStyles(provider, "classCreated", {
					classId: newId,
					source: "duplicated",
					classTitle: newLabel
				});
			}
			closeMenu();
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { onClick: handleDuplicate }, (0, _wordpress_i18n.__)("Duplicate", "elementor"));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-can-convert-local-class-to-global.ts
	var useCanConvertLocalClassToGlobal = () => {
		const { element } = useElement();
		const { provider, id, meta } = useStyle();
		const styleDef = provider?.actions.get(id, {
			elementId: element.id,
			...meta
		});
		const isLocalStylesProvider = provider && (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider?.getKey());
		const variants = styleDef?.variants || [];
		return {
			canConvert: !!(isLocalStylesProvider && variants.length),
			isLocalStylesProvider,
			id,
			styleDef: styleDef || null
		};
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/local-class-sub-menu.tsx
	var LocalClassSubMenu = (props) => {
		const { canConvert, styleDef } = useCanConvertLocalClassToGlobal();
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: {
			typography: "caption",
			color: "text.secondary",
			pb: .5,
			pt: 1
		} }, (0, _wordpress_i18n.__)("Local Class", "elementor")), /* @__PURE__ */ react.createElement(CssClassConvert, {
			canConvert,
			styleDef,
			closeMenu: props.popupState.close
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-menu.tsx
	function CssClassMenu({ popupState, anchorEl, fixed }) {
		const { provider } = useCssClass();
		const isLocalStyle = provider ? (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider) : true;
		const pseudoStates = usePseudoStates();
		const handleKeyDown = (e) => {
			e.stopPropagation();
		};
		return /* @__PURE__ */ react.createElement(_elementor_ui.Menu, {
			MenuListProps: {
				dense: true,
				sx: { minWidth: "160px" }
			},
			...(0, _elementor_ui.bindMenu)(popupState),
			anchorEl,
			anchorOrigin: {
				vertical: "bottom",
				horizontal: "left"
			},
			transformOrigin: {
				horizontal: "left",
				vertical: -4
			},
			onKeyDown: handleKeyDown,
			disableAutoFocusItem: true
		}, isLocalStyle && /* @__PURE__ */ react.createElement(LocalClassSubMenu, { popupState }), getMenuItemsByProvider({
			provider,
			closeMenu: popupState.close,
			fixed
		}), /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: {
			typography: "caption",
			color: "text.secondary",
			pb: .5,
			pt: 1
		} }, (0, _wordpress_i18n.__)("States", "elementor")), pseudoStates.map((state) => {
			return /* @__PURE__ */ react.createElement(StateMenuItem, {
				key: state.key,
				state: state.value,
				label: state.label,
				closeMenu: popupState.close
			});
		}), /* @__PURE__ */ react.createElement(ClassStatesMenu, { closeMenu: popupState.close }));
	}
	function ClassStatesMenu({ closeMenu }) {
		const { elementStates, elementTitle } = useElementStates();
		if (!elementStates.length) return null;
		const customTitle = (0, _wordpress_i18n.__)("%s States", "elementor").replace("%s", elementTitle);
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: {
			typography: "caption",
			color: "text.secondary",
			pb: .5,
			pt: 1
		} }, customTitle), elementStates.map((state) => {
			return /* @__PURE__ */ react.createElement(StateMenuItem, {
				key: state.key,
				state: state.value,
				label: state.label,
				closeMenu
			});
		}));
	}
	var CLASS_STATES_MAP = {
		selected: { label: (0, _wordpress_i18n.__)("selected", "elementor") },
		disabled: { label: (0, _wordpress_i18n.__)("disabled", "elementor") }
	};
	function useElementStates() {
		const { elementType } = useElement();
		const { styleStates = [] } = elementType;
		return {
			elementStates: styleStates.map(({ value, name }) => ({
				key: value,
				value,
				label: CLASS_STATES_MAP[value]?.label ?? name
			})),
			elementTitle: elementType.title
		};
	}
	function useModifiedStates(styleId) {
		const { meta } = useStyle();
		const styleDef = _elementor_editor_styles_repository.stylesRepository.all().find((style) => style.id === styleId);
		return Object.fromEntries(styleDef?.variants.filter((variant) => meta.breakpoint === variant.meta.breakpoint && (!(0, _elementor_editor_props.isEmpty)(variant.props) || Boolean(variant.custom_css?.raw?.trim()))).map((variant) => [variant.meta.state ?? "normal", true]) ?? []);
	}
	function getMenuItemsByProvider({ provider, closeMenu, fixed }) {
		if (!provider) return [];
		const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider);
		const providerActions = providerInstance?.actions;
		const canUpdate = providerActions?.update;
		const canDuplicate = providerActions?.create && providerActions?.get;
		const canUnapply = !fixed;
		const actions = [
			canUpdate && /* @__PURE__ */ react.createElement(RenameClassMenuItem, {
				key: "rename-class",
				closeMenu
			}),
			canDuplicate && /* @__PURE__ */ react.createElement(DuplicateClassMenuItem, {
				key: "duplicate-class",
				closeMenu
			}),
			canUnapply && /* @__PURE__ */ react.createElement(UnapplyClassMenuItem, {
				key: "unapply-class",
				closeMenu
			})
		].filter(Boolean);
		if (actions.length) {
			actions.unshift(/* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, {
				key: "provider-label",
				sx: {
					typography: "caption",
					color: "text.secondary",
					pb: .5,
					pt: 1,
					textTransform: "capitalize"
				}
			}, providerInstance?.labels?.singular));
			actions.push(/* @__PURE__ */ react.createElement(_elementor_ui.Divider, { key: "provider-actions-divider" }));
		}
		return actions;
	}
	function StateMenuItem({ state, label, closeMenu, ...props }) {
		const { id: styleId, provider } = useCssClass();
		const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
		const { state: activeState } = meta;
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		const modifiedStates = useModifiedStates(styleId);
		const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
		const isStyled = modifiedStates[state ?? "normal"] ?? false;
		const disabled = !isUpdateAllowed && !isStyled;
		const isActive = styleId === activeId;
		const isSelected = state === activeState && isActive;
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
			...props,
			selected: isSelected,
			disabled,
			sx: { textTransform: "capitalize" },
			onClick: () => {
				if (!isActive) setActiveId(styleId);
				trackStyles(provider ?? "", "classStateClicked", {
					classId: styleId,
					type: label,
					source: styleId ? "global" : "local"
				});
				setActiveMetaState(state);
				closeMenu();
			}
		}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuItemInfotip, {
			showInfoTip: disabled,
			content: (0, _wordpress_i18n.__)("With your current role, you can only use existing states.", "elementor")
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			gap: .75,
			direction: "row",
			alignItems: "center"
		}, isStyled && /* @__PURE__ */ react.createElement(StyleIndicator, {
			"aria-label": (0, _wordpress_i18n.__)("Has style", "elementor"),
			getColor: getTempStylesProviderThemeColor(provider ?? "")
		}), label)));
	}
	function UnapplyClassMenuItem({ closeMenu, ...props }) {
		const { id: classId, label: classLabel, provider } = useCssClass();
		const unapplyClass = useUndoableUnapplyClass();
		return classId ? /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
			...props,
			onClick: () => {
				unapplyClass({
					classId,
					classLabel
				});
				trackStyles(provider ?? "", "classRemoved", {
					classId,
					classTitle: classLabel,
					source: "style-tab"
				});
				closeMenu();
			}
		}, (0, _wordpress_i18n.__)("Remove", "elementor")) : null;
	}
	function RenameClassMenuItem({ closeMenu }) {
		const { handleRename, provider } = useCssClass();
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		if (!provider) return null;
		const isAllowed = userCan(provider).update;
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
			disabled: !isAllowed,
			onClick: () => {
				closeMenu();
				handleRename();
			}
		}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuItemInfotip, {
			showInfoTip: !isAllowed,
			content: (0, _wordpress_i18n.__)("With your current role, you can use existing classes but can't modify them.", "elementor")
		}, (0, _wordpress_i18n.__)("Rename", "elementor")));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-item.tsx
	var CHIP_SIZE = "tiny";
	function CssClassItem(props) {
		const { chipProps, icon, color: colorProp, fixed, ...classProps } = props;
		const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
		const { elementStates } = useElementStates();
		const { meta, setMetaState } = useStyle();
		const popupState = (0, _elementor_ui.usePopupState)({ variant: "popover" });
		const [chipRef, setChipRef] = (0, react.useState)(null);
		const { onDelete, ...chipGroupProps } = chipProps;
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		const [convertedFromLocalId, , clearConvertedFromLocalId] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app");
		const { ref, isEditing, openEditMode, error, getProps: getEditableProps } = (0, _elementor_editor_ui.useEditable)({
			value: label,
			onSubmit: renameLabel,
			validation: validateLabel,
			onError: setError
		});
		const color = error ? "error" : colorProp;
		const providerActions = provider ? _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider)?.actions : null;
		const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
		const isShowingState = isActive && meta.state;
		const stateLabel = (0, react.useMemo)(() => {
			if (meta.state && (0, _elementor_editor_styles.isClassState)(meta.state)) return elementStates.find((state) => state.value === meta.state)?.label;
			return meta.state;
		}, [meta.state, elementStates]);
		(0, react.useEffect)(() => {
			if (convertedFromLocalId && id === convertedFromLocalId) {
				clearConvertedFromLocalId();
				openEditMode();
			}
		}, [id, convertedFromLocalId]);
		return /* @__PURE__ */ react.createElement(_elementor_ui.ThemeProvider, { palette: "default" }, /* @__PURE__ */ react.createElement(_elementor_ui.UnstableChipGroup, {
			ref: setChipRef,
			...chipGroupProps,
			"aria-label": `Edit ${label}`,
			role: "group",
			sx: (theme) => ({ "&.MuiChipGroup-root.MuiAutocomplete-tag": { margin: theme.spacing(.125) } })
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
			size: CHIP_SIZE,
			label: isEditing ? /* @__PURE__ */ react.createElement(_elementor_editor_ui.EditableField, {
				ref,
				...getEditableProps()
			}) : /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, {
				maxWidth: "10ch",
				title: label,
				as: "div"
			}),
			variant: isActive && !meta.state && !isEditing ? "filled" : "standard",
			shape: "rounded",
			icon,
			color,
			onClick: () => {
				if (isShowingState) {
					setMetaState(null);
					return;
				}
				if (allowRename && isActive) {
					openEditMode();
					return;
				}
				onClickActive(id);
			},
			"aria-pressed": isActive,
			sx: (theme) => ({
				lineHeight: 1,
				cursor: isActive && allowRename && !isShowingState ? "text" : "pointer",
				borderRadius: `${theme.shape.borderRadius * .75}px`,
				"&.Mui-focusVisible": { boxShadow: "none !important" }
			})
		}), !isEditing && /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
			icon: isShowingState ? void 0 : /* @__PURE__ */ react.createElement(_elementor_icons.DotsVerticalIcon, { fontSize: "tiny" }),
			size: CHIP_SIZE,
			label: isShowingState ? /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
				direction: "row",
				gap: .5,
				alignItems: "center"
			}, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "inherit" }, stateLabel), /* @__PURE__ */ react.createElement(_elementor_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
			variant: "filled",
			shape: "rounded",
			color,
			...(0, _elementor_ui.bindTrigger)(popupState),
			"aria-label": (0, _wordpress_i18n.__)("Open CSS Class Menu", "elementor"),
			sx: (theme) => ({
				borderRadius: `${theme.shape.borderRadius * .75}px`,
				paddingRight: 0,
				...!isShowingState ? { paddingLeft: 0 } : {},
				".MuiChip-label": isShowingState ? { paddingRight: 0 } : { padding: 0 }
			})
		})), /* @__PURE__ */ react.createElement(CssClassProvider, {
			...classProps,
			handleRename: openEditMode
		}, /* @__PURE__ */ react.createElement(CssClassMenu, {
			popupState,
			anchorEl: chipRef,
			fixed
		})));
	}
	var validateLabel = (newLabel) => {
		const result = (0, _elementor_editor_styles_repository.validateStyleLabel)(newLabel, "rename");
		if (result.isValid) return null;
		return result.errorMessage;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/missing-classes-alert.tsx
	function MissingClassesAlert({ onDismiss }) {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
			severity: "warning",
			onClose: onDismiss,
			size: "small",
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.AlertTriangleFilledIcon, { fontSize: "tiny" }),
			sx: { mt: 1 }
		}, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, (0, _wordpress_i18n.__)("Some classes are missing", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
			variant: "caption",
			color: "primary"
		}, (0, _wordpress_i18n.__)("A class was removed from your site and is no longer active on this element", "elementor")));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-missing-classes.ts
	function useMissingClassesIds() {
		const providers = (0, _elementor_editor_styles_repository.useProviders)();
		const appliedIds = usePanelElementSetting(useClassesProp())?.value ?? [];
		const allKnownIds = new Set(providers.flatMap((provider) => provider.actions.all().map((style) => style.id)));
		return appliedIds.filter((id) => !allKnownIds.has(id));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-selector.tsx
	var ID = "elementor-css-class-selector";
	var TAGS_LIMIT = 50;
	function openClassManagerPanel() {
		window.dispatchEvent(new CustomEvent("elementor/toggle-design-system", { detail: { tab: "classes" } }));
	}
	var EMPTY_OPTION = {
		label: (0, _wordpress_i18n.__)("local", "elementor"),
		value: null,
		fixed: true,
		color: getTempStylesProviderColorName("accent"),
		icon: /* @__PURE__ */ react.createElement(_elementor_icons.MapPinIcon, null),
		provider: null
	};
	var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, _elementor_locations.createLocation)();
	function CssClassSelector() {
		const options = useOptions();
		const { id: activeId, setId: setActiveId } = useStyle();
		const autocompleteRef = (0, react.useRef)(null);
		const [renameError, setRenameError] = (0, react.useState)(null);
		const handleSelect = useHandleSelect();
		const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
		const appliedOptions = useAppliedOptions(options);
		const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
		const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
		const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
		const canEdit = active.provider ? userCan(active.provider).updateProps : true;
		const missingClassesIds = useMissingClassesIds();
		const hasMissingClasses = missingClassesIds.length > 0;
		const unapplyClasses = useUnapplyClasses();
		const clearMissingClasses = (0, react.useCallback)(() => {
			unapplyClasses(missingClassesIds);
		}, [missingClassesIds, unapplyClasses]);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { p: 2 }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			gap: 1,
			alignItems: "center",
			justifyContent: "space-between"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.FormLabel, {
			htmlFor: ID,
			size: "small"
		}, (0, _wordpress_i18n.__)("Classes", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			gap: 1
		}, /* @__PURE__ */ react.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.WarningInfotip, {
			open: Boolean(renameError),
			text: renameError ?? "",
			placement: "bottom",
			width: autocompleteRef.current?.getBoundingClientRect().width,
			offset: [0, -15]
		}, /* @__PURE__ */ react.createElement(CreatableAutocomplete, {
			id: ID,
			ref: autocompleteRef,
			size: "tiny",
			placeholder: showPlaceholder ? (0, _wordpress_i18n.__)("Type class name", "elementor") : void 0,
			options,
			selected: appliedOptions,
			entityName,
			onSelect: handleSelect,
			onCreate: create ?? void 0,
			validate: validate ?? void 0,
			limitTags: TAGS_LIMIT,
			renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ react.createElement(LimitReachedEmptyState, {
				limitCount,
				onClear: props.onClear
			}) : EmptyState,
			getLimitTagsText: (more) => /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
				size: "tiny",
				variant: "standard",
				label: `+${more}`,
				clickable: true
			}),
			renderTags: (values, getTagProps) => values.map((value, index) => {
				const chipProps = getTagProps({ index });
				const isActive = value.value === active?.value;
				const renameLabel = (newLabel) => {
					if (!value.value) throw new Error(`Cannot rename a class without style id`);
					trackStyles(value.provider ?? "", "classRenamed", {
						classId: value.value,
						newValue: newLabel,
						oldValue: value.label,
						source: "style-tab"
					});
					return updateClassByProvider(value.provider, {
						label: newLabel,
						id: value.value
					});
				};
				return /* @__PURE__ */ react.createElement(CssClassItem, {
					key: chipProps.key,
					fixed: value.fixed,
					label: value.label,
					provider: value.provider,
					id: value.value,
					isActive,
					color: isActive && value.color ? value.color : "default",
					icon: value.icon,
					chipProps,
					onClickActive: () => setActiveId(value.value),
					renameLabel,
					setError: setRenameError
				});
			})
		})), hasMissingClasses && /* @__PURE__ */ react.createElement(MissingClassesAlert, { onDismiss: clearMissingClasses }), !canEdit && /* @__PURE__ */ react.createElement(_elementor_editor_ui.InfoAlert, { sx: { mt: 1 } }, (0, _wordpress_i18n.__)("With your current role, you can use existing classes but can’t modify them.", "elementor")));
	}
	var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { py: 4 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap: 1,
		alignItems: "center",
		color: "text.secondary",
		justifyContent: "center",
		sx: {
			px: 2,
			m: "auto",
			maxWidth: "236px"
		}
	}, /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, {
		sx: { transform: "rotate(90deg)" },
		fontSize: "large"
	}), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "subtitle2"
	}, (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ react.createElement("br", null), "“", searchValue, "”."), children, /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
		color: "text.secondary",
		variant: "caption",
		component: "button",
		onClick: onClear
	}, (0, _wordpress_i18n.__)("Clear & try again", "elementor"))));
	var EmptyState = (props) => /* @__PURE__ */ react.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "caption",
		sx: { mb: 2 }
	}, (0, _wordpress_i18n.__)("With your current role,", "elementor"), /* @__PURE__ */ react.createElement("br", null), (0, _wordpress_i18n.__)("you can only use existing classes.", "elementor")));
	var LimitReachedEmptyState = ({ limitCount, onClear }) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { py: 4 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap: 1,
		alignItems: "center",
		color: "text.secondary",
		justifyContent: "center",
		sx: {
			px: 1,
			m: "auto",
			maxWidth: "260px"
		}
	}, /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, {
		sx: { transform: "rotate(90deg)" },
		fontSize: "large"
	}), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "subtitle2"
	}, (0, _wordpress_i18n.__)("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "caption",
		component: "div"
	}, (0, _wordpress_i18n.__)("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
		color: "inherit",
		variant: "caption",
		component: "button",
		onClick: onClear,
		sx: { verticalAlign: "baseline" }
	}, (0, _wordpress_i18n.__)("Clear", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
		variant: "outlined",
		color: "secondary",
		size: "small",
		onClick: () => {
			openClassManagerPanel();
			onClear();
		}
	}, (0, _wordpress_i18n.__)("Class Manager", "elementor"))));
	var updateClassByProvider = (provider, data) => {
		if (!provider) return;
		const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider);
		if (!providerInstance) return;
		return providerInstance.actions.update?.(data);
	};
	function useOptions() {
		const { element } = useElement();
		const isProviderEditable = (provider) => !!provider.actions.updateProps;
		return (0, _elementor_editor_styles_repository.useProviders)().filter(isProviderEditable).filter((provider) => provider.getKey() !== "default-styles").flatMap((provider) => {
			const isElements = (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey());
			const styleDefs = provider.actions.all({ elementId: element.id });
			if (isElements && styleDefs.length === 0) return [EMPTY_OPTION];
			return styleDefs.map((styleDef) => {
				return {
					label: styleDef.label,
					value: styleDef.id,
					fixed: isElements,
					color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())),
					icon: isElements ? /* @__PURE__ */ react.createElement(_elementor_icons.MapPinIcon, null) : null,
					provider: provider.getKey()
				};
			});
		});
	}
	function getTempStylesProviderColorName(color) {
		if (color === "accent") return "primary";
		return color;
	}
	function useCreateAction() {
		const [provider, createAction] = useCreateAndApplyClass();
		if (!provider || !createAction) return {};
		const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
		const validate = (newClassLabel, event) => (0, _elementor_editor_styles_repository.validateStyleLabel)(newClassLabel, event);
		if (hasReachedLimit(provider)) return {
			entityName,
			isAtLimit: true,
			limitCount: provider.limit,
			validate
		};
		const create = (classLabel) => {
			const { createdId } = createAction({ classLabel });
			trackStyles(provider.getKey() ?? "", "classCreated", {
				source: "created",
				classTitle: classLabel,
				classId: createdId
			});
		};
		return {
			create,
			validate,
			entityName,
			isAtLimit: false
		};
	}
	function hasReachedLimit(provider) {
		return provider.actions.all().length >= provider.limit;
	}
	function useAppliedOptions(options) {
		const appliedIds = usePanelElementSetting(useClassesProp())?.value ?? [];
		const appliedOptions = options.filter((option) => option.value && appliedIds.includes(option.value));
		if (!appliedOptions.some((option) => option.provider && (0, _elementor_editor_styles_repository.isElementsStylesProvider)(option.provider))) appliedOptions.unshift(EMPTY_OPTION);
		return appliedOptions;
	}
	function useHandleSelect() {
		const apply = useUndoableApplyClass();
		const unapply = useUndoableUnapplyClass();
		return (_selectedOptions, reason, option) => {
			if (!option.value) return;
			switch (reason) {
				case "selectOption":
					apply({
						classId: option.value,
						classLabel: option.label
					});
					trackStyles(option.provider ?? "", "classApplied", {
						classId: option.value,
						source: "style-tab"
					});
					break;
				case "removeOption":
					unapply({
						classId: option.value,
						classLabel: option.label
					});
					trackStyles(option.provider ?? "", "classRemoved", {
						classId: option.value,
						source: "style-tab"
					});
					break;
			}
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts
	var useStylesRerender = () => {
		const { provider } = useStyle();
		const [, reRender] = (0, react.useReducer)((p) => !p, false);
		(0, react.useEffect)(() => provider?.subscribe(reRender), [provider]);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts
	var HISTORY_DEBOUNCE_WAIT$1 = 800;
	function useStylesFields(propNames) {
		const { element: { id: elementId } } = useElement();
		const { id: styleId, meta, provider, canEdit } = useStyle();
		const undoableUpdateStyle = useUndoableActions$1({
			elementId,
			meta
		});
		useStylesRerender();
		const values = getProps({
			elementId,
			styleId,
			provider,
			meta,
			propNames
		});
		const setValues = (props, { history: { propDisplayName } }) => {
			if (!styleId) undoableUpdateStyle({
				styleId: null,
				provider: null,
				props,
				propDisplayName
			});
			else undoableUpdateStyle({
				styleId,
				provider,
				props,
				propDisplayName
			});
		};
		return {
			values,
			setValues,
			canEdit
		};
	}
	function getProps({ styleId, elementId, provider, meta, propNames }) {
		if (!provider || !styleId) return null;
		const style = provider.actions.get(styleId, { elementId });
		if (!style) throw new StyleNotFoundUnderProviderError({ context: {
			styleId,
			providerKey: provider.getKey()
		} });
		const variant = (0, _elementor_editor_styles.getVariantByMeta)(style, meta);
		return Object.fromEntries(propNames.map((key) => [key, variant?.props[key] ?? null]));
	}
	function useUndoableActions$1({ elementId, meta: { breakpoint, state } }) {
		const classesProp = useClassesProp();
		return (0, react.useMemo)(() => {
			const meta = {
				breakpoint,
				state
			};
			const createStyleArgs = {
				elementId,
				classesProp,
				meta,
				label: _elementor_editor_styles_repository.ELEMENTS_STYLES_RESERVED_LABEL
			};
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: (payload) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload);
					return update(payload);
				},
				undo: (payload, doReturn) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return undoCreate(payload, doReturn);
					return undo(payload, doReturn);
				},
				redo: (payload, doReturn) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload, doReturn);
					return update(payload);
				}
			}, {
				title: ({ provider, styleId }) => getTitle({
					provider,
					styleId,
					elementId
				}),
				subtitle: ({ provider, styleId, propDisplayName }) => getSubtitle({
					provider,
					styleId,
					elementId,
					propDisplayName
				}),
				debounce: { wait: 800 }
			});
			function create({ props }, redoArgs) {
				return { createdStyleId: (0, _elementor_editor_elements.createElementStyle)({
					...createStyleArgs,
					props,
					styleId: redoArgs?.createdStyleId
				}) };
			}
			function undoCreate(_, { createdStyleId }) {
				(0, _elementor_editor_elements.deleteElementStyle)(elementId, createdStyleId);
			}
			function update({ provider, styleId, props }) {
				if (!provider.actions.updateProps) throw new StylesProviderCannotUpdatePropsError({ context: { providerKey: provider.getKey() } });
				const prevProps = getCurrentProps(provider.actions.get(styleId, { elementId }), meta);
				provider.actions.updateProps({
					id: styleId,
					meta,
					props
				}, { elementId });
				return {
					styleId,
					provider,
					prevProps
				};
			}
			function undo(_, { styleId, provider, prevProps }) {
				provider.actions.updateProps?.({
					id: styleId,
					meta,
					props: prevProps,
					mode: "replace"
				}, { elementId });
			}
		}, [
			elementId,
			breakpoint,
			state,
			classesProp
		]);
	}
	__name(useUndoableActions$1, "useUndoableActions");
	function getCurrentProps(style, meta) {
		if (!style) return {};
		const props = (0, _elementor_editor_styles.getVariantByMeta)(style, meta)?.props ?? {};
		return structuredClone(props);
	}
	var defaultHistoryTitles = {
		title: ({ provider }) => {
			const providerLabel = provider.labels?.singular;
			return providerLabel ? capitalize(providerLabel) : (0, _wordpress_i18n.__)("Style", "elementor");
		},
		subtitle: ({ provider, styleId, elementId, propDisplayName }) => {
			const styleLabel = provider.actions.get(styleId, { elementId })?.label;
			if (!styleLabel) throw new Error(`Style ${styleId} not found`);
			return (0, _wordpress_i18n.__)(`%s$1 %s$2 edited`, "elementor").replace("%s$1", styleLabel).replace("%s$2", propDisplayName);
		}
	};
	var localStyleHistoryTitles = {
		title: ({ elementId }) => (0, _elementor_editor_elements.getElementLabel)(elementId),
		subtitle: ({ propDisplayName }) => (0, _wordpress_i18n.__)(`%s edited`, "elementor").replace("%s", propDisplayName)
	};
	function capitalize(str) {
		return str.charAt(0).toUpperCase() + str.slice(1);
	}
	var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey());
	var getTitle = ({ provider, styleId, elementId }) => {
		if (isLocalStyle(provider, styleId)) return localStyleHistoryTitles.title({ elementId });
		return defaultHistoryTitles.title({ provider });
	};
	var getSubtitle = ({ provider, styleId, propDisplayName, elementId }) => {
		if (isLocalStyle(provider, styleId)) return localStyleHistoryTitles.subtitle({ propDisplayName });
		return defaultHistoryTitles.subtitle({
			provider,
			styleId,
			elementId,
			propDisplayName
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-custom-css.ts
	var useCustomCss = () => {
		const { element: { id: elementId } } = useElement();
		const { id: styleId, meta, provider } = useStyle();
		const style = provider?.actions.get(styleId, { elementId });
		const undoableUpdateStyle = useUndoableActions({
			elementId,
			meta
		});
		const currentStyleId = styleId ? styleId : null;
		const currentProvider = styleId ? provider : null;
		useStylesRerender();
		const variant = style ? (0, _elementor_editor_styles.getVariantByMeta)(style, meta) : null;
		const setCustomCss = (raw, { history: { propDisplayName } }) => {
			const newValue = { raw: (0, _elementor_utils.encodeString)(sanitize(raw)) };
			undoableUpdateStyle({
				styleId: currentStyleId,
				provider: currentProvider,
				customCss: newValue,
				propDisplayName
			});
		};
		return {
			customCss: variant?.custom_css?.raw ? { raw: (0, _elementor_utils.decodeString)(variant.custom_css.raw) } : null,
			setCustomCss
		};
	};
	function useUndoableActions({ elementId, meta: { breakpoint, state } }) {
		const classesProp = useClassesProp();
		return (0, react.useMemo)(() => {
			const meta = {
				breakpoint,
				state
			};
			const createStyleArgs = {
				elementId,
				classesProp,
				meta,
				label: _elementor_editor_styles_repository.ELEMENTS_STYLES_RESERVED_LABEL
			};
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: (payload) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload);
					return update(payload);
				},
				undo: (payload, doReturn) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return undoCreate(payload, doReturn);
					return undoUpdate(payload, doReturn);
				},
				redo: (payload, doReturn) => {
					if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload, doReturn);
					return update(payload);
				}
			}, {
				title: ({ provider, styleId }) => getTitle({
					provider,
					styleId,
					elementId
				}),
				subtitle: ({ provider, styleId, propDisplayName }) => getSubtitle({
					provider,
					styleId,
					elementId,
					propDisplayName
				}),
				debounce: { wait: 800 }
			});
			function create({ customCss }, redoArgs) {
				return { createdStyleId: (0, _elementor_editor_elements.createElementStyle)({
					...createStyleArgs,
					props: {},
					custom_css: customCss ?? null,
					styleId: redoArgs?.createdStyleId
				}) };
			}
			function undoCreate(_, { createdStyleId }) {
				(0, _elementor_editor_elements.deleteElementStyle)(elementId, createdStyleId);
			}
			function update({ provider, styleId, customCss }) {
				if (!provider.actions.updateCustomCss) throw new StylesProviderCannotUpdatePropsError({ context: { providerKey: provider.getKey() } });
				const prevCustomCss = getCurrentCustomCss(provider.actions.get(styleId, { elementId }), meta);
				provider.actions.updateCustomCss({
					id: styleId,
					meta,
					custom_css: customCss
				}, { elementId });
				return {
					styleId,
					provider,
					prevCustomCss
				};
			}
			function undoUpdate(_, { styleId, provider, prevCustomCss }) {
				provider.actions.updateCustomCss?.({
					id: styleId,
					meta,
					custom_css: prevCustomCss ?? { raw: "" }
				}, { elementId });
			}
		}, [
			elementId,
			breakpoint,
			state,
			classesProp
		]);
	}
	function getCurrentCustomCss(style, meta) {
		if (!style) return null;
		return (0, _elementor_editor_styles.getVariantByMeta)(style, meta)?.custom_css ?? null;
	}
	function sanitize(raw) {
		return _elementor_editor_props.stringPropTypeUtil.schema.safeParse(_elementor_editor_props.stringPropTypeUtil.create(raw)).data?.value?.trim() ?? "";
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/custom-css-indicator.tsx
	var CustomCssIndicator = () => {
		const { customCss } = useCustomCss();
		const { id: styleId, provider, meta } = useStyle();
		const { element: { id: elementId } } = useElement();
		const style = (0, react.useMemo)(() => styleId && provider ? provider.actions.get(styleId, { elementId }) : null, [
			styleId,
			provider,
			elementId
		]);
		const hasContent = Boolean(customCss?.raw?.trim());
		const hasInheritedContent = (0, react.useMemo)(() => {
			if (hasContent) return false;
			return hasInheritedCustomCss(style, meta);
		}, [
			hasContent,
			style,
			meta
		]);
		if (!hasContent) {
			if (hasInheritedContent) return /* @__PURE__ */ react.createElement(StyleIndicator, null);
			return null;
		}
		return /* @__PURE__ */ react.createElement(StyleIndicator, { getColor: provider ? getStylesProviderThemeColor(provider.getKey()) : void 0 });
	};
	var hasInheritedCustomCss = (style, meta) => {
		if (!style || !meta) return false;
		const target = meta.breakpoint ?? "desktop";
		const root = (0, _elementor_editor_responsive.getBreakpointsTree)();
		const state = meta.state;
		function search(node, ancestorHasCss) {
			if (!style) return;
			const hasHere = Boolean((0, _elementor_editor_styles.getVariantByMeta)(style, {
				breakpoint: node.id,
				state
			})?.custom_css?.raw?.trim());
			if (node.id === target) return ancestorHasCss;
			for (const child of node.children ?? []) {
				const res = search(child, ancestorHasCss || hasHere);
				if (res !== void 0) return res;
			}
		}
		return Boolean(search(root, false));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/editing-panel-replacement-registry.tsx
	var registry = /* @__PURE__ */ new Map();
	var DEFAULT_PRIORITY$1 = 10;
	var registerEditingPanelReplacement = ({ id, priority = DEFAULT_PRIORITY$1, ...props }) => {
		registry.set(id, {
			...props,
			priority
		});
	};
	var getEditingPanelReplacement = (element, elementType) => Array.from(registry.values()).filter(({ condition }) => condition(element, elementType)).sort((a, b) => a.priority - b.priority)?.[0] ?? null;

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-error-fallback.tsx
	function EditorPanelErrorFallback() {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
			role: "alert",
			sx: {
				minHeight: "100%",
				p: 2
			}
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
			severity: "error",
			sx: {
				mb: 2,
				maxWidth: 400,
				textAlign: "center"
			}
		}, /* @__PURE__ */ react.createElement("strong", null, "Something went wrong")));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-sticky-promotion.tsx
	function getStickyPromotion() {
		return window.elementor?.config?.editingPanelStickyPromotion;
	}
	var EditingPanelStickyPromotion = () => {
		const promotion = getStickyPromotion();
		if (!promotion) return null;
		return /* @__PURE__ */ react.createElement("div", { className: "elementor-panel-editor-sticky-promotion" }, /* @__PURE__ */ react.createElement("div", { className: "elementor-get-pro-sticky-message" }, promotion.message, " ", /* @__PURE__ */ react.createElement("a", {
			target: "_blank",
			rel: "noreferrer",
			href: promotion.url
		}, promotion.button_text)));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/contexts/scroll-context.tsx
	var ScrollContext = (0, react.createContext)(void 0);
	var ScrollPanel = (0, _elementor_ui.styled)("div")`
	height: 100%;
	overflow-y: auto;
`;
	var DEFAULT_SCROLL_DIRECTION = "up";
	function ScrollProvider({ children }) {
		const [direction, setDirection] = (0, react.useState)(DEFAULT_SCROLL_DIRECTION);
		const ref = (0, react.useRef)(null);
		const scrollPos = (0, react.useRef)(0);
		(0, react.useEffect)(() => {
			const scrollElement = ref.current;
			if (!scrollElement) return;
			const handleScroll = () => {
				const { scrollTop } = scrollElement;
				if (scrollTop > scrollPos.current) setDirection("down");
				else if (scrollTop < scrollPos.current) setDirection("up");
				scrollPos.current = scrollTop;
			};
			scrollElement.addEventListener("scroll", handleScroll);
			return () => {
				scrollElement.removeEventListener("scroll", handleScroll);
			};
		});
		return /* @__PURE__ */ react.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ react.createElement(ScrollPanel, { ref }, children));
	}
	function useScrollDirection() {
		return (0, react.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts
	var fallbackEditorSettings = {
		defaultSectionsExpanded: {
			settings: ["content", "settings"],
			style: []
		},
		defaultTab: "settings"
	};
	var elementPanelDefaults = {
		"e-div-block": {
			defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
			defaultTab: "style"
		},
		"e-flexbox": {
			defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
			defaultTab: "style"
		},
		"e-grid": {
			defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
			defaultTab: "style"
		},
		"e-divider": {
			defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
			defaultTab: "style"
		}
	};
	function registerElementPanelDefaults(type, defaults) {
		elementPanelDefaults[type] = defaults;
	}
	var useDefaultPanelSettings = () => {
		const { element } = useElement();
		return elementPanelDefaults[element.type] ?? fallbackEditorSettings;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts
	var useStateByElement = (key, initialValue) => {
		const { element } = useElement();
		const lookup = `elementor/editor-state/${element.id}/${key}`;
		const [value, setValue] = (0, react.useState)((0, _elementor_session.getSessionStorageItem)(lookup) ?? initialValue);
		const doUpdate = (newValue) => {
			(0, _elementor_session.setSessionStorageItem)(lookup, newValue);
			setValue(newValue);
		};
		return [value, doUpdate];
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/sections-list.tsx
	function SectionsList(props) {
		return /* @__PURE__ */ react.createElement(_elementor_ui.List, {
			disablePadding: true,
			component: "div",
			...props
		});
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/interactions-tab.tsx
	var InteractionsTab = () => {
		const { element } = useElement();
		return /* @__PURE__ */ react.createElement(SectionsList, null, /* @__PURE__ */ react.createElement(_elementor_editor_interactions.InteractionsTab, { elementId: element.id }));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/prop-dependency-utils.ts
	function getElementSettingsWithDefaults(propsSchema, elementSettings) {
		const elementSettingsWithDefaults = { ...elementSettings };
		Object.keys(propsSchema).forEach((key) => {
			if (elementSettingsWithDefaults[key] === null && propsSchema[key].default !== null) elementSettingsWithDefaults[key] = propsSchema[key].default;
		});
		return elementSettingsWithDefaults;
	}
	function extractDependencyEffect(bind, propsSchema, settings) {
		const settingsWithDefaults = getElementSettingsWithDefaults(propsSchema, settings);
		const propType = propsSchema[bind];
		const depCheck = (0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, settingsWithDefaults);
		const failingTerm = !depCheck.isMet ? depCheck.failingDependencies[0] : void 0;
		return {
			isHidden: !!failingTerm && !(0, _elementor_editor_props.isDependency)(failingTerm) && failingTerm?.effect === "hide",
			isDisabled: (prop) => !(0, _elementor_editor_props.isDependencyMet)(prop?.dependencies, settingsWithDefaults).isMet
		};
	}
	function extractOrderedDependencies(dependenciesPerTargetMapping) {
		return Object.values(dependenciesPerTargetMapping).flat().filter((dependent, index, self) => self.indexOf(dependent) === index);
	}
	function getUpdatedValues(values, dependencies, propsSchema, elementValues, elementId) {
		if (!dependencies.length) return values;
		return dependencies.reduce((newValues, dependency) => {
			const path = dependency.split(".");
			const combinedValues = {
				...elementValues,
				...newValues
			};
			const propType = getPropType(propsSchema, combinedValues, path);
			if (!propType) return newValues;
			const testDependencies = {
				previousValues: (0, _elementor_editor_props.isDependencyMet)(propType.dependencies, elementValues),
				newValues: (0, _elementor_editor_props.isDependencyMet)(propType.dependencies, combinedValues)
			};
			if (!testDependencies.newValues.isMet) {
				const newValue = handleUnmetCondition({
					failingDependencies: testDependencies.newValues.failingDependencies,
					dependency,
					elementValues: combinedValues,
					defaultValue: propType.default,
					elementId
				});
				return {
					...newValues,
					...updateValue(path, newValue, combinedValues)
				};
			}
			if (!testDependencies.previousValues.isMet) {
				const savedValue = retrievePreviousValueFromStorage({
					path: dependency,
					elementId
				});
				const currentValue = (0, _elementor_editor_props.extractValue)(path, combinedValues, [], { unwrapOverridableLeaf: false });
				removePreviousValueFromStorage({
					path: dependency,
					elementId
				});
				const restored = isCompatibleSavedValue(savedValue, currentValue) ? savedValue : propType.default;
				return {
					...newValues,
					...updateValue(path, restored, combinedValues)
				};
			}
			return newValues;
		}, { ...values });
	}
	function getPropType(schema, elementValues, path) {
		if (!path.length) return null;
		const [basePropKey, ...keys] = path;
		const baseProp = schema[basePropKey];
		if (!baseProp) return null;
		return keys.reduce((prop, key, index) => evaluatePropType({
			prop,
			key,
			index,
			path,
			elementValues,
			basePropKey
		}), baseProp);
	}
	function evaluatePropType(props) {
		const { prop } = props;
		if (!prop?.kind) return null;
		const { key, index, path, elementValues, basePropKey } = props;
		switch (prop.kind) {
			case "union":
				const type = (0, _elementor_editor_props.extractValue)(path.slice(0, index + 1), elementValues)?.$$type ?? null;
				return getPropType({ [basePropKey]: prop.prop_types?.[type] }, elementValues, path.slice(0, index + 2));
			case "array": return prop.item_prop_type;
			case "object": return prop.shape[key];
		}
		return prop[key];
	}
	function updateValue(path, value, values) {
		const topPropKey = path[0];
		const root = { ...values };
		let carry = root;
		for (let index = 0; index < path.length; index++) {
			const key = path[index];
			if (index === path.length - 1) {
				carry[key] = mergeLeafValue(carry[key], value);
				break;
			}
			const next = cloneDescent(carry[key]);
			if (!next) break;
			carry[key] = next.replacement;
			carry = next.descended;
		}
		return { [topPropKey]: root[topPropKey] ?? null };
	}
	function cloneDescent(child) {
		if (!child) return null;
		if ((0, _elementor_editor_props.isOverridable)(child)) {
			const origin = child.value.origin_value;
			if (!origin || !(0, _elementor_editor_props.isTransformable)(origin)) return null;
			const descended = { ...origin.value };
			return {
				replacement: {
					...child,
					value: {
						...child.value,
						origin_value: {
							...origin,
							value: descended
						}
					}
				},
				descended
			};
		}
		if ((0, _elementor_editor_props.isTransformable)(child)) {
			const descended = { ...child.value };
			return {
				replacement: {
					...child,
					value: descended
				},
				descended
			};
		}
		return null;
	}
	function isCompatibleSavedValue(saved, current) {
		if (!saved) return false;
		return (0, _elementor_editor_props.isOverridable)(saved) === (0, _elementor_editor_props.isOverridable)(current);
	}
	function mergeLeafValue(existing, incoming) {
		if (incoming === null) return null;
		if (incoming && (0, _elementor_editor_props.isOverridable)(incoming)) return incoming;
		if (existing && (0, _elementor_editor_props.isOverridable)(existing) && incoming) return (0, _elementor_editor_props.rewrapOverridableValue)(existing, incoming);
		return incoming;
	}
	function handleUnmetCondition(props) {
		const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
		const newValue = failingDependencies.find((term) => "newValue" in term && !!term.newValue)?.newValue ?? null;
		savePreviousValueToStorage({
			path: dependency,
			elementId,
			value: (0, _elementor_editor_props.extractValue)(dependency.split("."), elementValues, [], { unwrapOverridableLeaf: false }) ?? defaultValue
		});
		return newValue;
	}
	function savePreviousValueToStorage({ path, elementId, value }) {
		const prefix = `elementor/${elementId}`;
		if (retrievePreviousValueFromStorage({
			path,
			elementId
		})) return;
		(0, _elementor_session.setSessionStorageItem)(`${prefix}:${path}`, value);
	}
	function retrievePreviousValueFromStorage({ path, elementId }) {
		return (0, _elementor_session.getSessionStorageItem)(`${`elementor/${elementId}`}:${path}`) ?? null;
	}
	function removePreviousValueFromStorage({ path, elementId }) {
		(0, _elementor_session.removeSessionStorageItem)(`${`elementor/${elementId}`}:${path}`);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/section.tsx
	function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) {
		const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
		const ref = (0, react.useRef)(null);
		const isDisabled = !!action;
		const handleClick = () => {
			if (isDisabled) action?.onClick();
			else setIsOpen(!isOpen);
		};
		const id = (0, react.useId)();
		const labelId = `label-${id}`;
		const contentId = `content-${id}`;
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.ListItemButton, {
			id: labelId,
			"aria-controls": contentId,
			"aria-label": `${title} section`,
			onClick: handleClick,
			sx: { "&:hover": { backgroundColor: "transparent" } }
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			alignItems: "center",
			justifyItems: "start",
			flexGrow: 1,
			gap: .5
		}, /* @__PURE__ */ react.createElement(_elementor_ui.ListItemText, {
			secondary: title,
			secondaryTypographyProps: {
				color: "text.primary",
				variant: "caption",
				fontWeight: "bold"
			},
			sx: {
				flexGrow: 0,
				flexShrink: 1,
				marginInlineEnd: 1
			}
		}), (0, _elementor_editor_ui.getCollapsibleValue)(titleEnd, isOpen)), action?.component, /* @__PURE__ */ react.createElement(_elementor_editor_ui.CollapseIcon, {
			open: isOpen,
			color: "secondary",
			fontSize: "tiny",
			disabled: isDisabled,
			sx: { ml: 1 }
		})), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, {
			id: contentId,
			"aria-labelledby": labelId,
			in: isOpen,
			timeout: "auto",
			unmountOnExit
		}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			ref,
			gap: 2.5,
			p: 2,
			"aria-label": `${title} section content`
		}, children))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx
	var __defProp = Object.defineProperty;
	var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
		enumerable: true,
		configurable: true,
		writable: true,
		value
	}) : obj[key] = value;
	var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
	var queryArrayPropTypeUtil = (0, _elementor_editor_props.createArrayPropUtils)(_elementor_editor_props.queryPropTypeUtil.key, _elementor_editor_props.queryPropTypeUtil.schema);
	var controlTypes$1 = {
		image: {
			component: _elementor_editor_controls.ImageControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.imagePropTypeUtil
		},
		"svg-media": {
			component: _elementor_editor_controls.SvgMediaControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.svgSrcPropTypeUtil
		},
		text: {
			component: _elementor_editor_controls.TextControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		textarea: {
			component: _elementor_editor_controls.TextAreaControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		size: {
			component: _elementor_editor_controls.SizeControl,
			layout: "two-columns",
			propTypeUtil: _elementor_editor_props.sizePropTypeUtil
		},
		select: {
			component: _elementor_editor_controls.SelectControlWrapper,
			layout: "two-columns",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		chips: {
			component: _elementor_editor_controls.ChipsControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.stringArrayPropTypeUtil
		},
		link: {
			component: _elementor_editor_controls.LinkControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.linkPropTypeUtil
		},
		query: {
			component: _elementor_editor_controls.QueryControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.queryPropTypeUtil
		},
		"query-chips": {
			component: _elementor_editor_controls.QueryChipsControl,
			layout: "full",
			propTypeUtil: queryArrayPropTypeUtil
		},
		"query-filter-repeater": {
			component: _elementor_editor_controls.QueryFilterRepeaterControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.queryFilterArrayPropTypeUtil
		},
		url: {
			component: _elementor_editor_controls.UrlControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		switch: {
			component: _elementor_editor_controls.SwitchControl,
			layout: "two-columns",
			propTypeUtil: _elementor_editor_props.booleanPropTypeUtil
		},
		number: {
			component: _elementor_editor_controls.NumberControl,
			layout: "two-columns",
			propTypeUtil: _elementor_editor_props.numberPropTypeUtil
		},
		repeatable: {
			component: _elementor_editor_controls.RepeatableControl,
			layout: "full",
			propTypeUtil: void 0
		},
		"key-value": {
			component: _elementor_editor_controls.KeyValueControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.keyValuePropTypeUtil
		},
		"html-tag": {
			component: _elementor_editor_controls.HtmlTagControl,
			layout: "two-columns",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		toggle: {
			component: _elementor_editor_controls.ToggleControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		},
		"date-time": {
			component: _elementor_editor_controls.DateTimeControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.DateTimePropTypeUtil
		},
		video: {
			component: _elementor_editor_controls.VideoMediaControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.videoSrcPropTypeUtil
		},
		"inline-editing": {
			component: _elementor_editor_controls.InlineEditingControl,
			layout: "full",
			propTypeUtil: _elementor_editor_props.escapedHtmlPropTypeUtil
		},
		email: {
			component: _elementor_editor_controls.EmailFormActionControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.emailsPropTypeUtil
		},
		"date-range": {
			component: _elementor_editor_controls.DateRangeControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.dateRangePropTypeUtil
		},
		"time-range": {
			component: _elementor_editor_controls.TimeRangeControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.timeRangePropTypeUtil
		},
		"attachment-type": {
			component: _elementor_editor_controls.AttachmentTypeControl,
			layout: "custom",
			propTypeUtil: _elementor_editor_props.stringPropTypeUtil
		}
	};
	var ControlsRegistry = class {
		constructor(controlsRegistry2) {
			__publicField(this, "controlsRegistry", controlsRegistry2);
			this.controlsRegistry = controlsRegistry2;
		}
		get(type) {
			return this.controlsRegistry[type]?.component;
		}
		getLayout(type) {
			return this.controlsRegistry[type]?.layout;
		}
		getPropTypeUtil(type) {
			return this.controlsRegistry[type]?.propTypeUtil;
		}
		registry() {
			return this.controlsRegistry;
		}
		register(type, component, layout, propTypeUtil) {
			if (this.controlsRegistry[type]) throw new ControlTypeAlreadyRegisteredError({ context: { controlType: type } });
			this.controlsRegistry[type] = {
				component,
				layout,
				propTypeUtil
			};
		}
		unregister(type) {
			if (!this.controlsRegistry[type]) throw new ControlTypeNotRegisteredError({ context: { controlType: type } });
			delete this.controlsRegistry[type];
		}
	};
	var controlsRegistry = new ControlsRegistry(controlTypes$1);

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx
	var Control$1 = /* @__PURE__ */ __name(({ props, type }) => {
		const ControlByType = controlsRegistry.get(type);
		const { element } = useElement();
		if (!ControlByType) throw new ControlTypeNotFoundError({ context: { controlType: type } });
		return /* @__PURE__ */ react.createElement(ControlByType, {
			...props,
			context: { elementId: element.id }
		});
	}, "Control");

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/control-type-container.tsx
	var ControlTypeContainer = ({ children, layout }) => {
		if (layout === "custom") return children;
		return /* @__PURE__ */ react.createElement(StyledContainer, { layout }, children);
	};
	var StyledContainer = (0, _elementor_ui.styled)(_elementor_ui.Box, { shouldForwardProp: (prop) => !["layout"].includes(prop) })(({ layout, theme }) => ({
		display: "grid",
		gridGap: theme.spacing(1),
		...getGridLayout(layout)
	}));
	var getGridLayout = (layout) => ({
		justifyContent: "space-between",
		...getStyleByLayout(layout)
	});
	var getStyleByLayout = (layout) => {
		if (layout === "full") return { gridTemplateColumns: "minmax(0, 1fr)" };
		if (layout === "two-columns") return {
			alignItems: "center",
			gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
		};
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts
	var createTopLevelObjectType = ({ schema }) => {
		return {
			key: "",
			kind: "object",
			meta: {},
			settings: {},
			default: null,
			shape: schema
		};
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx
	var HISTORY_DEBOUNCE_WAIT = 800;
	var SettingsField = ({ bind, children, propDisplayName }) => {
		const { element: { id: elementId }, elementType: { propsSchema, dependenciesPerTargetMapping = {} }, settings: currentElementSettings } = useElement();
		const value = { [bind]: currentElementSettings?.[bind] ?? null };
		const propType = createTopLevelObjectType({ schema: propsSchema });
		const undoableUpdateElementProp = useUndoableUpdateElementProp({
			elementId,
			propDisplayName
		});
		const { isDisabled, isHidden } = extractDependencyEffect(bind, propsSchema, currentElementSettings);
		if (isHidden) return null;
		const setValue = (newValue, _ = {}, meta) => {
			const { withHistory = true } = meta ?? {};
			const dependents = extractOrderedDependencies(dependenciesPerTargetMapping);
			const settingsWithDefaults = getElementSettingsWithDefaults(propsSchema, currentElementSettings);
			const settings = getUpdatedValues(newValue, dependents, propsSchema, settingsWithDefaults, elementId);
			if (withHistory) undoableUpdateElementProp(settings);
			else (0, _elementor_editor_elements.updateElementSettings)({
				id: elementId,
				props: settings,
				withHistory: false
			});
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			propType,
			value,
			setValue,
			isDisabled
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, children));
	};
	function useUndoableUpdateElementProp({ elementId, propDisplayName }) {
		return (0, react.useMemo)(() => {
			return (0, _elementor_editor_v1_adapters.undoable)({
				do: (newSettings) => {
					const prevPropValue = (0, _elementor_editor_elements.getElementSettings)(elementId, Object.keys(newSettings));
					(0, _elementor_editor_elements.updateElementSettings)({
						id: elementId,
						props: newSettings,
						withHistory: false
					});
					(0, _elementor_editor_documents.setDocumentModifiedStatus)(true);
					return prevPropValue;
				},
				undo: ({}, prevProps) => {
					(0, _elementor_editor_elements.updateElementSettings)({
						id: elementId,
						props: prevProps,
						withHistory: false
					});
				}
			}, {
				title: (0, _elementor_editor_elements.getElementLabel)(elementId),
				subtitle: (0, _wordpress_i18n.__)("%s edited", "elementor").replace("%s", propDisplayName),
				debounce: { wait: HISTORY_DEBOUNCE_WAIT }
			});
		}, [elementId, propDisplayName]);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts
	var indicatorsRegistry = {
		settings: /* @__PURE__ */ new Map(),
		styles: /* @__PURE__ */ new Map()
	};
	var DEFAULT_PRIORITY = 10;
	var FIELD_TYPE = {
		SETTINGS: "settings",
		STYLES: "styles"
	};
	var registerFieldIndicator = ({ fieldType, id, indicator, priority = DEFAULT_PRIORITY }) => {
		indicatorsRegistry[fieldType].set(id, {
			id,
			indicator,
			priority
		});
	};
	var getFieldIndicators = (fieldType) => Array.from(indicatorsRegistry[fieldType].values()).sort((a, b) => a.priority - b.priority).map(({ id, indicator: Adornment }) => ({
		id,
		Adornment
	}));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/settings-control.tsx
	var Wrapper$1 = (0, _elementor_ui.styled)("span")`
	display: contents;
`;
	var SettingsControl = ({ control: { value, type } }) => {
		if (!controlsRegistry.get(value.type)) return null;
		const layout = value.meta?.layout || controlsRegistry.getLayout(value.type);
		const controlProps = populateChildControlProps(value.props);
		if (layout === "custom") controlProps.label = value.label;
		if (type === "element-control") return /* @__PURE__ */ react.createElement(ControlLayout, {
			control: value,
			layout,
			controlProps
		});
		return /* @__PURE__ */ react.createElement(SettingsField, {
			bind: value.bind,
			propDisplayName: value.label || value.bind
		}, /* @__PURE__ */ react.createElement(ControlLayout, {
			control: value,
			layout,
			controlProps
		}));
	};
	var ControlLayout = ({ control, layout, controlProps }) => {
		const controlType = control.type;
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, control.meta?.topDivider && /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(Wrapper$1, { "data-type": "settings-field" }, /* @__PURE__ */ react.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ react.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ react.createElement(Control$1, {
			type: controlType,
			props: controlProps
		}))));
	};
	function populateChildControlProps(props) {
		if (props.childControlType) {
			const childComponent = controlsRegistry.get(props.childControlType);
			const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType);
			props = {
				...props,
				childControlConfig: {
					component: childComponent,
					props: props.childControlProps || {},
					propTypeUtil: childPropType
				}
			};
		}
		return props;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/settings-tab.tsx
	var SettingsTab = () => {
		const { elementType, element, settings } = useElement();
		const settingsDefault = useDefaultPanelSettings();
		const currentSettings = settings;
		const isDefaultExpanded = (sectionId) => !!sectionId && settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
		return /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ react.createElement(SectionsList, null, elementType.controls.map((control, index) => {
			if (isControl(control)) return /* @__PURE__ */ react.createElement(SettingsControl, {
				key: getKey(control, element),
				control
			});
			const { type, value } = control;
			if (type === "section") {
				const sectionItems = renderSectionItems({
					items: value.items,
					element,
					propsSchema: elementType.propsSchema,
					settings: currentSettings
				});
				if (!sectionItems.length) return null;
				return /* @__PURE__ */ react.createElement(Section, {
					title: value.label,
					key: type + "." + index,
					defaultExpanded: isDefaultExpanded(value.id)
				}, sectionItems);
			}
			return null;
		})));
	};
	function getKey(control, element) {
		if (control.type === "control") return control.value.bind + "." + element.id;
		return control.value.type + "." + element.id;
	}
	function isControl(control) {
		return control.type === "control" || control.type === "element-control";
	}
	function renderSectionItems({ items, element, propsSchema, settings }) {
		return items?.flatMap((item) => {
			if (!isControl(item)) return [];
			if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings)) return [];
			return [/* @__PURE__ */ react.createElement(SettingsControl, {
				key: getKey(item, element),
				control: item
			})];
		}) ?? [];
	}
	function isControlHiddenByDependencies(control, propsSchema, settings) {
		const { isHidden } = extractDependencyEffect(control.value.bind, propsSchema, settings);
		return isHidden;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-default-style-tag-from-preview.ts
	function useDefaultStyleTagFromPreview(elementId) {
		return (0, _elementor_editor_v1_adapters.__privateUseListenTo)([
			(0, _elementor_editor_v1_adapters.windowEvent)("elementor/preview/atomic-widget/render"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/set-settings"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/select")
		], () => (0, _elementor_editor_elements.getDefaultStyleTagFromPreviewElement)(elementId));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts
	var DEFAULT_STATE = "normal";
	var DEFAULT_BREAKPOINT$2 = "desktop";
	var getStateKey = (state) => state ?? "normal";
	var getBreakpointKey = (breakpoint) => breakpoint ?? DEFAULT_BREAKPOINT$2;
	var getValueFromInheritanceChain = (inheritanceChain, styleId, meta) => inheritanceChain.find(({ style, variant: { meta: { breakpoint, state } } }) => style.id === styleId && breakpoint === meta.breakpoint && state === meta.state);

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/create-snapshots-manager.ts
	function createSnapshotsManager(getStylesByMeta, breakpointsRoot) {
		const breakpointsInheritancePaths = makeBreakpointsInheritancePaths(breakpointsRoot);
		const allBreakpointStatesSnapshots = {};
		const buildMissingSnapshotsForBreakpoint = (currentBreakpointId, parentBreakpoint, state) => {
			const currentBreakpointKey = getBreakpointKey(currentBreakpointId);
			const stateKey = getStateKey(state);
			if (!allBreakpointStatesSnapshots[currentBreakpointKey]) allBreakpointStatesSnapshots[currentBreakpointKey] = { [DEFAULT_STATE]: buildStateSnapshotSlot(getStylesByMeta({
				breakpoint: currentBreakpointId,
				state: null
			}), parentBreakpoint, {}, null) };
			if (state && !allBreakpointStatesSnapshots[currentBreakpointKey]?.[stateKey]) allBreakpointStatesSnapshots[currentBreakpointKey][stateKey] = buildStateSnapshotSlot(getStylesByMeta({
				breakpoint: currentBreakpointId,
				state
			}), parentBreakpoint, allBreakpointStatesSnapshots[currentBreakpointKey] ?? {}, state);
		};
		return (meta) => {
			const { breakpoint, state } = meta;
			const stateKey = getStateKey(state);
			const breakpointKey = getBreakpointKey(breakpoint);
			if (allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]) return allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]?.snapshot;
			const breakpointsChain = [...breakpointsInheritancePaths[breakpointKey], breakpoint];
			breakpointsChain.forEach((breakpointId, index) => {
				const parentBreakpointId = index > 0 ? breakpointsChain[index - 1] : null;
				buildMissingSnapshotsForBreakpoint(breakpointId, parentBreakpointId ? allBreakpointStatesSnapshots[parentBreakpointId] : void 0, state);
			});
			return allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]?.snapshot;
		};
	}
	function makeBreakpointsInheritancePaths(root) {
		const breakpoints = {};
		const traverse = (node, parent) => {
			const { id, children } = node;
			breakpoints[id] = parent ? [...parent] : [];
			children?.forEach((child) => {
				traverse(child, [...breakpoints[id] ?? [], id]);
			});
		};
		traverse(root);
		return breakpoints;
	}
	function buildStateSnapshotSlot(styles, parentBreakpoint, currentBreakpoint, state) {
		const initialSlot = buildInitialSnapshotFromStyles(styles);
		if (!state) return {
			snapshot: mergeSnapshots([initialSlot.snapshot, parentBreakpoint?.[DEFAULT_STATE]?.snapshot]),
			stateSpecificSnapshot: void 0
		};
		return {
			snapshot: mergeSnapshots([
				initialSlot.snapshot,
				parentBreakpoint?.[state]?.stateSpecificSnapshot,
				currentBreakpoint[DEFAULT_STATE]?.snapshot
			]),
			stateSpecificSnapshot: mergeSnapshots([initialSlot.stateSpecificSnapshot, parentBreakpoint?.[state]?.stateSpecificSnapshot])
		};
	}
	function buildInitialSnapshotFromStyles(styles) {
		const snapshot = {};
		styles.forEach((styleData) => {
			const { variant: { props } } = styleData;
			Object.entries(props).forEach(([key, value]) => {
				const filteredValue = (0, _elementor_editor_props.filterEmptyValues)(value);
				const filteredVariableValue = filteredValue?.$$type?.includes("variable") && !(0, _elementor_editor_variables.hasVariable)(filteredValue?.value) ? null : filteredValue;
				if (filteredVariableValue === null) return;
				if (!snapshot[key]) snapshot[key] = [];
				const snapshotPropValue = {
					...styleData,
					value: filteredVariableValue
				};
				snapshot[key].push(snapshotPropValue);
			});
		});
		return {
			snapshot,
			stateSpecificSnapshot: snapshot
		};
	}
	function mergeSnapshots(snapshots) {
		const snapshot = {};
		snapshots.filter(Boolean).forEach((currentSnapshot) => Object.entries(currentSnapshot).forEach(([key, values]) => {
			if (!snapshot[key]) snapshot[key] = [];
			snapshot[key] = snapshot[key].concat(values);
		}));
		return snapshot;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/create-styles-inheritance.ts
	function createStylesInheritance(styleDefs, breakpointsRoot) {
		const styleVariantsByMeta = buildStyleVariantsByMetaMapping(styleDefs);
		const getStyles = ({ breakpoint, state }) => styleVariantsByMeta?.[getBreakpointKey(breakpoint)]?.[getStateKey(state)] ?? [];
		return {
			getSnapshot: createSnapshotsManager(getStyles, breakpointsRoot),
			getInheritanceChain: (snapshot, path, topLevelPropType) => {
				const [field, ...nextFields] = path;
				let inheritanceChain = snapshot[field] ?? [];
				if (nextFields.length > 0) {
					const filterPropType = getFilterPropType(topLevelPropType, nextFields);
					inheritanceChain = inheritanceChain.map(({ value: styleValue, ...rest }) => ({
						...rest,
						value: getValueByPath(styleValue, nextFields, filterPropType)
					})).filter(({ value: styleValue }) => !(0, _elementor_editor_props.isEmpty)(styleValue));
				}
				return inheritanceChain;
			}
		};
	}
	function buildStyleVariantsByMetaMapping(styleDefs) {
		const breakpointStateSlots = {};
		styleDefs.forEach((styleDef) => {
			const provider = getProviderByStyleId(styleDef.id)?.getKey() ?? null;
			styleDef.variants.forEach((variant) => {
				const { meta } = variant;
				const { state, breakpoint } = meta;
				const breakpointKey = getBreakpointKey(breakpoint);
				const stateKey = getStateKey(state);
				if (!breakpointStateSlots[breakpointKey]) breakpointStateSlots[breakpointKey] = {};
				const breakpointNode = breakpointStateSlots[breakpointKey];
				if (!breakpointNode[stateKey]) breakpointNode[stateKey] = [];
				breakpointNode[stateKey].push({
					style: styleDef,
					variant,
					provider
				});
			});
		});
		return breakpointStateSlots;
	}
	function getValueByPath(value, path, filterPropType) {
		if (!value || typeof value !== "object") return null;
		if (shouldUseOriginalValue(filterPropType, value)) return value;
		return path.reduce((currentScope, key) => {
			if (!currentScope) return null;
			if ((0, _elementor_editor_props.isTransformable)(currentScope)) return currentScope.value?.[key] ?? null;
			if (typeof currentScope === "object") return currentScope[key] ?? null;
			return null;
		}, value);
	}
	function shouldUseOriginalValue(filterPropType, value) {
		return !!filterPropType && (0, _elementor_editor_props.isTransformable)(value) && filterPropType.key !== value.$$type;
	}
	var getFilterPropType = (propType, path) => {
		if (!propType || propType.kind !== "union") return null;
		return Object.values(propType.prop_types).find((type) => {
			return !!path.reduce((currentScope, key) => {
				if (currentScope?.kind !== "object") return null;
				const { shape } = currentScope;
				if (shape[key]) return shape[key];
				return null;
			}, type);
		}) ?? null;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx
	var Context = (0, react.createContext)(null);
	function StyleInheritanceProvider({ children }) {
		const { getSnapshot, getInheritanceChain } = createStylesInheritance(useAppliedStyles(), (0, _elementor_editor_responsive.getBreakpointsTree)());
		return /* @__PURE__ */ react.createElement(Context.Provider, { value: {
			getSnapshot,
			getInheritanceChain
		} }, children);
	}
	function useStylesInheritanceSnapshot() {
		const context = (0, react.useContext)(Context);
		const { meta } = useStyle();
		if (!context) throw new Error("useStylesInheritanceSnapshot must be used within a StyleInheritanceProvider");
		if (!meta) return null;
		return context.getSnapshot(meta) ?? null;
	}
	function useStylesInheritanceChain(path) {
		const context = (0, react.useContext)(Context);
		if (!context) throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider");
		const topLevelPropType = (0, _elementor_editor_styles.getStylesSchema)()?.[path[0]];
		const snapshot = useStylesInheritanceSnapshot();
		if (!snapshot) return [];
		return context.getInheritanceChain(snapshot, path, topLevelPropType);
	}
	var EMPTY_INHERITED_VALUES = {};
	function useInheritedValues(propKeys) {
		const snapshot = useStylesInheritanceSnapshot();
		return (0, react.useMemo)(() => {
			if (!snapshot || propKeys.length === 0) return EMPTY_INHERITED_VALUES;
			return Object.fromEntries(propKeys.map((key) => [key, snapshot[key]?.[0]?.value ?? null]));
		}, [snapshot, propKeys]);
	}
	var useAppliedStyles = () => {
		const currentClassesProp = useClassesProp();
		const baseStyles = useBaseStyles();
		const defaultTagStyleId = useDefaultTagStyleId();
		const { id: activeStyleId } = useStyle();
		useStylesRerender();
		const classesProp = usePanelElementSetting(currentClassesProp);
		const appliedStyles = _elementor_editor_props.classesPropTypeUtil.extract(classesProp) ?? [];
		const applicableIds = [
			...baseStyles,
			...appliedStyles,
			...defaultTagStyleId ? [defaultTagStyleId] : [],
			...activeStyleId ? [activeStyleId] : []
		];
		return _elementor_editor_styles_repository.stylesRepository.all().filter((style) => applicableIds.includes(style.id));
	};
	var useBaseStyles = () => {
		const { elementType } = useElement();
		const widgetCache = (0, _elementor_editor_elements.getWidgetsCache)()?.[elementType.key];
		return Object.keys(widgetCache?.base_styles ?? {});
	};
	var useDefaultTagStyleId = () => {
		const { element } = useElement();
		return useDefaultStyleTagFromPreview(element.id);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-active-style-def-id.ts
	function useActiveStyleDefId(classProp) {
		const [activeStyledDefId, setActiveStyledDefId] = useStateByElement("active-style-id", null);
		const appliedClassesIds = usePanelElementSetting(classProp)?.value || [];
		const validAppliedClassesIds = useValidClassIds(appliedClassesIds);
		const fallback = useFirstAppliedClass(appliedClassesIds);
		return [useActiveAndAppliedClassId(activeStyledDefId, validAppliedClassesIds) || fallback?.id || null, setActiveStyledDefId];
	}
	function useValidClassIds(appliedClassesIds) {
		const providers = (0, _elementor_editor_styles_repository.useProviders)();
		const allKnownIds = new Set(providers.flatMap((provider) => provider.actions.all().map((style) => style.id)));
		return appliedClassesIds.filter((id) => allKnownIds.has(id));
	}
	function useFirstAppliedClass(appliedClassesIds) {
		const { element } = useElement();
		const stylesDefs = (0, _elementor_editor_elements.getElementStyles)(element.id) ?? {};
		return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
	}
	function useActiveAndAppliedClassId(id, appliedClassesIds) {
		return !!id && appliedClassesIds.includes(id) ? id : null;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts
	function useStylesField(propName, meta) {
		const { values, setValues, canEdit } = useStylesFields([propName]);
		const value = values?.[propName] ?? null;
		const setValue = (newValue) => {
			setValues({ [propName]: newValue }, meta);
		};
		return {
			value,
			setValue,
			canEdit
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/conditional-field.tsx
	var ConditionalField = ({ children }) => {
		const { propType, value, resetValue } = (0, _elementor_editor_controls.useBoundProp)();
		const depList = getDependencies(propType);
		const { values: depValues, setValues: setDepValues } = useStylesFields(depList);
		const inheritedValues = useInheritedValues(depList);
		const resolvedValues = resolveWithInherited(depValues, inheritedValues);
		const isHidden = !(0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, resolvedValues).isMet;
		useSyncDepsWithInherited({
			isHidden,
			depValues,
			value,
			inheritedValues,
			setDepValues,
			resetValue
		});
		return isHidden ? null : children;
	};
	function wasDepsCleared(prevDepValues, depValues) {
		if (!prevDepValues) return false;
		return Object.keys(prevDepValues).some((key) => prevDepValues[key] && (!depValues || !depValues[key]));
	}
	function useSyncDepsWithInherited({ isHidden, depValues, value, inheritedValues, setDepValues, resetValue }) {
		const syncRef = (0, react.useRef)({
			hasSynced: false,
			prevDepValues: depValues
		});
		(0, react.useEffect)(() => {
			const { hasSynced, prevDepValues } = syncRef.current;
			if (hasSynced && value && wasDepsCleared(prevDepValues, depValues) || isHidden && depValues && value) resetValue();
			if (isHidden || !value || !depValues) {
				syncRef.current = {
					hasSynced: false,
					prevDepValues: depValues
				};
				return;
			}
			if (hasSynced) {
				syncRef.current.prevDepValues = depValues;
				return;
			}
			syncRef.current = {
				hasSynced: true,
				prevDepValues: depValues
			};
			Object.entries(depValues).forEach(([key, depValue]) => {
				const inherited = inheritedValues[key];
				if (!depValue && inherited) setDepValues({ [key]: inherited }, { history: { propDisplayName: key } });
			});
		}, [
			isHidden,
			depValues,
			value,
			inheritedValues,
			setDepValues,
			resetValue
		]);
	}
	function resolveWithInherited(localValues, inheritedValues) {
		if (!localValues) return Object.keys(inheritedValues).length > 0 ? { ...inheritedValues } : null;
		return Object.fromEntries(Object.entries(localValues).map(([key, val]) => [key, val ?? inheritedValues[key] ?? null]));
	}
	function getDependencies(propType) {
		if (!propType?.dependencies?.terms.length) return [];
		return propType.dependencies.terms.flatMap((term) => !(0, _elementor_editor_props.isDependency)(term) ? term.path : []);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx
	var DIMENSION_SIDES = [
		"block-start",
		"block-end",
		"inline-start",
		"inline-end"
	];
	function buildResolvedPlaceholder(chain, startIndex) {
		const firstEntry = chain[startIndex];
		if (!firstEntry) return;
		const firstValue = firstEntry.value;
		if (!_elementor_editor_props.dimensionsPropTypeUtil.isValid(firstValue)) return firstValue;
		const firstDims = _elementor_editor_props.dimensionsPropTypeUtil.extract(firstValue);
		if (DIMENSION_SIDES.every((side) => firstDims?.[side] !== null && firstDims?.[side] !== void 0)) return firstValue;
		const merged = {};
		DIMENSION_SIDES.forEach((side) => {
			if (firstDims?.[side] !== null && firstDims?.[side] !== void 0) merged[side] = firstDims[side];
		});
		for (let i = startIndex + 1; i < chain.length; i++) {
			const val = chain[i].value;
			if (_elementor_editor_props.sizePropTypeUtil.isValid(val)) {
				DIMENSION_SIDES.forEach((side) => {
					if (merged[side] === null || merged[side] === void 0) merged[side] = val;
				});
				break;
			} else if (_elementor_editor_props.dimensionsPropTypeUtil.isValid(val)) {
				const dims = _elementor_editor_props.dimensionsPropTypeUtil.extract(val);
				DIMENSION_SIDES.forEach((side) => {
					if ((merged[side] === null || merged[side] === void 0) && dims?.[side] !== null && dims?.[side] !== void 0) merged[side] = dims[side];
				});
			}
			if (DIMENSION_SIDES.every((side) => merged[side] !== null && merged[side] !== void 0)) break;
		}
		return _elementor_editor_props.dimensionsPropTypeUtil.create({
			"block-start": merged["block-start"] ?? null,
			"block-end": merged["block-end"] ?? null,
			"inline-start": merged["inline-start"] ?? null,
			"inline-end": merged["inline-end"] ?? null
		});
	}
	var StylesField = ({ bind, propDisplayName, children }) => {
		const stylesSchema = (0, _elementor_editor_styles.getStylesSchema)();
		const stylesInheritanceChain = useStylesInheritanceChain([bind]);
		const { value, canEdit, ...fields } = useStylesField(bind, { history: { propDisplayName } });
		const propType = createTopLevelObjectType({ schema: stylesSchema });
		const placeholderStartIndex = value ? 1 : 0;
		const placeholderValues = { [bind]: buildResolvedPlaceholder(stylesInheritanceChain, placeholderStartIndex) };
		const setValue = (newValue) => {
			fields.setValue(newValue[bind]);
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornmentsProvider, { items: getFieldIndicators("styles") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			propType,
			value: { [bind]: value },
			setValue,
			placeholder: placeholderValues,
			isDisabled: () => !canEdit
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(ConditionalField, null, children))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/section-content.tsx
	var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel, className }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap,
		sx: { ...sx },
		"aria-label": ariaLabel,
		className
	}, children);

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/background-section/background-section.tsx
	var BACKGROUND_LABEL = (0, _wordpress_i18n.__)("Background", "elementor");
	var BackgroundSection = () => {
		return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "background",
			propDisplayName: BACKGROUND_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.BackgroundControl, null)));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx
	var StylesFieldLayout = react.forwardRef((props, ref) => {
		const { direction = "row", children, label, infoTooltip } = props;
		const LayoutComponent = direction === "row" ? Row : Column;
		return /* @__PURE__ */ react.createElement(LayoutComponent, {
			label,
			infoTooltip,
			ref,
			children
		});
	});
	var Row = react.forwardRef(({ label, children, infoTooltip }, ref) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			container: true,
			gap: 2,
			alignItems: "center",
			flexWrap: "nowrap",
			ref,
			"aria-label": `${label} control`
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6
		}, /* @__PURE__ */ react.createElement(ControlLabel, { infoTooltip }, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6,
			sx: (theme) => ({ width: `calc(50% - ${theme.spacing(2)})` })
		}, children));
	});
	var Column = react.forwardRef(({ label, children, infoTooltip }, ref) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			gap: .75,
			ref
		}, /* @__PURE__ */ react.createElement(ControlLabel, { infoTooltip }, label), children);
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-color-field.tsx
	var BORDER_COLOR_LABEL = (0, _wordpress_i18n.__)("Border color", "elementor");
	var BorderColorField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "border-color",
		propDisplayName: BORDER_COLOR_LABEL
	}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BORDER_COLOR_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ColorControl, null)));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts
	function useDirection() {
		const isUiRtl = "rtl" === (0, _elementor_ui.useTheme)().direction;
		return {
			isSiteRtl: !!(0, _elementor_editor_v1_adapters.getElementorFrontendConfig)()?.is_rtl,
			isUiRtl
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx
	var UiProviders = ({ children }) => {
		const { isSiteRtl } = useDirection();
		return /* @__PURE__ */ react.createElement(_elementor_ui.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ react.createElement(_elementor_ui.ThemeProvider, null, children));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-radius-field.tsx
	var BORDER_RADIUS_LABEL = (0, _wordpress_i18n.__)("Border radius", "elementor");
	var StartStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusTopLeftIcon);
	var StartEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusTopRightIcon);
	var EndStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusBottomLeftIcon);
	var EndEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusBottomRightIcon);
	var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Top right", "elementor") : (0, _wordpress_i18n.__)("Top left", "elementor");
	var getStartStartAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border top right radius", "elementor") : (0, _wordpress_i18n.__)("Border top left radius", "elementor");
	var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Top left", "elementor") : (0, _wordpress_i18n.__)("Top right", "elementor");
	var getStartEndAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border top left radius", "elementor") : (0, _wordpress_i18n.__)("Border top right radius", "elementor");
	var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Bottom right", "elementor") : (0, _wordpress_i18n.__)("Bottom left", "elementor");
	var getEndStartAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border bottom right radius", "elementor") : (0, _wordpress_i18n.__)("Border bottom left radius", "elementor");
	var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Bottom left", "elementor") : (0, _wordpress_i18n.__)("Bottom right", "elementor");
	var getEndEndAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border bottom left radius", "elementor") : (0, _wordpress_i18n.__)("Border bottom right radius", "elementor");
	var getCorners = (isSiteRtl) => [
		{
			label: getStartStartLabel(isSiteRtl),
			ariaLabel: getStartStartAriaLabel(isSiteRtl),
			icon: /* @__PURE__ */ react.createElement(StartStartIcon, { fontSize: "tiny" }),
			bind: "start-start"
		},
		{
			label: getStartEndLabel(isSiteRtl),
			ariaLabel: getStartEndAriaLabel(isSiteRtl),
			icon: /* @__PURE__ */ react.createElement(StartEndIcon, { fontSize: "tiny" }),
			bind: "start-end"
		},
		{
			label: getEndStartLabel(isSiteRtl),
			ariaLabel: getEndStartAriaLabel(isSiteRtl),
			icon: /* @__PURE__ */ react.createElement(EndStartIcon, { fontSize: "tiny" }),
			bind: "end-start"
		},
		{
			label: getEndEndLabel(isSiteRtl),
			ariaLabel: getEndEndAriaLabel(isSiteRtl),
			icon: /* @__PURE__ */ react.createElement(EndEndIcon, { fontSize: "tiny" }),
			bind: "end-end"
		}
	];
	var BorderRadiusField = () => {
		const { isSiteRtl } = useDirection();
		return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "border-radius",
			propDisplayName: BORDER_RADIUS_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.EqualUnequalSizesControl, {
			items: getCorners(isSiteRtl),
			label: BORDER_RADIUS_LABEL,
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.BorderCornersIcon, { fontSize: "tiny" }),
			tooltipLabel: (0, _wordpress_i18n.__)("Adjust corners", "elementor"),
			multiSizePropTypeUtil: _elementor_editor_props.borderRadiusPropTypeUtil
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-style-field.tsx
	var BORDER_TYPE_LABEL = (0, _wordpress_i18n.__)("Border type", "elementor");
	var borderStyles = [
		{
			value: "none",
			label: (0, _wordpress_i18n.__)("None", "elementor")
		},
		{
			value: "solid",
			label: (0, _wordpress_i18n.__)("Solid", "elementor")
		},
		{
			value: "dashed",
			label: (0, _wordpress_i18n.__)("Dashed", "elementor")
		},
		{
			value: "dotted",
			label: (0, _wordpress_i18n.__)("Dotted", "elementor")
		},
		{
			value: "double",
			label: (0, _wordpress_i18n.__)("Double", "elementor")
		},
		{
			value: "groove",
			label: (0, _wordpress_i18n.__)("Groove", "elementor")
		},
		{
			value: "ridge",
			label: (0, _wordpress_i18n.__)("Ridge", "elementor")
		},
		{
			value: "inset",
			label: (0, _wordpress_i18n.__)("Inset", "elementor")
		},
		{
			value: "outset",
			label: (0, _wordpress_i18n.__)("Outset", "elementor")
		}
	];
	var BorderStyleField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "border-style",
		propDisplayName: BORDER_TYPE_LABEL
	}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BORDER_TYPE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: borderStyles })));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-width-field.tsx
	var BORDER_WIDTH_LABEL = (0, _wordpress_i18n.__)("Border width", "elementor");
	var InlineStartIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.SideRightIcon);
	var InlineEndIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.SideLeftIcon);
	var getEdges = (isSiteRtl) => [
		{
			label: (0, _wordpress_i18n.__)("Top", "elementor"),
			ariaLabel: (0, _wordpress_i18n.__)("Border top width", "elementor"),
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideTopIcon, { fontSize: "tiny" }),
			bind: "block-start"
		},
		{
			label: isSiteRtl ? (0, _wordpress_i18n.__)("Left", "elementor") : (0, _wordpress_i18n.__)("Right", "elementor"),
			ariaLabel: isSiteRtl ? (0, _wordpress_i18n.__)("Border left width", "elementor") : (0, _wordpress_i18n.__)("Border right width", "elementor"),
			icon: /* @__PURE__ */ react.createElement(InlineStartIcon$1, { fontSize: "tiny" }),
			bind: "inline-end"
		},
		{
			label: (0, _wordpress_i18n.__)("Bottom", "elementor"),
			ariaLabel: (0, _wordpress_i18n.__)("Border bottom width", "elementor"),
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideBottomIcon, { fontSize: "tiny" }),
			bind: "block-end"
		},
		{
			label: isSiteRtl ? (0, _wordpress_i18n.__)("Right", "elementor") : (0, _wordpress_i18n.__)("Left", "elementor"),
			ariaLabel: isSiteRtl ? (0, _wordpress_i18n.__)("Border right width", "elementor") : (0, _wordpress_i18n.__)("Border left width", "elementor"),
			icon: /* @__PURE__ */ react.createElement(InlineEndIcon$1, { fontSize: "tiny" }),
			bind: "inline-start"
		}
	];
	var BorderWidthField = () => {
		const { isSiteRtl } = useDirection();
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "border-width",
			propDisplayName: BORDER_WIDTH_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.EqualUnequalSizesControl, {
			items: getEdges(isSiteRtl),
			label: BORDER_WIDTH_LABEL,
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideAllIcon, { fontSize: "tiny" }),
			tooltipLabel: (0, _wordpress_i18n.__)("Adjust borders", "elementor"),
			multiSizePropTypeUtil: _elementor_editor_props.borderWidthPropTypeUtil
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-section.tsx
	var BorderSection = () => /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(BorderWidthField, null), /* @__PURE__ */ react.createElement(BorderColorField, null), /* @__PURE__ */ react.createElement(BorderStyleField, null), /* @__PURE__ */ react.createElement(BorderRadiusField, null));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/can-element-have-children.ts
	var canElementHaveChildren = (elementId) => {
		const container = (0, _elementor_editor_elements.getContainer)(elementId);
		if (!container) return false;
		return container.model.get("elType") !== "widget";
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/get-recently-used-styles.ts
	var getRecentlyUsedList = async (elementId) => {
		if (!elementId) return [];
		const resolver = (0, _elementor_editor_canvas.createPropsResolver)({
			transformers: _elementor_editor_canvas.styleTransformersRegistry,
			schema: (0, _elementor_editor_styles.getStylesSchema)()
		});
		const styles = (0, _elementor_editor_elements.getElementStyles)(elementId) ?? {};
		const variants = Object.keys(styles ?? {}).map((key) => styles?.[key]?.variants ?? []);
		const resolved = await Promise.all(variants.flat().map(async (variant) => {
			const result = await resolver({
				props: variant.props ?? {},
				schema: (0, _elementor_editor_styles.getStylesSchema)()
			});
			return Object.entries(result).filter(([, value]) => value !== null).map(([key]) => key);
		}));
		const propSet = new Set(resolved.flat());
		return Array.from(propSet);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx
	var PanelDivider = () => /* @__PURE__ */ react.createElement(_elementor_ui.Divider, { sx: { my: .5 } });

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/blend-mode-field.tsx
	var BLEND_MODE_LABEL = (0, _wordpress_i18n.__)("Blend mode", "elementor");
	var blendModeOptions = [
		{
			label: (0, _wordpress_i18n.__)("Normal", "elementor"),
			value: "normal"
		},
		{
			label: (0, _wordpress_i18n.__)("Multiply", "elementor"),
			value: "multiply"
		},
		{
			label: (0, _wordpress_i18n.__)("Screen", "elementor"),
			value: "screen"
		},
		{
			label: (0, _wordpress_i18n.__)("Overlay", "elementor"),
			value: "overlay"
		},
		{
			label: (0, _wordpress_i18n.__)("Darken", "elementor"),
			value: "darken"
		},
		{
			label: (0, _wordpress_i18n.__)("Lighten", "elementor"),
			value: "lighten"
		},
		{
			label: (0, _wordpress_i18n.__)("Color dodge", "elementor"),
			value: "color-dodge"
		},
		{
			label: (0, _wordpress_i18n.__)("Color burn", "elementor"),
			value: "color-burn"
		},
		{
			label: (0, _wordpress_i18n.__)("Saturation", "elementor"),
			value: "saturation"
		},
		{
			label: (0, _wordpress_i18n.__)("Color", "elementor"),
			value: "color"
		},
		{
			label: (0, _wordpress_i18n.__)("Difference", "elementor"),
			value: "difference"
		},
		{
			label: (0, _wordpress_i18n.__)("Exclusion", "elementor"),
			value: "exclusion"
		},
		{
			label: (0, _wordpress_i18n.__)("Hue", "elementor"),
			value: "hue"
		},
		{
			label: (0, _wordpress_i18n.__)("Luminosity", "elementor"),
			value: "luminosity"
		},
		{
			label: (0, _wordpress_i18n.__)("Soft light", "elementor"),
			value: "soft-light"
		},
		{
			label: (0, _wordpress_i18n.__)("Hard light", "elementor"),
			value: "hard-light"
		}
	];
	var BlendModeField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "mix-blend-mode",
			propDisplayName: BLEND_MODE_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BLEND_MODE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: blendModeOptions })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/opacity-control-field.tsx
	var OPACITY_LABEL = (0, _wordpress_i18n.__)("Opacity", "elementor");
	var OpacityControlField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "opacity",
			propDisplayName: OPACITY_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			ref: rowRef,
			label: OPACITY_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			units: ["%"],
			anchorRef: rowRef,
			defaultUnit: "%"
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/effects-section.tsx
	var BOX_SHADOW_LABEL = (0, _wordpress_i18n.__)("Box shadow", "elementor");
	var FILTER_LABEL = (0, _wordpress_i18n.__)("Filters", "elementor");
	var TRANSFORM_LABEL = (0, _wordpress_i18n.__)("Transform", "elementor");
	var BACKDROP_FILTER_LABEL = (0, _wordpress_i18n.__)("Backdrop filters", "elementor");
	var TRANSITIONS_LABEL = (0, _wordpress_i18n.__)("Transitions", "elementor");
	var EffectsSection = () => {
		const { element } = useElement();
		const { meta } = useStyle();
		const canHaveChildren = canElementHaveChildren(element?.id ?? "");
		return /* @__PURE__ */ react.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ react.createElement(BlendModeField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(OpacityControlField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "box-shadow",
			propDisplayName: BOX_SHADOW_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.BoxShadowRepeaterControl, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "transform",
			propDisplayName: TRANSFORM_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.TransformRepeaterControl, { showChildrenPerspective: canHaveChildren })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "transition",
			propDisplayName: TRANSITIONS_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.TransitionRepeaterControl, {
			currentStyleState: meta.state,
			recentlyUsedListGetter: () => getRecentlyUsedList(element?.id ?? "")
		})), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "filter",
			propDisplayName: FILTER_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FilterRepeaterControl, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "backdrop-filter",
			propDisplayName: BACKDROP_FILTER_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FilterRepeaterControl, { filterPropName: "backdrop-filter" })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-computed-style.ts
	function useComputedStyle(elementId) {
		return (0, _elementor_editor_v1_adapters.__privateUseListenTo)([
			(0, _elementor_editor_v1_adapters.windowEvent)("elementor/device-mode/change"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/reset-style"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
			(0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/paste-style")
		], () => {
			if (!elementId) return null;
			const element = window.elementor?.getContainer?.(elementId);
			if (!element?.view?.el) return null;
			return window.getComputedStyle(element.view.el);
		});
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
	var StylesInheritanceSectionIndicators = ({ fields }) => {
		const { id, meta, provider } = useStyle();
		const snapshot = useStylesInheritanceSnapshot();
		if (fields.includes("custom_css")) return /* @__PURE__ */ react.createElement(CustomCssIndicator, null);
		const { hasValues, hasOverrides } = getIndicators(Object.fromEntries(Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))), id ?? "", meta);
		if (!hasValues && !hasOverrides) return null;
		const hasValueLabel = (0, _wordpress_i18n.__)("Has effective styles", "elementor");
		const hasOverridesLabel = (0, _wordpress_i18n.__)("Has overridden styles", "elementor");
		return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: (0, _wordpress_i18n.__)("Has styles", "elementor"),
			placement: "top"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			sx: { "& > *": { marginInlineStart: -.25 } },
			role: "list"
		}, hasValues && provider && /* @__PURE__ */ react.createElement(StyleIndicator, {
			getColor: getStylesProviderThemeColor(provider.getKey()),
			"data-variant": (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
			role: "listitem",
			"aria-label": hasValueLabel
		}), hasOverrides && /* @__PURE__ */ react.createElement(StyleIndicator, {
			isOverridden: true,
			"data-variant": "overridden",
			role: "listitem",
			"aria-label": hasOverridesLabel
		})));
	};
	function getIndicators(snapshotFields, styleId, meta) {
		let hasValues = false;
		let hasOverrides = false;
		Object.values(snapshotFields).forEach((inheritanceChain) => {
			const currentStyle = getCurrentStyleFromChain(inheritanceChain, styleId, meta);
			if (!currentStyle) return;
			const [actualStyle] = inheritanceChain;
			if (currentStyle === actualStyle) hasValues = true;
			else hasOverrides = true;
		});
		return {
			hasValues,
			hasOverrides
		};
	}
	function getCurrentStyleFromChain(chain, styleId, meta) {
		return chain.find(({ style: { id }, variant: { meta: { breakpoint, state } } }) => id === styleId && breakpoint === meta.breakpoint && state === meta.state);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx
	var StyleTabCollapsibleContent = ({ fields = [], children }) => {
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
	};
	function getStylesInheritanceIndicators(fields) {
		if (fields.length === 0) return null;
		return (isOpen) => !isOpen ? /* @__PURE__ */ react.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx
	var FLEX_DIRECTION_LABEL$1 = (0, _wordpress_i18n.__)("Flex direction", "elementor");
	var CLOCKWISE_ANGLES = {
		row: 0,
		column: 90,
		"row-reverse": 180,
		"column-reverse": 270
	};
	var COUNTER_CLOCKWISE_ANGLES = {
		row: 0,
		column: -90,
		"row-reverse": -180,
		"column-reverse": -270
	};
	var RotatedIcon$1 = /* @__PURE__ */ __name(({ icon: Icon, size, isClockwise = true, offset = 0, disableRotationForReversed = false }) => {
		const rotate = (0, react.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
		rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
		return /* @__PURE__ */ react.createElement(Icon, {
			fontSize: size,
			sx: {
				transition: ".3s",
				rotate: `${rotate.current}deg`
			}
		});
	}, "RotatedIcon");
	var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
		const { value: direction } = useStylesField("flex-direction", { history: { propDisplayName: FLEX_DIRECTION_LABEL$1 } });
		const rotationMultiplier = "rtl" === (0, _elementor_ui.useTheme)().direction ? -1 : 1;
		const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
		const currentDirection = direction?.value || "row";
		const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[currentDirection] + offset;
		const formattedDiff = ((angleMap[currentDirection] + offset - currentAngle + 360) % 360 + 180) % 360 - 180;
		if (disableRotationForReversed && ["row-reverse", "column-reverse"].includes(currentDirection)) return 0;
		return (currentAngle + formattedDiff) * rotationMultiplier;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-content-field.tsx
	var ALIGN_CONTENT_LABEL = (0, _wordpress_i18n.__)("Align content", "elementor");
	var StartIcon$5 = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyTopIcon);
	var EndIcon$4 = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyBottomIcon);
	var iconProps$3 = {
		isClockwise: false,
		offset: 0,
		disableRotationForReversed: true
	};
	var options$11 = [
		{
			value: "start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: StartIcon$5,
				size,
				...iconProps$3
			}),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifyCenterIcon,
				size,
				...iconProps$3
			}),
			showTooltip: true
		},
		{
			value: "end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: EndIcon$4,
				size,
				...iconProps$3
			}),
			showTooltip: true
		},
		{
			value: "space-between",
			label: (0, _wordpress_i18n.__)("Space between", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifySpaceBetweenVerticalIcon,
				size,
				...iconProps$3
			}),
			showTooltip: true
		},
		{
			value: "space-around",
			label: (0, _wordpress_i18n.__)("Space around", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifySpaceAroundVerticalIcon,
				size,
				...iconProps$3
			}),
			showTooltip: true
		},
		{
			value: "space-evenly",
			label: (0, _wordpress_i18n.__)("Space evenly", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifyDistributeVerticalIcon,
				size,
				...iconProps$3
			}),
			showTooltip: true
		}
	];
	var AlignContentField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "align-content",
		propDisplayName: ALIGN_CONTENT_LABEL
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
		label: ALIGN_CONTENT_LABEL,
		direction: "column"
	}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, {
		options: options$11,
		fullWidth: true
	}))));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-items-field.tsx
	var ALIGN_ITEMS_LABEL = (0, _wordpress_i18n.__)("Align items", "elementor");
	var StartIcon$4 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon);
	var EndIcon$3 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon);
	var iconProps$2 = {
		isClockwise: false,
		offset: 90
	};
	var options$10 = [
		{
			value: "start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: StartIcon$4,
				size,
				...iconProps$2
			}),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.LayoutAlignCenterIcon,
				size,
				...iconProps$2
			}),
			showTooltip: true
		},
		{
			value: "end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: EndIcon$3,
				size,
				...iconProps$2
			}),
			showTooltip: true
		},
		{
			value: "stretch",
			label: (0, _wordpress_i18n.__)("Stretch", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.LayoutDistributeVerticalIcon,
				size,
				...iconProps$2
			}),
			showTooltip: true
		}
	];
	var AlignItemsField = () => {
		return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "align-items",
			propDisplayName: ALIGN_ITEMS_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$10 }))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-child-field.tsx
	var ALIGN_SELF_LABEL$1 = (0, _wordpress_i18n.__)("Align self", "elementor");
	var ALIGN_SELF_CHILD_OFFSET_MAP$1 = {
		row: 90,
		"row-reverse": 90,
		column: 0,
		"column-reverse": 0
	};
	var StartIcon$3 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon);
	var EndIcon$2 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon);
	var iconProps$1 = { isClockwise: false };
	var getOptions$1 = /* @__PURE__ */ __name((parentStyleDirection) => [
		{
			value: "start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: StartIcon$3,
				size,
				offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection],
				...iconProps$1
			}),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.LayoutAlignCenterIcon,
				size,
				offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection],
				...iconProps$1
			}),
			showTooltip: true
		},
		{
			value: "end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: EndIcon$2,
				size,
				offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection],
				...iconProps$1
			}),
			showTooltip: true
		},
		{
			value: "stretch",
			label: (0, _wordpress_i18n.__)("Stretch", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.LayoutDistributeVerticalIcon,
				size,
				offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection],
				...iconProps$1
			}),
			showTooltip: true
		}
	], "getOptions");
	var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "align-self",
		propDisplayName: ALIGN_SELF_LABEL$1
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: getOptions$1(parentStyleDirection) }))));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-grid-child-field.tsx
	var ALIGN_SELF_LABEL = (0, _wordpress_i18n.__)("Align self", "elementor");
	var ALIGN_SELF_CHILD_OFFSET_MAP = {
		row: 0,
		column: -90
	};
	var AlignSelfGridChild = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "align-self",
		propDisplayName: ALIGN_SELF_LABEL
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: getOptions(parentStyleDirection ?? "row") }))));
	var RotatedIcon = ({ icon: Icon, size, offset }) => /* @__PURE__ */ react.createElement(Icon, {
		fontSize: size,
		sx: { rotate: `${offset}deg` }
	});
	var getOptions = (parentStyleDirection) => {
		const offset = ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection.replace("dense", "").trim()];
		return [
			{
				value: "start",
				label: (0, _wordpress_i18n.__)("Start", "elementor"),
				renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, {
					icon: _elementor_icons.JustifyTopIcon,
					size,
					offset
				}),
				showTooltip: true
			},
			{
				value: "center",
				label: (0, _wordpress_i18n.__)("Center", "elementor"),
				renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, {
					icon: _elementor_icons.JustifyCenterIcon,
					size,
					offset
				}),
				showTooltip: true
			},
			{
				value: "end",
				label: (0, _wordpress_i18n.__)("End", "elementor"),
				renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, {
					icon: _elementor_icons.JustifyBottomIcon,
					size,
					offset
				}),
				showTooltip: true
			},
			{
				value: "stretch",
				label: (0, _wordpress_i18n.__)("Stretch", "elementor"),
				renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, {
					icon: _elementor_icons.LayoutDistributeVerticalIcon,
					size,
					offset
				}),
				showTooltip: true
			}
		];
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/display-field.tsx
	var DISPLAY_LABEL$1 = (0, _wordpress_i18n.__)("Display", "elementor");
	var displayFieldItems = [
		{
			value: "block",
			renderContent: () => (0, _wordpress_i18n.__)("Block", "elementor"),
			label: (0, _wordpress_i18n.__)("Block", "elementor"),
			showTooltip: true
		},
		{
			value: "flex",
			renderContent: () => (0, _wordpress_i18n.__)("Flex", "elementor"),
			label: (0, _wordpress_i18n.__)("Flex", "elementor"),
			showTooltip: true
		},
		{
			value: "grid",
			renderContent: () => (0, _wordpress_i18n.__)("Grid", "elementor"),
			label: (0, _wordpress_i18n.__)("Grid", "elementor"),
			showTooltip: true
		},
		{
			value: "none",
			renderContent: () => (0, _wordpress_i18n.__)("None", "elementor"),
			label: (0, _wordpress_i18n.__)("None", "elementor"),
			showTooltip: true
		},
		{
			value: "inline-block",
			renderContent: () => (0, _wordpress_i18n.__)("In-blk", "elementor"),
			label: (0, _wordpress_i18n.__)("Inline-block", "elementor"),
			showTooltip: true
		},
		{
			value: "inline-flex",
			renderContent: () => (0, _wordpress_i18n.__)("In-flx", "elementor"),
			label: (0, _wordpress_i18n.__)("Inline-flex", "elementor"),
			showTooltip: true
		}
	];
	var DisplayField = () => {
		const placeholder = useDisplayPlaceholderValue();
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "display",
			propDisplayName: DISPLAY_LABEL$1,
			placeholder
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: DISPLAY_LABEL$1,
			direction: "column"
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, {
			options: displayFieldItems,
			maxItems: 4,
			fullWidth: true
		})));
	};
	var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0;

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-direction-field.tsx
	var FLEX_DIRECTION_LABEL = (0, _wordpress_i18n.__)("Direction", "elementor");
	var options$9 = [
		{
			value: "row",
			label: (0, _wordpress_i18n.__)("Row", "elementor"),
			renderContent: ({ size }) => {
				const StartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowRightIcon);
				return /* @__PURE__ */ react.createElement(StartIcon, { fontSize: size });
			},
			showTooltip: true
		},
		{
			value: "column",
			label: (0, _wordpress_i18n.__)("Column", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "row-reverse",
			label: (0, _wordpress_i18n.__)("Reversed row", "elementor"),
			renderContent: ({ size }) => {
				const EndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowLeftIcon);
				return /* @__PURE__ */ react.createElement(EndIcon, { fontSize: size });
			},
			showTooltip: true
		},
		{
			value: "column-reverse",
			label: (0, _wordpress_i18n.__)("Reversed column", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowUpSmallIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var FlexDirectionField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "flex-direction",
			propDisplayName: FLEX_DIRECTION_LABEL
		}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$9 }))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-order-field.tsx
	var ORDER_LABEL = (0, _wordpress_i18n.__)("Order", "elementor");
	var FIRST_DEFAULT_VALUE = -99999;
	var LAST_DEFAULT_VALUE = 99999;
	var FIRST = "first";
	var LAST = "last";
	var CUSTOM$1 = "custom";
	var orderValueMap = {
		[FIRST]: FIRST_DEFAULT_VALUE,
		[LAST]: LAST_DEFAULT_VALUE
	};
	var items$1 = [
		{
			value: FIRST,
			label: (0, _wordpress_i18n.__)("First", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowUpSmallIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: LAST,
			label: (0, _wordpress_i18n.__)("Last", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: CUSTOM$1,
			label: (0, _wordpress_i18n.__)("Custom", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.PencilIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var FlexOrderField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "order",
			propDisplayName: ORDER_LABEL
		}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(FlexOrderFieldContent, null))));
	};
	function FlexOrderFieldContent() {
		const { value: order, setValue: setOrder, canEdit } = useStylesField("order", { history: { propDisplayName: ORDER_LABEL } });
		const { placeholder } = (0, _elementor_editor_controls.useBoundProp)();
		const placeholderValue = placeholder;
		const currentGroup = (0, react.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
		const [activeGroup, setActiveGroup] = (0, react.useState)(currentGroup);
		const [customLocked, setCustomLocked] = (0, react.useState)(false);
		(0, react.useEffect)(() => {
			if (!customLocked) setActiveGroup(currentGroup);
		}, [currentGroup, customLocked]);
		(0, react.useEffect)(() => {
			if (order === null) setCustomLocked(false);
		}, [order]);
		const groupPlaceholder = getGroupControlValue(placeholderValue?.value ?? null);
		const handleToggleButtonChange = (group) => {
			setActiveGroup(group);
			setCustomLocked(group === CUSTOM$1);
			if (CUSTOM$1 === group) {
				setOrder({
					$$type: "number",
					value: null
				});
				return;
			}
			if (FIRST === group) {
				setOrder({
					$$type: "number",
					value: orderValueMap[group]
				});
				return;
			}
			if (LAST === group) {
				setOrder({
					$$type: "number",
					value: orderValueMap[group]
				});
				return;
			}
			setOrder(null);
		};
		const isCustomVisible = CUSTOM$1 === activeGroup || CUSTOM$1 === groupPlaceholder;
		const orderPlaceholder = CUSTOM$1 === groupPlaceholder ? String(placeholderValue?.value ?? null) : "";
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, {
			items: items$1,
			value: activeGroup,
			onChange: handleToggleButtonChange,
			exclusive: true,
			placeholder: groupPlaceholder,
			disabled: !canEdit
		})), isCustomVisible && /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			container: true,
			gap: 2,
			alignItems: "center",
			flexWrap: "nowrap"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6
		}, /* @__PURE__ */ react.createElement(ControlLabel, null, (0, _wordpress_i18n.__)("Custom order", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6,
			sx: {
				display: "flex",
				justifyContent: "end"
			}
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, {
			min: -99998,
			max: 99999 - 1,
			shouldForceInt: true,
			placeholder: orderPlaceholder
		}))));
	}
	var getGroupControlValue = (order) => {
		if (99999 === order) return LAST;
		if (-99999 === order) return FIRST;
		if (null !== order) return CUSTOM$1;
		return null;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-size-field.tsx
	var FLEX_SIZE_LABEL = (0, _wordpress_i18n.__)("Flex Size", "elementor");
	var DEFAULT = 1;
	var items = [
		{
			value: "flex-grow",
			label: (0, _wordpress_i18n.__)("Grow", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ExpandIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "flex-shrink",
			label: (0, _wordpress_i18n.__)("Shrink", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ShrinkIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "custom",
			label: (0, _wordpress_i18n.__)("Custom", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.PencilIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var FlexSizeField = () => {
		return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "flex",
			propDisplayName: FLEX_SIZE_LABEL
		}, /* @__PURE__ */ react.createElement(FlexSizeFieldContent, null))));
	};
	var FlexSizeFieldContent = () => {
		const { value, setValue, canEdit } = useStylesField("flex", { history: { propDisplayName: FLEX_SIZE_LABEL } });
		const { placeholder } = (0, _elementor_editor_controls.useBoundProp)();
		const flexValues = extractFlexValues(value);
		const currentGroup = (0, react.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
		const [activeGroup, setActiveGroup] = (0, react.useState)(currentGroup);
		const [customLocked, setCustomLocked] = (0, react.useState)(false);
		(0, react.useEffect)(() => {
			if (!customLocked) setActiveGroup(currentGroup);
		}, [currentGroup, customLocked]);
		(0, react.useEffect)(() => {
			if (value === null) setCustomLocked(false);
		}, [value]);
		const onChangeGroup = (group = null) => {
			setActiveGroup(group);
			setCustomLocked(group === "custom");
			const newFlexValue = createFlexValueForGroup(group, value);
			setValue(newFlexValue);
		};
		const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder));
		const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder;
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, {
			value: activeGroup ?? null,
			placeholder: groupPlaceholder ?? null,
			onChange: onChangeGroup,
			disabled: !canEdit,
			items,
			exclusive: true
		})), isCustomVisible && /* @__PURE__ */ react.createElement(FlexCustomField, null));
	};
	function extractFlexValues(source) {
		return {
			grow: source?.value?.flexGrow?.value ?? null,
			shrink: source?.value?.flexShrink?.value ?? null,
			basis: source?.value?.flexBasis?.value ?? null
		};
	}
	var createFlexValueForGroup = (group, flexValue) => {
		if (!group) return null;
		if (group === "flex-grow") return _elementor_editor_props.flexPropTypeUtil.create({
			flexGrow: _elementor_editor_props.numberPropTypeUtil.create(DEFAULT),
			flexShrink: _elementor_editor_props.numberPropTypeUtil.create(0),
			flexBasis: _elementor_editor_props.sizePropTypeUtil.create({
				unit: "auto",
				size: ""
			})
		});
		if (group === "flex-shrink") return _elementor_editor_props.flexPropTypeUtil.create({
			flexGrow: _elementor_editor_props.numberPropTypeUtil.create(0),
			flexShrink: _elementor_editor_props.numberPropTypeUtil.create(DEFAULT),
			flexBasis: _elementor_editor_props.sizePropTypeUtil.create({
				unit: "auto",
				size: ""
			})
		});
		if (group === "custom") {
			if (flexValue) return flexValue;
			return _elementor_editor_props.flexPropTypeUtil.create({
				flexGrow: null,
				flexShrink: null,
				flexBasis: null
			});
		}
		return null;
	};
	var FlexCustomField = () => {
		const flexBasisRowRef = (0, react.useRef)(null);
		const context = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.flexPropTypeUtil);
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { ...context }, /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: (0, _wordpress_i18n.__)("Grow", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, {
			min: 0,
			shouldForceInt: true
		}))), /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: (0, _wordpress_i18n.__)("Shrink", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, {
			min: 0,
			shouldForceInt: true
		}))), /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: (0, _wordpress_i18n.__)("Basis", "elementor"),
			ref: flexBasisRowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			extendedOptions: ["auto"],
			anchorRef: flexBasisRowRef
		})))));
	};
	var getActiveGroup = ({ grow, shrink, basis }) => {
		if (null === grow && null === shrink && !basis) return null;
		const isAutoBasis = basis === null || typeof basis === "object" && basis.unit === "auto";
		if (basis && !isAutoBasis) return "custom";
		if (grow === DEFAULT && (shrink === null || shrink === 0) && isAutoBasis) return "flex-grow";
		if (shrink === DEFAULT && (grow === null || grow === 0) && isAutoBasis) return "flex-shrink";
		return "custom";
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/gap-control-field.tsx
	var GAPS_LABEL = (0, _wordpress_i18n.__)("Gaps", "elementor");
	var GapControlField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "gap",
			propDisplayName: GAPS_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.GapControl, { label: GAPS_LABEL }));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-auto-flow-field.tsx
	var AUTO_FLOW_LABEL = (0, _wordpress_i18n.__)("Auto flow", "elementor");
	var DENSE_LABEL = (0, _wordpress_i18n.__)("Dense", "elementor");
	var StartIcon$2 = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowRightIcon);
	var directionOptions = [{
		value: "row",
		label: (0, _wordpress_i18n.__)("Row", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(StartIcon$2, { fontSize: size }),
		showTooltip: true
	}, {
		value: "column",
		label: (0, _wordpress_i18n.__)("Column", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }),
		showTooltip: true
	}];
	var parseAutoFlow = (value) => {
		if (!value) return {
			direction: null,
			dense: false
		};
		const dense = value.includes("dense");
		return {
			direction: value.replace(/\s*dense\s*/, "").trim() || "row",
			dense
		};
	};
	var composeAutoFlow = (direction, dense) => {
		return dense ? `${direction} dense` : direction;
	};
	var GridAutoFlowFieldContent = () => {
		const { value, setValue, canEdit } = useStylesField("grid-auto-flow", { history: { propDisplayName: AUTO_FLOW_LABEL } });
		const { placeholder } = (0, _elementor_editor_controls.useBoundProp)();
		const { direction, dense } = parseAutoFlow(value?.value ?? null);
		const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction;
		const handleDirectionChange = (newDirection) => {
			if (!newDirection) {
				setValue(null);
				return;
			}
			setValue({
				$$type: "string",
				value: composeAutoFlow(newDirection, dense)
			});
		};
		const handleDenseToggle = () => {
			setValue({
				$$type: "string",
				value: composeAutoFlow(direction ?? "row", !dense)
			});
		};
		return /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			container: true,
			gap: 1,
			flexWrap: "nowrap",
			alignItems: "center",
			justifyContent: "flex-end"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			sx: {
				width: 64,
				maxWidth: "100%"
			}
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, {
			items: directionOptions,
			value: direction,
			placeholder: directionPlaceholder,
			onChange: handleDirectionChange,
			exclusive: true,
			fullWidth: true,
			disabled: !canEdit
		})), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { item: true }, /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: DENSE_LABEL,
			placement: "top"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.ToggleButton, {
			value: "dense",
			selected: dense,
			onChange: handleDenseToggle,
			size: "tiny",
			"aria-label": DENSE_LABEL,
			disabled: !canEdit
		}, /* @__PURE__ */ react.createElement(_elementor_icons.LayoutDashboardIcon, { fontSize: "tiny" }))))));
	};
	var GridAutoFlowField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "grid-auto-flow",
		propDisplayName: AUTO_FLOW_LABEL
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(GridAutoFlowFieldContent, null)));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-auto-track-fields.tsx
	var DEFAULT_UNIT = "fr";
	var AUTO_ROWS_LABEL = (0, _wordpress_i18n.__)("Auto rows", "elementor");
	var AUTO_COLUMNS_LABEL = (0, _wordpress_i18n.__)("Auto columns", "elementor");
	var AUTO_ROWS_TOOLTIP = (0, _wordpress_i18n.__)("Set the size for new rows created automatically when content exceeds the defined grid.", "elementor");
	var AUTO_COLUMNS_TOOLTIP = (0, _wordpress_i18n.__)("Set the size for new columns created automatically when content exceeds the defined grid.", "elementor");
	var GridAutoTrackField = ({ bind, infoTooltip, label, rowRef }) => /* @__PURE__ */ react.createElement(StylesField, {
		bind,
		propDisplayName: label
	}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
		infoTooltip,
		label,
		ref: rowRef
	}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
		enablePropTypeUnits: true,
		defaultUnit: DEFAULT_UNIT,
		anchorRef: rowRef
	})));
	var GridAutoTrackFields = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			gap: 2,
			pt: 2,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(GridAutoTrackField, {
			bind: "grid-auto-rows",
			infoTooltip: AUTO_ROWS_TOOLTIP,
			label: AUTO_ROWS_LABEL,
			rowRef
		}), /* @__PURE__ */ react.createElement(GridAutoTrackField, {
			bind: "grid-auto-columns",
			infoTooltip: AUTO_COLUMNS_TOOLTIP,
			label: AUTO_COLUMNS_LABEL,
			rowRef
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-justify-items-field.tsx
	var JUSTIFY_ITEMS_LABEL = (0, _wordpress_i18n.__)("Justify items", "elementor");
	var StartIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon);
	var EndIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon);
	var options$8 = [
		{
			value: "start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(StartIcon$1, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LayoutAlignCenterIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(EndIcon$1, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "stretch",
			label: (0, _wordpress_i18n.__)("Stretch", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LayoutDistributeVerticalIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var GridJustifyItemsField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "justify-items",
		propDisplayName: JUSTIFY_ITEMS_LABEL
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$8 }))));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-outline-field.tsx
	var GRID_OUTLINE_LABEL = (0, _wordpress_i18n.__)("Show Grid Outline", "elementor");
	var GridOutlineField = () => {
		const { element } = useElement();
		const value = (0, _elementor_editor_elements.useElementEditorSettings)(element.id)?.grid_outline ?? true;
		return /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
			display: "flex",
			justifyContent: "flex-end"
		} }, /* @__PURE__ */ react.createElement(_elementor_ui.Switch, {
			"aria-label": GRID_OUTLINE_LABEL,
			checked: value,
			onChange: (event) => {
				(0, _elementor_editor_elements.updateElementEditorSettings)({
					elementId: element.id,
					settings: { grid_outline: event.target.checked }
				});
			},
			size: "small"
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/grid-track-value.ts
	var FR = "fr";
	var CUSTOM = "custom";
	var UNITS$1 = ["fr", CUSTOM];
	var EMPTY = { kind: "empty" };
	var REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
	var parseString = (css) => {
		if (!css) return EMPTY;
		const match = css.match(REPEAT_FR_PATTERN);
		if (match) {
			const count = parseInt(match[1], 10);
			return count >= 1 ? {
				kind: "fr",
				count
			} : EMPTY;
		}
		return {
			kind: "custom",
			raw: css
		};
	};
	var parseGridTrackSize = (size) => {
		if (!size) return EMPTY;
		if (size.unit === "fr") {
			const n = Number(size.size);
			return Number.isFinite(n) && n >= 1 ? {
				kind: "fr",
				count: Math.trunc(n)
			} : EMPTY;
		}
		const raw = String(size.size ?? "");
		return raw === "" ? EMPTY : {
			kind: "custom",
			raw
		};
	};
	var parseValue = (value) => {
		if (!value) return EMPTY;
		if (_elementor_editor_props.gridTrackSizePropTypeUtil.isValid(value)) return parseGridTrackSize(_elementor_editor_props.gridTrackSizePropTypeUtil.extract(value));
		if (_elementor_editor_props.stringPropTypeUtil.isValid(value)) return parseString(_elementor_editor_props.stringPropTypeUtil.extract(value));
		return EMPTY;
	};
	var fromSizeInput = (v) => {
		if (v.size === "" || Number.isNaN(v.size)) return EMPTY;
		if (v.unit === "fr") {
			const n = Number(v.size);
			return Number.isFinite(n) && n >= 1 ? {
				kind: "fr",
				count: Math.trunc(n)
			} : EMPTY;
		}
		return {
			kind: "custom",
			raw: String(v.size)
		};
	};
	var toPropValue = (v) => {
		switch (v.kind) {
			case "empty": return null;
			case "fr": return _elementor_editor_props.gridTrackSizePropTypeUtil.create({
				size: v.count,
				unit: "fr"
			});
			case "custom": return _elementor_editor_props.gridTrackSizePropTypeUtil.create({
				size: v.raw,
				unit: CUSTOM
			});
		}
	};
	var toSizeInput = (v, fallbackUnit = "fr") => {
		switch (v.kind) {
			case "empty": return {
				size: "",
				unit: fallbackUnit
			};
			case "fr": return {
				size: v.count,
				unit: "fr"
			};
			case "custom": return {
				size: v.raw,
				unit: CUSTOM
			};
		}
	};
	var toPlaceholder = (v) => {
		switch (v.kind) {
			case "empty": return;
			case "fr": return String(v.count);
			case "custom": return v.raw;
		}
	};
	var unitOf = (v, fallback = "fr") => {
		if (v.kind === "fr") return "fr";
		if (v.kind === "custom") return CUSTOM;
		return fallback;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-size-field.tsx
	var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlActions, null, children);
	var GridTrackSizeInput = (0, _elementor_editor_controls.createControl)((props) => /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeComponent, {
		units: UNITS$1,
		value: props.value,
		placeholder: props.placeholder,
		defaultUnit: "fr",
		setValue: props.setValue,
		onBlur: () => {},
		min: 1,
		anchorRef: props.anchorRef,
		SizeFieldWrapper
	}));
	var GridTrackFieldContent = ({ cssProp, label }) => {
		const { value, setValue } = useStylesField(cssProp, { history: { propDisplayName: label } });
		const { placeholder: inheritedPlaceholder } = (0, _elementor_editor_controls.useBoundProp)();
		const anchorRef = (0, react.useRef)(null);
		const local = parseValue(value);
		const inherited = parseValue(inheritedPlaceholder);
		const displayValue = local.kind !== "empty" ? toSizeInput(local) : toSizeInput(EMPTY, unitOf(inherited));
		const placeholder = toPlaceholder(inherited);
		const handleChange = (raw) => {
			const next = fromSizeInput(raw);
			if (next.kind === "empty" && local.kind !== "empty" && raw.unit !== unitOf(local)) return;
			setValue(toPropValue(next));
		};
		return /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label,
			direction: "column"
		}, /* @__PURE__ */ react.createElement("div", { ref: anchorRef }, /* @__PURE__ */ react.createElement(GridTrackSizeInput, {
			value: displayValue,
			placeholder,
			setValue: handleChange,
			anchorRef
		})));
	};
	var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, {
		bind: cssProp,
		propDisplayName: label
	}, /* @__PURE__ */ react.createElement(GridTrackFieldContent, {
		cssProp,
		label
	})));
	var GridSizeFields = () => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		container: true,
		gap: 2,
		flexWrap: "nowrap"
	}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 6
	}, /* @__PURE__ */ react.createElement(GridTrackField, {
		cssProp: "grid-template-columns",
		label: (0, _wordpress_i18n.__)("Columns", "elementor")
	})), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 6
	}, /* @__PURE__ */ react.createElement(GridTrackField, {
		cssProp: "grid-template-rows",
		label: (0, _wordpress_i18n.__)("Rows", "elementor")
	})));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-span-field.tsx
	var GridSpanFieldContent = ({ label }) => {
		return /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label,
			direction: "column"
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.GridSpanControl, null));
	};
	var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ react.createElement(StylesField, {
		bind: cssProp,
		propDisplayName: label
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(GridSpanFieldContent, {
		cssProp,
		label
	})));
	var GridSpanFields = () => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		container: true,
		gap: 2,
		flexWrap: "nowrap"
	}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 6
	}, /* @__PURE__ */ react.createElement(GridSpanField, {
		cssProp: "grid-column",
		label: (0, _wordpress_i18n.__)("Grid column", "elementor")
	})), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 6
	}, /* @__PURE__ */ react.createElement(GridSpanField, {
		cssProp: "grid-row",
		label: (0, _wordpress_i18n.__)("Grid row", "elementor")
	})));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/justify-content-field.tsx
	var JUSTIFY_CONTENT_LABEL = (0, _wordpress_i18n.__)("Justify content", "elementor");
	var StartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyTopIcon);
	var EndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyBottomIcon);
	var iconProps = {
		isClockwise: true,
		offset: -90
	};
	var options$7 = [
		{
			value: "flex-start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: StartIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifyCenterIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		},
		{
			value: "flex-end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: EndIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		},
		{
			value: "space-between",
			label: (0, _wordpress_i18n.__)("Space between", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifySpaceBetweenVerticalIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		},
		{
			value: "space-around",
			label: (0, _wordpress_i18n.__)("Space around", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifySpaceAroundVerticalIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		},
		{
			value: "space-evenly",
			label: (0, _wordpress_i18n.__)("Space evenly", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, {
				icon: _elementor_icons.JustifyDistributeVerticalIcon,
				size,
				...iconProps
			}),
			showTooltip: true
		}
	];
	var JustifyContentField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "justify-content",
		propDisplayName: JUSTIFY_CONTENT_LABEL
	}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
		label: JUSTIFY_CONTENT_LABEL,
		direction: "column"
	}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, {
		options: options$7,
		fullWidth: true
	}))));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/wrap-field.tsx
	var FLEX_WRAP_LABEL$1 = (0, _wordpress_i18n.__)("Wrap", "elementor");
	var options$6 = [
		{
			value: "nowrap",
			label: (0, _wordpress_i18n.__)("No wrap", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowRightIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "wrap",
			label: (0, _wordpress_i18n.__)("Wrap", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowBackIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "wrap-reverse",
			label: (0, _wordpress_i18n.__)("Reversed wrap", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowForwardIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var WrapField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "flex-wrap",
			propDisplayName: FLEX_WRAP_LABEL$1
		}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$6 }))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/layout-section.tsx
	var DISPLAY_LABEL = (0, _wordpress_i18n.__)("Display", "elementor");
	var FLEX_WRAP_LABEL = (0, _wordpress_i18n.__)("Flex wrap", "elementor");
	var DEFAULT_PARENT_FLOW_DIRECTION = "row";
	var { Slot: GridFieldsSlot, inject: injectIntoGridFields } = (0, _elementor_locations.createLocation)();
	var LayoutSection = () => {
		const { value: display } = useStylesField("display", { history: { propDisplayName: DISPLAY_LABEL } });
		const displayPlaceholder = useDisplayPlaceholderValue();
		const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
		const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
		const { element } = useElement();
		const parentStyle = useComputedStyle((0, _elementor_editor_elements.useParentElement)(element.id)?.id || null);
		const getParentStyleDirection = () => {
			if ("flex" === parentStyle?.display) return parentStyle?.flexDirection ?? DEFAULT_PARENT_FLOW_DIRECTION;
			if ("grid" === parentStyle?.display) return parentStyle?.gridAutoFlow ?? DEFAULT_PARENT_FLOW_DIRECTION;
			return DEFAULT_PARENT_FLOW_DIRECTION;
		};
		return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ react.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ react.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isDisplayGrid && /* @__PURE__ */ react.createElement(GridFields, null), "grid" === parentStyle?.display && /* @__PURE__ */ react.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() }));
	};
	var FlexFields = () => {
		const { value: flexWrap } = useStylesField("flex-wrap", { history: { propDisplayName: FLEX_WRAP_LABEL } });
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(FlexDirectionField, null), /* @__PURE__ */ react.createElement(JustifyContentField, null), /* @__PURE__ */ react.createElement(AlignItemsField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GapControlField, null), /* @__PURE__ */ react.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ react.createElement(AlignContentField, null));
	};
	var GridFields = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(GridOutlineField, null), /* @__PURE__ */ react.createElement(GridSizeFields, null), /* @__PURE__ */ react.createElement(GridAutoFlowField, null), /* @__PURE__ */ react.createElement(GridFieldsSlot, null), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: ["grid-auto-rows", "grid-auto-columns"] }, /* @__PURE__ */ react.createElement(GridAutoTrackFields, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GapControlField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GridJustifyItemsField, null), /* @__PURE__ */ react.createElement(AlignItemsField, null));
	var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Flex child", "elementor")), /* @__PURE__ */ react.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ react.createElement(FlexOrderField, null), /* @__PURE__ */ react.createElement(FlexSizeField, null));
	var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Grid child", "elementor")), /* @__PURE__ */ react.createElement(GridSpanFields, null), /* @__PURE__ */ react.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ react.createElement(FlexOrderField, null));
	var shouldDisplayFlexFields = (display, local) => {
		const value = display?.value ?? local?.value;
		if (!value) return false;
		return "flex" === value || "inline-flex" === value;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/dimensions-field.tsx
	var InlineStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.SideLeftIcon);
	var InlineEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.SideRightIcon);
	var sideIcons = {
		"inset-block-start": /* @__PURE__ */ react.createElement(_elementor_icons.SideTopIcon, { fontSize: "tiny" }),
		"inset-block-end": /* @__PURE__ */ react.createElement(_elementor_icons.SideBottomIcon, { fontSize: "tiny" }),
		"inset-inline-start": /* @__PURE__ */ react.createElement(RotatedIcon$1, {
			icon: InlineStartIcon,
			size: "tiny"
		}),
		"inset-inline-end": /* @__PURE__ */ react.createElement(RotatedIcon$1, {
			icon: InlineEndIcon,
			size: "tiny"
		})
	};
	var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Right", "elementor") : (0, _wordpress_i18n.__)("Left", "elementor");
	var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Left", "elementor") : (0, _wordpress_i18n.__)("Right", "elementor");
	var DimensionsField = () => {
		const { isSiteRtl } = useDirection();
		const rowRefs = [(0, react.useRef)(null), (0, react.useRef)(null)];
		return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			gap: 2,
			flexWrap: "nowrap",
			ref: rowRefs[0]
		}, /* @__PURE__ */ react.createElement(DimensionField, {
			side: "inset-block-start",
			label: (0, _wordpress_i18n.__)("Top", "elementor"),
			rowRef: rowRefs[0]
		}), /* @__PURE__ */ react.createElement(DimensionField, {
			side: "inset-inline-end",
			label: getInlineEndLabel(isSiteRtl),
			rowRef: rowRefs[0]
		})), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			gap: 2,
			flexWrap: "nowrap",
			ref: rowRefs[1]
		}, /* @__PURE__ */ react.createElement(DimensionField, {
			side: "inset-block-end",
			label: (0, _wordpress_i18n.__)("Bottom", "elementor"),
			rowRef: rowRefs[1]
		}), /* @__PURE__ */ react.createElement(DimensionField, {
			side: "inset-inline-start",
			label: getInlineStartLabel(isSiteRtl),
			rowRef: rowRefs[1]
		})));
	};
	var DimensionField = ({ side, label, rowRef }) => /* @__PURE__ */ react.createElement(StylesField, {
		bind: side,
		propDisplayName: label
	}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		container: true,
		gap: .75,
		alignItems: "center"
	}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 12
	}, /* @__PURE__ */ react.createElement(ControlLabel, null, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
		item: true,
		xs: 12
	}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
		startIcon: sideIcons[side],
		extendedOptions: ["auto"],
		anchorRef: rowRef,
		min: -Number.MAX_SAFE_INTEGER
	}))));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/offset-field.tsx
	var OFFSET_LABEL = (0, _wordpress_i18n.__)("Anchor offset", "elementor");
	var UNITS = [
		"px",
		"em",
		"rem",
		"vw",
		"vh"
	];
	var OffsetField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "scroll-margin-top",
			propDisplayName: OFFSET_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: OFFSET_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			units: UNITS,
			anchorRef: rowRef
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-field.tsx
	var POSITION_LABEL$1 = (0, _wordpress_i18n.__)("Position", "elementor");
	var positionOptions$1 = [
		{
			label: (0, _wordpress_i18n.__)("Static", "elementor"),
			value: "static"
		},
		{
			label: (0, _wordpress_i18n.__)("Relative", "elementor"),
			value: "relative"
		},
		{
			label: (0, _wordpress_i18n.__)("Absolute", "elementor"),
			value: "absolute"
		},
		{
			label: (0, _wordpress_i18n.__)("Fixed", "elementor"),
			value: "fixed"
		},
		{
			label: (0, _wordpress_i18n.__)("Sticky", "elementor"),
			value: "sticky"
		}
	];
	var PositionField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "position",
			propDisplayName: POSITION_LABEL$1
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: POSITION_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: positionOptions$1 })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/z-index-field.tsx
	var Z_INDEX_LABEL = (0, _wordpress_i18n.__)("Z-index", "elementor");
	var ZIndexField = ({ disabled }) => {
		const StyleField = /* @__PURE__ */ react.createElement(StylesField, {
			bind: "z-index",
			propDisplayName: Z_INDEX_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { disabled })));
		const content = /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
			color: "secondary",
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, null),
			size: "small"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, (0, _wordpress_i18n.__)("Z-index", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { component: "span" }, (0, _wordpress_i18n.__)("z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.", "elementor")));
		return disabled ? /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
			placement: "right",
			content,
			color: "secondary",
			slotProps: { popper: { sx: { width: 300 } } }
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, StyleField)) : /* @__PURE__ */ react.createElement(react.Fragment, null, StyleField);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-section.tsx
	var POSITION_STATIC = "static";
	var POSITION_LABEL = (0, _wordpress_i18n.__)("Position", "elementor");
	var DIMENSIONS_LABEL = (0, _wordpress_i18n.__)("Dimensions", "elementor");
	var DEPENDENT_PROP_NAMES = [
		"inset-block-start",
		"inset-block-end",
		"inset-inline-start",
		"inset-inline-end",
		"z-index"
	];
	var PositionSection = () => {
		const { value: position } = useStylesField("position", withHistoryLabel(POSITION_LABEL));
		const inheritedPosition = useInheritedValues(["position"]).position;
		const resolvedPosition = position ?? inheritedPosition ?? null;
		const isPositionUnsetOrStatic = !resolvedPosition || resolvedPosition.value === POSITION_STATIC;
		const positionPrevRef = (0, react.useRef)(position);
		const { values: dependentValues, setValues: setDependentValues } = useStylesFields(DEPENDENT_PROP_NAMES);
		const [savedDependentValues, saveToHistory, clearHistory] = usePersistDimensions();
		(0, react.useEffect)(() => {
			if (position && position?.value === POSITION_STATIC && hasDependentValues(dependentValues)) saveToHistory(extractDimensions(dependentValues));
			if (positionPrevRef.current?.value === POSITION_STATIC) {
				setDependentValues({ ...savedDependentValues }, withHistoryLabel(DIMENSIONS_LABEL));
				clearHistory();
			}
			if (isPositionUnsetOrStatic && dependentValues?.["z-index"]) setDependentValues({ "z-index": null }, withHistoryLabel(DIMENSIONS_LABEL));
			positionPrevRef.current = position;
		}, [position?.value, isPositionUnsetOrStatic]);
		return /* @__PURE__ */ react.createElement(StyledSectionContent, null, /* @__PURE__ */ react.createElement(PositionField, null), /* @__PURE__ */ react.createElement(DimensionsField, null), /* @__PURE__ */ react.createElement(ZIndexField, { disabled: isPositionUnsetOrStatic }), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(OffsetField, null));
	};
	var usePersistDimensions = () => {
		const { id: styleDefID, meta } = useStyle();
		return (0, _elementor_session.useSessionStorage)(`${`styles/${styleDefID}/${meta.breakpoint || "desktop"}/${meta.state || "null"}`}/dimensions`);
	};
	var withHistoryLabel = (name) => {
		return { history: { propDisplayName: name } };
	};
	var hasDependentValues = (values) => {
		if (!values) return false;
		const dimensions = extractDimensions(values);
		return Object.values(dimensions).some((v) => v !== null);
	};
	var extractDimensions = (values) => {
		return DEPENDENT_PROP_NAMES.reduce((acc, key) => {
			return {
				...acc,
				[key]: values?.[key] ?? null
			};
		}, {});
	};
	var StyledSectionContent = (0, _elementor_ui.styled)(SectionContent, { shouldForwardProp: (prop) => prop !== "gap" })(({ gap = 2, theme }) => ({
		gap: 0,
		"& > *": { marginBottom: theme.spacing(gap) },
		"& > *:last-child": { marginBottom: 0 },
		"& > .MuiStack-root": { marginBottom: 0 },
		"& > .MuiStack-root:has(> *)": { marginBottom: theme.spacing(gap) },
		"& > .MuiDivider-root": { marginBottom: theme.spacing(gap) }
	}));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/object-fit-field.tsx
	var OBJECT_FIT_LABEL = (0, _wordpress_i18n.__)("Object fit", "elementor");
	var positionOptions = [
		{
			label: (0, _wordpress_i18n.__)("Fill", "elementor"),
			value: "fill"
		},
		{
			label: (0, _wordpress_i18n.__)("Cover", "elementor"),
			value: "cover"
		},
		{
			label: (0, _wordpress_i18n.__)("Contain", "elementor"),
			value: "contain"
		},
		{
			label: (0, _wordpress_i18n.__)("None", "elementor"),
			value: "none"
		},
		{
			label: (0, _wordpress_i18n.__)("Scale down", "elementor"),
			value: "scale-down"
		}
	];
	var ObjectFitField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "object-fit",
			propDisplayName: OBJECT_FIT_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: positionOptions })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/overflow-field.tsx
	var OVERFLOW_LABEL = (0, _wordpress_i18n.__)("Overflow", "elementor");
	var options$5 = [
		{
			value: "visible",
			label: (0, _wordpress_i18n.__)("Visible", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.EyeIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "hidden",
			label: (0, _wordpress_i18n.__)("Hidden", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.EyeOffIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "auto",
			label: (0, _wordpress_i18n.__)("Auto", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterAIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var OverflowField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "overflow",
			propDisplayName: OVERFLOW_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$5 })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/size-section.tsx
	var CssSizeProps = [
		[{
			bind: "width",
			label: (0, _wordpress_i18n.__)("Width", "elementor")
		}, {
			bind: "height",
			label: (0, _wordpress_i18n.__)("Height", "elementor")
		}],
		[{
			bind: "min-width",
			label: (0, _wordpress_i18n.__)("Min width", "elementor")
		}, {
			bind: "min-height",
			label: (0, _wordpress_i18n.__)("Min height", "elementor")
		}],
		[{
			bind: "max-width",
			label: (0, _wordpress_i18n.__)("Max width", "elementor")
		}, {
			bind: "max-height",
			label: (0, _wordpress_i18n.__)("Max height", "elementor")
		}]
	];
	var ASPECT_RATIO_LABEL = (0, _wordpress_i18n.__)("Aspect Ratio", "elementor");
	var SizeSection = () => {
		const gridRowRefs = [
			(0, react.useRef)(null),
			(0, react.useRef)(null),
			(0, react.useRef)(null)
		];
		return /* @__PURE__ */ react.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			key: rowIndex,
			container: true,
			gap: 2,
			flexWrap: "nowrap",
			ref: gridRowRefs[rowIndex]
		}, row.map((props) => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6,
			key: props.bind
		}, /* @__PURE__ */ react.createElement(SizeField, {
			...props,
			rowRef: gridRowRefs[rowIndex],
			extendedOptions: ["auto"]
		}))))), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, null, /* @__PURE__ */ react.createElement(OverflowField, null)), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			gap: 2,
			pt: 2
		}, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "aspect-ratio",
			propDisplayName: ASPECT_RATIO_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(ObjectFitField, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "object-position",
			propDisplayName: (0, _wordpress_i18n.__)("Object position", "elementor")
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 6
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PositionControl, null))))));
	};
	var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind,
			propDisplayName: label
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			container: true,
			gap: .75,
			alignItems: "center"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 12
		}, /* @__PURE__ */ react.createElement(ControlLabel, null, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 12
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			extendedOptions,
			anchorRef: rowRef
		}))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/spacing-section/spacing-section.tsx
	var MARGIN_LABEL = (0, _wordpress_i18n.__)("Margin", "elementor");
	var PADDING_LABEL = (0, _wordpress_i18n.__)("Padding", "elementor");
	var SpacingSection = () => {
		const { isSiteRtl } = useDirection();
		return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, {
			bind: "margin",
			propDisplayName: MARGIN_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.LinkedDimensionsControl, {
			label: MARGIN_LABEL,
			isSiteRtl,
			min: -Number.MAX_SAFE_INTEGER
		})), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, {
			bind: "padding",
			propDisplayName: PADDING_LABEL
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.LinkedDimensionsControl, {
			label: PADDING_LABEL,
			isSiteRtl
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-count-field.tsx
	var COLUMN_COUNT_LABEL = (0, _wordpress_i18n.__)("Columns", "elementor");
	var ColumnCountField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "column-count",
			propDisplayName: COLUMN_COUNT_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, {
			shouldForceInt: true,
			min: 0,
			step: 1
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-gap-field.tsx
	var COLUMN_GAP_LABEL = (0, _wordpress_i18n.__)("Column gap", "elementor");
	var ColumnGapField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "column-gap",
			propDisplayName: COLUMN_GAP_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: COLUMN_GAP_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { anchorRef: rowRef })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-family-field.tsx
	var FONT_FAMILY_LABEL = (0, _wordpress_i18n.__)("Font family", "elementor");
	var FontFamilyField = () => {
		const fontFamilies = (0, _elementor_editor_controls.useFontFamilies)();
		const sectionWidth = (0, _elementor_editor_ui.useSectionWidth)();
		if (fontFamilies.length === 0) return null;
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "font-family",
			propDisplayName: FONT_FAMILY_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FontFamilyControl, {
			fontFamilies,
			sectionWidth,
			ariaLabel: FONT_FAMILY_LABEL
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-size-field.tsx
	var FONT_SIZE_LABEL = (0, _wordpress_i18n.__)("Font size", "elementor");
	var FontSizeField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "font-size",
			propDisplayName: FONT_SIZE_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: FONT_SIZE_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			anchorRef: rowRef,
			ariaLabel: FONT_SIZE_LABEL
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-style-field.tsx
	var FONT_STYLE_LABEL = (0, _wordpress_i18n.__)("Font style", "elementor");
	var options$4 = [{
		value: "normal",
		label: (0, _wordpress_i18n.__)("Normal", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }),
		showTooltip: true
	}, {
		value: "italic",
		label: (0, _wordpress_i18n.__)("Italic", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ItalicIcon, { fontSize: size }),
		showTooltip: true
	}];
	var FontStyleField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "font-style",
			propDisplayName: FONT_STYLE_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$4 })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-weight-field.tsx
	var FONT_WEIGHT_LABEL = (0, _wordpress_i18n.__)("Font weight", "elementor");
	var fontWeightOptions = [
		{
			value: "100",
			label: (0, _wordpress_i18n.__)("100 - Thin", "elementor")
		},
		{
			value: "200",
			label: (0, _wordpress_i18n.__)("200 - Extra light", "elementor")
		},
		{
			value: "300",
			label: (0, _wordpress_i18n.__)("300 - Light", "elementor")
		},
		{
			value: "400",
			label: (0, _wordpress_i18n.__)("400 - Normal", "elementor")
		},
		{
			value: "500",
			label: (0, _wordpress_i18n.__)("500 - Medium", "elementor")
		},
		{
			value: "600",
			label: (0, _wordpress_i18n.__)("600 - Semi bold", "elementor")
		},
		{
			value: "700",
			label: (0, _wordpress_i18n.__)("700 - Bold", "elementor")
		},
		{
			value: "800",
			label: (0, _wordpress_i18n.__)("800 - Extra bold", "elementor")
		},
		{
			value: "900",
			label: (0, _wordpress_i18n.__)("900 - Black", "elementor")
		}
	];
	var FontWeightField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "font-weight",
			propDisplayName: FONT_WEIGHT_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: fontWeightOptions })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/letter-spacing-field.tsx
	var LETTER_SPACING_LABEL = (0, _wordpress_i18n.__)("Letter spacing", "elementor");
	var LetterSpacingField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "letter-spacing",
			propDisplayName: LETTER_SPACING_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: LETTER_SPACING_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			anchorRef: rowRef,
			min: -Number.MAX_SAFE_INTEGER
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/line-height-field.tsx
	var LINE_HEIGHT_LABEL = (0, _wordpress_i18n.__)("Line height", "elementor");
	var LineHeightField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "line-height",
			propDisplayName: LINE_HEIGHT_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: LINE_HEIGHT_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { anchorRef: rowRef })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-alignment-field.tsx
	var TEXT_ALIGNMENT_LABEL = (0, _wordpress_i18n.__)("Text align", "elementor");
	var AlignStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.AlignLeftIcon);
	var AlignEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.AlignRightIcon);
	var options$3 = [
		{
			value: "start",
			label: (0, _wordpress_i18n.__)("Start", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(AlignStartIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "center",
			label: (0, _wordpress_i18n.__)("Center", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.AlignCenterIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "end",
			label: (0, _wordpress_i18n.__)("End", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(AlignEndIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "justify",
			label: (0, _wordpress_i18n.__)("Justify", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.AlignJustifiedIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var TextAlignmentField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "text-align",
			propDisplayName: TEXT_ALIGNMENT_LABEL
		}, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$3 }))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-color-field.tsx
	var TEXT_COLOR_LABEL = (0, _wordpress_i18n.__)("Text color", "elementor");
	var TextColorField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "color",
			propDisplayName: TEXT_COLOR_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ColorControl, { id: "text-color-control" })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-decoration-field.tsx
	var TEXT_DECORATION_LABEL = (0, _wordpress_i18n.__)("Line decoration", "elementor");
	var options$2 = [
		{
			value: "none",
			label: (0, _wordpress_i18n.__)("None", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }),
			showTooltip: true,
			exclusive: true
		},
		{
			value: "underline",
			label: (0, _wordpress_i18n.__)("Underline", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.UnderlineIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "line-through",
			label: (0, _wordpress_i18n.__)("Line-through", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.StrikethroughIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "overline",
			label: (0, _wordpress_i18n.__)("Overline", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.OverlineIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var TextDecorationField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "text-decoration",
		propDisplayName: TEXT_DECORATION_LABEL
	}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, {
		options: options$2,
		exclusive: false
	})));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-direction-field.tsx
	var TEXT_DIRECTION_LABEL = (0, _wordpress_i18n.__)("Direction", "elementor");
	var options$1 = [{
		value: "ltr",
		label: (0, _wordpress_i18n.__)("Left to right", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.TextDirectionLtrIcon, { fontSize: size }),
		showTooltip: true
	}, {
		value: "rtl",
		label: (0, _wordpress_i18n.__)("Right to left", "elementor"),
		renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.TextDirectionRtlIcon, { fontSize: size }),
		showTooltip: true
	}];
	var TextDirectionField = () => {
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "direction",
			propDisplayName: TEXT_DIRECTION_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$1 })));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/add-or-remove-content.tsx
	var SIZE$4 = "tiny";
	var AddOrRemoveContent = ({ isAdded, onAdd, onRemove, children, disabled, renderLabel }) => {
		return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			sx: {
				justifyContent: "space-between",
				alignItems: "center",
				marginInlineEnd: -.75
			}
		}, renderLabel(), isAdded ? /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
			size: SIZE$4,
			onClick: onRemove,
			"aria-label": "Remove",
			disabled
		}, /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: SIZE$4 })) : /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
			size: SIZE$4,
			onClick: onAdd,
			"aria-label": "Add",
			disabled
		}, /* @__PURE__ */ react.createElement(_elementor_icons.PlusIcon, { fontSize: SIZE$4 }))), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, {
			in: isAdded,
			unmountOnExit: true
		}, /* @__PURE__ */ react.createElement(SectionContent, null, children)));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-stroke-field.tsx
	var initTextStroke = {
		$$type: "stroke",
		value: {
			color: {
				$$type: "color",
				value: "#000000"
			},
			width: {
				$$type: "size",
				value: {
					unit: "px",
					size: 1
				}
			}
		}
	};
	var TEXT_STROKE_LABEL = (0, _wordpress_i18n.__)("Text stroke", "elementor");
	var TextStrokeField = () => {
		const { value, setValue, canEdit } = useStylesField("stroke", { history: { propDisplayName: TEXT_STROKE_LABEL } });
		const addTextStroke = () => {
			setValue(initTextStroke);
		};
		const removeTextStroke = () => {
			setValue(null);
		};
		const hasTextStroke = Boolean(value);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "stroke",
			propDisplayName: TEXT_STROKE_LABEL
		}, /* @__PURE__ */ react.createElement(AddOrRemoveContent, {
			isAdded: hasTextStroke,
			onAdd: addTextStroke,
			onRemove: removeTextStroke,
			disabled: !canEdit,
			renderLabel: () => /* @__PURE__ */ react.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.StrokeControl, null)));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/transform-field.tsx
	var TEXT_TRANSFORM_LABEL = (0, _wordpress_i18n.__)("Text transform", "elementor");
	var options = [
		{
			value: "none",
			label: (0, _wordpress_i18n.__)("None", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "capitalize",
			label: (0, _wordpress_i18n.__)("Capitalize", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "uppercase",
			label: (0, _wordpress_i18n.__)("Uppercase", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseUpperIcon, { fontSize: size }),
			showTooltip: true
		},
		{
			value: "lowercase",
			label: (0, _wordpress_i18n.__)("Lowercase", "elementor"),
			renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseLowerIcon, { fontSize: size }),
			showTooltip: true
		}
	];
	var TransformField = () => /* @__PURE__ */ react.createElement(StylesField, {
		bind: "text-transform",
		propDisplayName: TEXT_TRANSFORM_LABEL
	}, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options })));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/word-spacing-field.tsx
	var WORD_SPACING_LABEL = (0, _wordpress_i18n.__)("Word spacing", "elementor");
	var WordSpacingField = () => {
		const rowRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StylesField, {
			bind: "word-spacing",
			propDisplayName: WORD_SPACING_LABEL
		}, /* @__PURE__ */ react.createElement(StylesFieldLayout, {
			label: WORD_SPACING_LABEL,
			ref: rowRef
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, {
			anchorRef: rowRef,
			min: -Number.MAX_SAFE_INTEGER
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/typography-section.tsx
	var TypographySection = () => {
		return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(FontFamilyField, null), /* @__PURE__ */ react.createElement(FontWeightField, null), /* @__PURE__ */ react.createElement(FontSizeField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(TextAlignmentField, null), /* @__PURE__ */ react.createElement(TextColorField, null), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: [
			"line-height",
			"letter-spacing",
			"word-spacing",
			"column-count",
			"text-decoration",
			"text-transform",
			"direction",
			"font-style",
			"stroke"
		] }, /* @__PURE__ */ react.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ react.createElement(LineHeightField, null), /* @__PURE__ */ react.createElement(LetterSpacingField, null), /* @__PURE__ */ react.createElement(WordSpacingField, null), /* @__PURE__ */ react.createElement(ColumnCountField, null), /* @__PURE__ */ react.createElement(ColumnGapField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(TextDecorationField, null), /* @__PURE__ */ react.createElement(TransformField, null), /* @__PURE__ */ react.createElement(TextDirectionField, null), /* @__PURE__ */ react.createElement(FontStyleField, null), /* @__PURE__ */ react.createElement(TextStrokeField, null))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections-definition.ts
	var STYLE_SECTIONS = [
		{
			name: "Layout",
			title: (0, _wordpress_i18n.__)("Layout", "elementor"),
			component: LayoutSection,
			fields: [
				"display",
				"flex-direction",
				"flex-wrap",
				"justify-content",
				"align-items",
				"align-content",
				"align-self",
				"gap",
				"order",
				"grid-column",
				"grid-row",
				"grid-auto-rows",
				"grid-auto-columns"
			]
		},
		{
			name: "Spacing",
			title: (0, _wordpress_i18n.__)("Spacing", "elementor"),
			component: SpacingSection,
			fields: ["margin", "padding"]
		},
		{
			name: "Size",
			title: (0, _wordpress_i18n.__)("Size", "elementor"),
			component: SizeSection,
			fields: [
				"width",
				"min-width",
				"max-width",
				"height",
				"min-height",
				"max-height",
				"overflow",
				"aspect-ratio",
				"object-fit"
			]
		},
		{
			name: "Position",
			title: (0, _wordpress_i18n.__)("Position", "elementor"),
			component: PositionSection,
			fields: [
				"position",
				"z-index",
				"scroll-margin-top"
			]
		},
		{
			name: "Typography",
			title: (0, _wordpress_i18n.__)("Typography", "elementor"),
			component: TypographySection,
			fields: [
				"font-family",
				"font-weight",
				"font-size",
				"text-align",
				"color",
				"line-height",
				"letter-spacing",
				"word-spacing",
				"column-count",
				"text-decoration",
				"text-transform",
				"direction",
				"font-style",
				"stroke"
			]
		},
		{
			name: "Background",
			title: (0, _wordpress_i18n.__)("Background", "elementor"),
			component: BackgroundSection,
			fields: ["background"]
		},
		{
			name: "Border",
			title: (0, _wordpress_i18n.__)("Border", "elementor"),
			component: BorderSection,
			fields: [
				"border-radius",
				"border-width",
				"border-color",
				"border-style"
			]
		},
		{
			name: "Effects",
			title: (0, _wordpress_i18n.__)("Effects", "elementor"),
			component: EffectsSection,
			fields: [
				"mix-blend-mode",
				"box-shadow",
				"opacity",
				"transform",
				"filter",
				"backdrop-filter",
				"transform-origin",
				"transition"
			]
		}
	];
	var STYLE_SECTION_NAMES = STYLE_SECTIONS.map((section) => section.name);

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx
	var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
		const { component, name, title, action } = section;
		const tabDefaults = useDefaultPanelSettings();
		const SectionComponent = component || (() => /* @__PURE__ */ react.createElement(react.Fragment, null));
		const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
		return /* @__PURE__ */ react.createElement(Section, {
			title,
			defaultExpanded: isExpanded,
			titleEnd: getStylesInheritanceIndicators(fields),
			unmountOnExit,
			action
		}, /* @__PURE__ */ react.createElement(SectionComponent, null));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-sections.tsx
	var StyleSections = () => {
		return /* @__PURE__ */ react.createElement(react.Fragment, null, STYLE_SECTIONS.map((section) => /* @__PURE__ */ react.createElement(StyleTabSection, {
			key: section.name,
			section: {
				component: section.component,
				name: section.name,
				title: section.title
			},
			fields: section.fields
		})));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-tab.tsx
	var TABS_HEADER_HEIGHT = "37px";
	var { Slot: StyleTabSlot, inject: injectIntoStyleTab } = (0, _elementor_locations.createLocation)();
	var stickyHeaderStyles = {
		position: "sticky",
		zIndex: 1100,
		opacity: 1,
		backgroundColor: "background.default",
		transition: "top 300ms ease"
	};
	var StyleTab = () => {
		const currentClassesProp = useCurrentClassesProp();
		const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? "");
		const [activeStyleState, setActiveStyleState] = (0, react.useState)(null);
		const breakpoint = (0, _elementor_editor_responsive.useActiveBreakpoint)();
		if (!currentClassesProp) return null;
		return /* @__PURE__ */ react.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ react.createElement(StyleProvider, {
			meta: {
				breakpoint,
				state: activeStyleState
			},
			id: activeStyleDefId,
			setId: (id) => {
				setActiveStyleDefId(id);
				setActiveStyleState(null);
			},
			setMetaState: setActiveStyleState
		}, /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ react.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ react.createElement(ClassesHeader, null, /* @__PURE__ */ react.createElement(CssClassSelector, null), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)), /* @__PURE__ */ react.createElement(SectionsList, null, /* @__PURE__ */ react.createElement(StyleSections, null), /* @__PURE__ */ react.createElement(StyleTabSlot, null)), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { height: "150px" } })))));
	};
	function ClassesHeader({ children }) {
		const scrollDirection = useScrollDirection();
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { sx: {
			...stickyHeaderStyles,
			top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0
		} }, children);
	}
	function useCurrentClassesProp() {
		const { elementType } = useElement();
		const prop = Object.entries(elementType.propsSchema).find(([, propType]) => propType.kind === "plain" && propType.key === _elementor_editor_props.CLASSES_PROP_KEY);
		if (!prop) return null;
		return prop[0];
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-tabs.tsx
	var EditingPanelTabs = () => {
		const { element } = useElement();
		return /* @__PURE__ */ react.createElement(react.Fragment, { key: element.id }, /* @__PURE__ */ react.createElement(PanelTabContent, null));
	};
	var PanelTabContent = () => {
		const { element } = useElement();
		const defaultComponentTab = useDefaultPanelSettings().defaultTab;
		const isPromotedElement = !!(0, _elementor_editor_elements.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
		const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
		const { getTabProps, getTabPanelProps, getTabsProps } = (0, _elementor_ui.useTabs)(isPromotedElement && storedTab === "settings" ? "style" : storedTab);
		return /* @__PURE__ */ react.createElement(ScrollProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "column",
			sx: { width: "100%" }
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { sx: {
			...stickyHeaderStyles,
			top: 0
		} }, /* @__PURE__ */ react.createElement(_elementor_ui.Tabs, {
			variant: "fullWidth",
			size: "small",
			sx: { mt: .5 },
			...getTabsProps(),
			onChange: (_, newValue) => {
				getTabsProps().onChange(_, newValue);
				setCurrentTab(newValue);
			}
		}, !isPromotedElement && /* @__PURE__ */ react.createElement(_elementor_ui.Tab, {
			label: (0, _wordpress_i18n.__)("General", "elementor"),
			...getTabProps("settings")
		}), /* @__PURE__ */ react.createElement(_elementor_ui.Tab, {
			label: (0, _wordpress_i18n.__)("Style", "elementor"),
			...getTabProps("style")
		}), /* @__PURE__ */ react.createElement(_elementor_ui.Tab, {
			label: (0, _wordpress_i18n.__)("Interactions", "elementor"),
			...getTabProps("interactions")
		})), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)), !isPromotedElement && /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, {
			...getTabPanelProps("settings"),
			disablePadding: true
		}, /* @__PURE__ */ react.createElement(SettingsTab, null)), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, {
			...getTabPanelProps("style"),
			disablePadding: true
		}, /* @__PURE__ */ react.createElement(StyleTab, null)), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, {
			...getTabPanelProps("interactions"),
			disablePadding: true
		}, /* @__PURE__ */ react.createElement(InteractionsTab, null))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/editing-panel.tsx
	var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, _elementor_locations.createLocation)();
	var { useMenuItems } = _elementor_menus.controlActionsMenu;
	var EditingPanel = () => {
		const { element, elementType, settings } = (0, _elementor_editor_elements.useSelectedElementSettings)();
		const controlReplacements = (0, _elementor_editor_controls.getControlReplacements)();
		const menuItems = useMenuItems().default;
		if (!element || !elementType) return null;
		const panelTitle = (0, _wordpress_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
		const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
		let panelContent = /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelHeader, null, /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ react.createElement(_elementor_icons.AtomIcon, {
			fontSize: "small",
			sx: { color: "text.tertiary" }
		})), /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelBody, { sx: {
			height: "auto",
			flex: 1,
			minHeight: 0
		} }, /* @__PURE__ */ react.createElement(EditingPanelTabs, null)), /* @__PURE__ */ react.createElement(EditingPanelStickyPromotion, null));
		if (ReplacementComponent) panelContent = /* @__PURE__ */ react.createElement(ReplacementComponent, null);
		return /* @__PURE__ */ react.createElement(_elementor_ui.ErrorBoundary, { fallback: /* @__PURE__ */ react.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ThemeProvider, null, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ react.createElement(ElementProvider, {
			element,
			elementType,
			settings
		}, /* @__PURE__ */ react.createElement(_elementor_editor_panels.Panel, null, /* @__PURE__ */ react.createElement(PanelHeaderTopSlot, null), panelContent)))))));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/style-states/pseudo-state-menu-items.tsx
	function PseudoStateMenuItems({ states, activeState, onSelectState, onClose }) {
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: {
			typography: "caption",
			color: "text.secondary",
			pb: .5,
			pt: 1
		} }, (0, _wordpress_i18n.__)("States", "elementor")), states.map((state) => /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
			key: state.key,
			selected: state.value === activeState,
			sx: { textTransform: "capitalize" },
			onClick: () => {
				onSelectState(state.value);
				onClose?.();
			}
		}, state.label)));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/panel.ts
	var { panel, usePanelActions, usePanelStatus } = (0, _elementor_editor_panels.createPanel)({
		id: "editing-panel",
		component: EditingPanel
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/sync/is-atomic-widget-selected.ts
	var isAtomicWidgetSelected = () => {
		const selectedElements = (0, _elementor_editor_elements.getSelectedElements)();
		const widgetCache = (0, _elementor_editor_elements.getWidgetsCache)();
		if (selectedElements.length !== 1) return false;
		return !!widgetCache?.[selectedElements[0].type]?.atomic_controls;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-open-editor-panel.ts
	var useOpenEditorPanel = () => {
		const { open } = usePanelActions();
		(0, react.useEffect)(() => {
			return (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.commandStartEvent)("panel/editor/open"), () => {
				if (isAtomicWidgetSelected()) open();
			});
		}, []);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-hooks.tsx
	var EditingPanelHooks = () => {
		useOpenEditorPanel();
		return null;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/promotions/custom-css.tsx
	var TRACKING_DATA = {
		target_name: "custom_css",
		location_l2: "style"
	};
	var CustomCssSection = () => {
		const triggerRef = (0, react.useRef)(null);
		return /* @__PURE__ */ react.createElement(StyleTabSection, { section: {
			name: "Custom CSS",
			title: (0, _wordpress_i18n.__)("Custom CSS", "elementor"),
			action: {
				component: /* @__PURE__ */ react.createElement(_elementor_editor_controls.PromotionTrigger, {
					ref: triggerRef,
					promotionKey: "customCss",
					trackingData: TRACKING_DATA
				}),
				onClick: () => triggerRef.current?.toggle()
			}
		} });
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/components/promotions/init.tsx
	var init$3 = /* @__PURE__ */ __name(() => {
		injectIntoStyleTab({
			id: "custom-css",
			component: CustomCssSection,
			options: { overwrite: true }
		});
		if (!window.elementorPro) {
			controlsRegistry.register("attributes", _elementor_editor_controls.AttributesControl, "two-columns");
			controlsRegistry.register("display-conditions", _elementor_editor_controls.DisplayConditionsControl, "two-columns");
		}
	}, "init");

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/use-actions.ts
	var ACCORDION_ELEMENT_TYPE = "e-accordion";
	var ACCORDION_ITEM_ELEMENT_TYPE = "e-accordion-item";
	var ACCORDION_ITEM_HEADER_ELEMENT_TYPE$1 = "e-accordion-item-header";
	var ACCORDION_ITEM_TITLE_ELEMENT_TYPE = "e-accordion-item-title";
	var ACCORDION_ITEM_ICON_ELEMENT_TYPE = "e-accordion-item-icon";
	var ACCORDION_ITEM_CONTENT_ELEMENT_TYPE = "e-accordion-item-content";
	var PARAGRAPH_WIDGET_TYPE = "e-paragraph";
	var getItemTitle$1 = /* @__PURE__ */ __name((position) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("Accordion Item %d", "elementor"), position), "getItemTitle");
	var TRAILING_NUMBER$1 = /(\d+)\s*$/;
	var getNextItemNumber$1 = /* @__PURE__ */ __name((existingTitles) => {
		const taken = new Set(existingTitles.filter((title) => Boolean(title)));
		let next = existingTitles.reduce((max, title) => {
			const [, trailingNumber] = title?.match(TRAILING_NUMBER$1) ?? [];
			const parsed = trailingNumber ? Number(trailingNumber) : 0;
			return Number.isFinite(parsed) && parsed > max ? parsed : max;
		}, 0) + 1;
		while (taken.has(getItemTitle$1(next))) next += 1;
		return next;
	}, "getNextItemNumber");
	var buildItemModel = (position, showIcon) => {
		const numberedTitle = getItemTitle$1(position);
		return {
			elType: ACCORDION_ITEM_ELEMENT_TYPE,
			id: (0, _elementor_editor_elements.generateElementId)(),
			editor_settings: {
				title: numberedTitle,
				initial_position: position
			},
			elements: [{
				elType: ACCORDION_ITEM_HEADER_ELEMENT_TYPE$1,
				id: (0, _elementor_editor_elements.generateElementId)(),
				editor_settings: { title: (0, _wordpress_i18n.__)("Header", "elementor") },
				settings: { show_icon: _elementor_editor_props.booleanPropTypeUtil.create(showIcon) },
				elements: [{
					elType: ACCORDION_ITEM_TITLE_ELEMENT_TYPE,
					id: (0, _elementor_editor_elements.generateElementId)(),
					editor_settings: { title: (0, _wordpress_i18n.__)("Title", "elementor") },
					elements: [{
						elType: "widget",
						widgetType: PARAGRAPH_WIDGET_TYPE,
						id: (0, _elementor_editor_elements.generateElementId)(),
						elements: [],
						settings: {
							paragraph: _elementor_editor_props.escapedHtmlPropTypeUtil.create(numberedTitle),
							tag: {
								$$type: "string",
								value: "span"
							}
						}
					}]
				}, {
					elType: ACCORDION_ITEM_ICON_ELEMENT_TYPE,
					id: (0, _elementor_editor_elements.generateElementId)(),
					editor_settings: { title: (0, _wordpress_i18n.__)("Icon", "elementor") },
					elements: [],
					hydrateDefaultChildren: true
				}]
			}, {
				elType: ACCORDION_ITEM_CONTENT_ELEMENT_TYPE,
				id: (0, _elementor_editor_elements.generateElementId)(),
				editor_settings: { title: (0, _wordpress_i18n.__)("Content", "elementor") },
				elements: [],
				hydrateDefaultChildren: true
			}]
		};
	};
	var useActions$1 = /* @__PURE__ */ __name(() => {
		const addItem = ({ accordionId, existingTitles, items, showIcon }) => {
			const accordion = (0, _elementor_editor_elements.getContainer)(accordionId);
			if (!accordion) throw new Error("Accordion container not found");
			const titles = [...existingTitles];
			items.forEach(() => {
				const position = getNextItemNumber$1(titles);
				(0, _elementor_editor_elements.createElements)({
					title: (0, _wordpress_i18n.__)("Accordion", "elementor"),
					elements: [{
						container: accordion,
						model: buildItemModel(position, showIcon)
					}]
				});
				titles.push(getItemTitle$1(position));
			});
		};
		const removeItem = ({ items }) => {
			(0, _elementor_editor_elements.removeElements)({
				title: (0, _wordpress_i18n.__)("Accordion", "elementor"),
				elementIds: items.map(({ item }) => item.id)
			});
		};
		const duplicateItem = ({ items }) => {
			(0, _elementor_editor_elements.duplicateElements)({
				title: (0, _wordpress_i18n.__)("Duplicate Accordion Item", "elementor"),
				elementIds: items.map(({ item }) => item.id)
			});
		};
		const moveItem = ({ accordionId, movedElementId, toIndex }) => {
			const accordion = (0, _elementor_editor_elements.getContainer)(accordionId);
			const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId);
			if (!accordion || !movedElement) throw new Error("Accordion item or container not found");
			(0, _elementor_editor_elements.moveElements)({
				title: (0, _wordpress_i18n.__)("Reorder Accordion Items", "elementor"),
				moves: [{
					element: movedElement,
					targetContainer: accordion,
					options: { at: toIndex }
				}]
			});
		};
		return {
			addItem,
			removeItem,
			duplicateItem,
			moveItem
		};
	}, "useActions");

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/use-show-icon-write-through.ts
	var ACCORDION_ITEM_HEADER_ELEMENT_TYPE = "e-accordion-item-header";
	var cascadeShowIconToHeaders = (0, _elementor_editor_v1_adapters.undoable)({
		do: ({ accordionId, showIcon }) => {
			const headerIds = getAccordionHeaderIds(accordionId);
			const previous = Object.fromEntries(headerIds.map((headerId) => [headerId, (0, _elementor_editor_elements.getElementSettings)(headerId, ["show_icon"]).show_icon]));
			headerIds.forEach((headerId) => {
				(0, _elementor_editor_elements.updateElementSettings)({
					id: headerId,
					props: { show_icon: _elementor_editor_props.booleanPropTypeUtil.create(showIcon) },
					withHistory: false
				});
			});
			return { previous };
		},
		undo: (_payload, { previous }) => {
			Object.entries(previous).forEach(([headerId, previousValue]) => {
				(0, _elementor_editor_elements.updateElementSettings)({
					id: headerId,
					props: { show_icon: previousValue ?? null },
					withHistory: false
				});
			});
		}
	}, {
		title: (0, _wordpress_i18n.__)("Accordion", "elementor"),
		subtitle: (0, _wordpress_i18n.__)("Show Icon", "elementor"),
		debounce: { wait: 800 }
	});
	function getAccordionHeaderIds(accordionId) {
		return ((0, _elementor_editor_elements.getContainer)(accordionId)?.children ?? []).filter((child) => child.model.get("elType") === ACCORDION_ITEM_ELEMENT_TYPE).map((item) => item.children?.find((child) => child.model.get("elType") === ACCORDION_ITEM_HEADER_ELEMENT_TYPE)).filter((header) => Boolean(header)).map((header) => header.id);
	}
	function useShowIconWriteThrough(accordionId, showIcon) {
		const previousRef = (0, react.useRef)(null);
		(0, react.useEffect)(() => {
			const previous = previousRef.current;
			previousRef.current = {
				accordionId,
				showIcon
			};
			if (!previous || previous.accordionId !== accordionId || previous.showIcon === showIcon) return;
			cascadeShowIconToHeaders({
				accordionId,
				showIcon
			});
		}, [accordionId, showIcon]);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/accordion-items-control.tsx
	var AccordionItemsControl = ({ label }) => {
		const { element, settings } = useElement();
		const { addItem, duplicateItem, moveItem, removeItem } = useActions$1();
		const { [ACCORDION_ITEM_ELEMENT_TYPE]: items } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [ACCORDION_ELEMENT_TYPE]: ACCORDION_ITEM_ELEMENT_TYPE }, { includeSelfAsParent: true });
		const showIcon = _elementor_editor_props.booleanPropTypeUtil.extract(settings.show_icon) ?? true;
		useShowIconWriteThrough(element.id, showIcon);
		const repeaterValues = items.map((item, index) => {
			return {
				id: item.id,
				title: item.editorSettings?.title,
				index
			};
		});
		const setValue = (_newValues, _options, meta) => {
			if (meta?.action?.type === "add") return addItem({
				accordionId: element.id,
				existingTitles: repeaterValues.map(({ title }) => title),
				items: meta.action.payload,
				showIcon
			});
			if (meta?.action?.type === "remove") return removeItem({ items: meta.action.payload });
			if (meta?.action?.type === "duplicate") return duplicateItem({ items: meta.action.payload });
			if (meta?.action?.type === "reorder") {
				const { from, to } = meta.action.payload;
				return moveItem({
					accordionId: element.id,
					movedElementId: items[from].id,
					toIndex: to
				});
			}
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, {
			showToggle: false,
			values: repeaterValues,
			setValues: setValue,
			showRemove: repeaterValues.length > 1,
			label,
			adornment: () => null,
			itemSettings: {
				getId: ({ item }) => item.id,
				initialValues: {
					id: "",
					title: (0, _wordpress_i18n.__)("Accordion Item", "elementor")
				},
				Label: ItemLabel$2,
				Content: ItemContent$2,
				Icon: () => null
			}
		});
	};
	var ItemLabel$2 = /* @__PURE__ */ __name(({ value }) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			sx: { minHeight: 20 },
			direction: "row",
			alignItems: "center",
			gap: 1.5
		}, value.id ? /* @__PURE__ */ react.createElement(AccordionItemRepeaterLabel, {
			elementId: value.id,
			fallbackTitle: value.title
		}) : /* @__PURE__ */ react.createElement("span", null, value?.title));
	}, "ItemLabel");
	var AccordionItemRepeaterLabel = ({ elementId, fallbackTitle }) => {
		const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? fallbackTitle ?? "";
		return /* @__PURE__ */ react.createElement("span", null, label);
	};
	var ItemContent$2 = /* @__PURE__ */ __name(({ value }) => {
		if (!value.id) return null;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			p: 2,
			gap: 1.5
		}, /* @__PURE__ */ react.createElement(ItemNameControl, { elementId: value.id }));
	}, "ItemContent");
	var ItemNameControl = ({ elementId }) => {
		const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? "";
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
			size: "tiny",
			value: label,
			onChange: ({ target }) => {
				(0, _elementor_editor_elements.updateElementEditorSettings)({
					elementId,
					settings: { title: target.value }
				});
			}
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/list-actions.ts
	var LIST_ITEM_ELEMENT_TYPE = "e-list-item";
	var TRAILING_NUMBER = /(\d+)\s*$/;
	var getItemTitle = (position) => `Item ${position}`;
	var getNextItemNumber = (existingTitles) => {
		const taken = new Set(existingTitles.filter((title) => Boolean(title)));
		let next = existingTitles.reduce((max, title) => {
			const [, trailingNumber] = title?.match(TRAILING_NUMBER) ?? [];
			const parsed = trailingNumber ? Number(trailingNumber) : 0;
			return Number.isFinite(parsed) && parsed > max ? parsed : max;
		}, 0) + 1;
		while (taken.has(getItemTitle(next))) next += 1;
		return next;
	};
	var duplicateItem = ({ items }) => {
		(0, _elementor_editor_elements.duplicateElements)({
			elementIds: items.map(({ item }) => item.id),
			title: (0, _wordpress_i18n.__)("Duplicate List Item", "elementor")
		});
	};
	var moveItem = ({ toIndex, listContainerId, movedElementId }) => {
		const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId);
		const listContainer = (0, _elementor_editor_elements.getContainer)(listContainerId);
		if (!movedElement || !listContainer) throw new Error("List item or list container not found");
		(0, _elementor_editor_elements.moveElements)({
			title: (0, _wordpress_i18n.__)("Reorder List Items", "elementor"),
			moves: [{
				element: movedElement,
				targetContainer: listContainer,
				options: { at: toIndex }
			}]
		});
	};
	var removeItem = ({ items }) => {
		(0, _elementor_editor_elements.removeElements)({
			title: (0, _wordpress_i18n.__)("List Items", "elementor"),
			elementIds: items.map(({ item }) => item.id)
		});
	};
	var addItem = ({ existingTitles, listContainerId, items, showMarkers }) => {
		const listContainer = (0, _elementor_editor_elements.getContainer)(listContainerId);
		if (!listContainer) throw new Error("List container not found");
		const titles = [...existingTitles];
		items.forEach(({ index }) => {
			const position = getNextItemNumber(titles);
			(0, _elementor_editor_elements.createElements)({
				title: (0, _wordpress_i18n.__)("List Items", "elementor"),
				elements: [{
					container: listContainer,
					model: {
						elType: LIST_ITEM_ELEMENT_TYPE,
						settings: { show_markers: _elementor_editor_props.booleanPropTypeUtil.create(showMarkers) },
						hydrateDefaultChildren: true,
						editor_settings: {
							title: getItemTitle(position),
							initial_position: position
						}
					},
					options: { at: index }
				}]
			});
			titles.push(getItemTitle(position));
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/use-show-markers-write-through.ts
	var cascadeShowMarkersToItems = (0, _elementor_editor_v1_adapters.undoable)({
		do: ({ listId, showMarkers }) => {
			const itemIds = getListItemIds(listId);
			const previous = Object.fromEntries(itemIds.map((itemId) => [itemId, (0, _elementor_editor_elements.getElementSettings)(itemId, ["show_markers"]).show_markers]));
			itemIds.forEach((itemId) => {
				(0, _elementor_editor_elements.updateElementSettings)({
					id: itemId,
					props: { show_markers: _elementor_editor_props.booleanPropTypeUtil.create(showMarkers) },
					withHistory: false
				});
			});
			return { previous };
		},
		undo: (_payload, { previous }) => {
			Object.entries(previous).forEach(([itemId, previousValue]) => {
				(0, _elementor_editor_elements.updateElementSettings)({
					id: itemId,
					props: { show_markers: previousValue ?? null },
					withHistory: false
				});
			});
		}
	}, {
		title: (0, _wordpress_i18n.__)("List", "elementor"),
		subtitle: (0, _wordpress_i18n.__)("Show Markers", "elementor"),
		debounce: { wait: 800 }
	});
	function getListItemIds(listId) {
		return ((0, _elementor_editor_elements.getContainer)(listId)?.children ?? []).filter((child) => child.model.get("elType") === LIST_ITEM_ELEMENT_TYPE).map((item) => item.id);
	}
	function useShowMarkersWriteThrough(listId, showMarkers) {
		const previousRef = (0, react.useRef)(null);
		(0, react.useEffect)(() => {
			const previous = previousRef.current;
			previousRef.current = {
				listId,
				showMarkers
			};
			if (!previous || previous.listId !== listId || previous.showMarkers === showMarkers) return;
			cascadeShowMarkersToItems({
				listId,
				showMarkers
			});
		}, [listId, showMarkers]);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/list-items-control.tsx
	var LIST_ELEMENT_TYPE = "e-list";
	var getEffectiveListItemLabel = (label, fallbackLabel) => {
		return label?.trim() ? label : fallbackLabel;
	};
	var getDefaultListItemLabel = (index) => {
		return `Item ${index + 1}`;
	};
	var ListItemsControl = ({ label }) => {
		return /* @__PURE__ */ react.createElement(ListItemsControlContent, { label });
	};
	var ListItemsControlContent = ({ label }) => {
		const { element, settings } = useElement();
		const { [LIST_ITEM_ELEMENT_TYPE]: listItems } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [LIST_ELEMENT_TYPE]: LIST_ITEM_ELEMENT_TYPE }, { includeSelfAsParent: true });
		const showMarkers = _elementor_editor_props.booleanPropTypeUtil.extract(settings.show_markers) ?? true;
		useShowMarkersWriteThrough(element.id, showMarkers);
		const repeaterValues = listItems.map((item, index) => ({
			id: item.id,
			title: item.editorSettings?.title ?? getDefaultListItemLabel(index),
			index
		}));
		const setValue = (_newValues, _options, meta) => {
			if (meta?.action?.type === "add") return addItem({
				existingTitles: repeaterValues.map(({ title }) => title),
				listContainerId: element.id,
				items: meta.action.payload,
				showMarkers
			});
			if (meta?.action?.type === "remove") return removeItem({ items: meta.action.payload });
			if (meta?.action?.type === "duplicate") return duplicateItem({ items: meta.action.payload });
			if (meta?.action?.type === "reorder") {
				const { from, to } = meta.action.payload;
				return moveItem({
					toIndex: to,
					listContainerId: element.id,
					movedElementId: listItems[from].id
				});
			}
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, {
			showToggle: false,
			values: repeaterValues,
			setValues: setValue,
			showRemove: repeaterValues.length > 1,
			label,
			adornment: () => null,
			itemSettings: {
				getId: ({ item }) => item.id,
				initialValues: {
					id: "",
					title: "Item"
				},
				Label: ItemLabel$1,
				Content: ItemContent$1,
				Icon: () => null
			}
		});
	};
	var ItemLabel$1 = /* @__PURE__ */ __name(({ value, index }) => {
		const fallbackLabel = value.title ?? getDefaultListItemLabel(index);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			sx: { minHeight: 20 },
			direction: "row",
			alignItems: "center",
			gap: 1.5
		}, value.id ? /* @__PURE__ */ react.createElement(ListItemRepeaterLabel, {
			elementId: value.id,
			fallbackLabel
		}) : /* @__PURE__ */ react.createElement("span", null, fallbackLabel));
	}, "ItemLabel");
	var ItemContent$1 = /* @__PURE__ */ __name(({ value }) => {
		if (!value.id) return null;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			p: 2,
			gap: 1.5
		}, /* @__PURE__ */ react.createElement(ListItemLabelControl, {
			elementId: value.id,
			fallbackLabel: value.title ?? ""
		}));
	}, "ItemContent");
	var ListItemRepeaterLabel = ({ elementId, fallbackLabel }) => {
		const editorSettings = (0, _elementor_editor_elements.useElementEditorSettings)(elementId);
		const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel);
		return /* @__PURE__ */ react.createElement("span", null, label);
	};
	var ListItemLabelControl = ({ elementId, fallbackLabel }) => {
		const editorSettings = (0, _elementor_editor_elements.useElementEditorSettings)(elementId);
		const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Item name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
			size: "tiny",
			value: label,
			onChange: ({ target }) => {
				(0, _elementor_editor_elements.updateElementEditorSettings)({
					elementId,
					settings: { title: target.value }
				});
			}
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/get-element-by-type.ts
	var getElementByType = (elementId, type) => {
		const currentElement = (0, _elementor_editor_elements.getContainer)(elementId);
		if (!currentElement) return null;
		if (currentElement.model.get("elType") === type) return currentElement;
		return currentElement.children?.findRecursive?.((child) => child.model.get("elType") === type) ?? null;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/use-actions.ts
	var TAB_ELEMENT_TYPE = "e-tab";
	var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
	var useActions = () => {
		const { value, setValue: setDefaultActiveTab } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil);
		const defaultActiveTab = value ?? 0;
		const duplicateItem = ({ items, tabContentAreaId }) => {
			const newDefault = calculateDefaultOnDuplicate({
				items,
				defaultActiveTab
			});
			items.forEach(({ item, index }) => {
				const tabId = item.id;
				const tabContentId = (0, _elementor_editor_elements.getContainer)(tabContentAreaId)?.children?.[index]?.id;
				if (!tabContentId) throw new Error("Original content ID is required for duplication");
				(0, _elementor_editor_elements.duplicateElements)({
					elementIds: [tabId, tabContentId],
					title: (0, _wordpress_i18n.__)("Duplicate Tab", "elementor"),
					onDuplicateElements: () => {
						if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false });
					},
					onRestoreElements: () => {
						if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false });
					}
				});
			});
		};
		const moveItem = ({ toIndex, tabsMenuId, tabContentAreaId, movedElementId, movedElementIndex }) => {
			const tabContentContainer = (0, _elementor_editor_elements.getContainer)(tabContentAreaId);
			const tabContent = tabContentContainer?.children?.[movedElementIndex];
			const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId);
			const tabsMenu = (0, _elementor_editor_elements.getContainer)(tabsMenuId);
			if (!tabContent) throw new Error("Content element is required");
			if (!movedElement || !tabsMenu) throw new Error("Tab element or menu not found");
			const newDefault = calculateDefaultOnMove({
				from: movedElementIndex,
				to: toIndex,
				defaultActiveTab
			});
			(0, _elementor_editor_elements.moveElements)({
				title: (0, _wordpress_i18n.__)("Reorder Tabs", "elementor"),
				moves: [{
					element: movedElement,
					targetContainer: tabsMenu,
					options: { at: toIndex }
				}, {
					element: tabContent,
					targetContainer: tabContentContainer,
					options: { at: toIndex }
				}],
				onMoveElements: () => {
					if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false });
				},
				onRestoreElements: () => {
					if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false });
				}
			});
		};
		const removeItem = ({ items, tabContentAreaId }) => {
			const newDefault = calculateDefaultOnRemove({
				items,
				defaultActiveTab
			});
			(0, _elementor_editor_elements.removeElements)({
				title: (0, _wordpress_i18n.__)("Tabs", "elementor"),
				elementIds: items.flatMap(({ item, index }) => {
					const tabId = item.id;
					const tabContentId = (0, _elementor_editor_elements.getContainer)(tabContentAreaId)?.children?.[index]?.id;
					if (!tabContentId) throw new Error("Content ID is required");
					return [tabId, tabContentId];
				}),
				onRemoveElements: () => {
					if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false });
				},
				onRestoreElements: () => {
					if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false });
				}
			});
		};
		const addItem = ({ tabContentAreaId, tabsMenuId, items }) => {
			const tabContentArea = (0, _elementor_editor_elements.getContainer)(tabContentAreaId);
			const tabsMenu = (0, _elementor_editor_elements.getContainer)(tabsMenuId);
			if (!tabContentArea || !tabsMenu) throw new Error("Tab containers not found");
			items.forEach(({ index }) => {
				const position = index + 1;
				(0, _elementor_editor_elements.createElements)({
					title: (0, _wordpress_i18n.__)("Tabs", "elementor"),
					elements: [{
						container: tabContentArea,
						model: {
							elType: TAB_CONTENT_ELEMENT_TYPE,
							editor_settings: {
								title: `Tab ${position} content`,
								initial_position: position
							}
						}
					}, {
						container: tabsMenu,
						model: {
							elType: TAB_ELEMENT_TYPE,
							editor_settings: {
								title: `Tab ${position} trigger`,
								initial_position: position
							}
						}
					}]
				});
			});
		};
		return {
			duplicateItem,
			moveItem,
			removeItem,
			addItem
		};
	};
	var calculateDefaultOnMove = ({ from, to, defaultActiveTab }) => {
		if (from === defaultActiveTab) return to;
		if (from < defaultActiveTab && to >= defaultActiveTab) return defaultActiveTab - 1;
		if (from > defaultActiveTab && to <= defaultActiveTab) return defaultActiveTab + 1;
		return defaultActiveTab;
	};
	var calculateDefaultOnRemove = ({ items, defaultActiveTab }) => {
		if (items.some(({ index }) => index === defaultActiveTab)) return 0;
		return defaultActiveTab - items.reduce((acc, { index }) => index < defaultActiveTab ? acc + 1 : acc, 0);
	};
	var calculateDefaultOnDuplicate = ({ items, defaultActiveTab }) => {
		return defaultActiveTab + items.reduce((acc, { index }) => {
			return index < defaultActiveTab ? acc + 1 : acc;
		}, 0);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/tabs-control.tsx
	var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
	var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
	var TabsControl = ({ label }) => {
		return /* @__PURE__ */ react.createElement(SettingsField, {
			bind: "default-active-tab",
			propDisplayName: (0, _wordpress_i18n.__)("Tabs", "elementor")
		}, /* @__PURE__ */ react.createElement(TabsControlContent, { label }));
	};
	var TabsControlContent = ({ label }) => {
		const { element } = useElement();
		const { addItem, duplicateItem, moveItem, removeItem } = useActions();
		const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE });
		const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
		const tabContentArea = getElementByType(element.id, TAB_CONTENT_AREA_ELEMENT_TYPE);
		const repeaterValues = tabLinks.map((tabLink, index) => {
			return {
				id: tabLink.id,
				title: tabLink.editorSettings?.title,
				index
			};
		});
		const setValue = (_newValues, _options, meta) => {
			if (meta?.action?.type === "add") {
				const items = meta.action.payload;
				return addItem({
					tabContentAreaId: tabContentArea.id,
					items,
					tabsMenuId: tabList.id
				});
			}
			if (meta?.action?.type === "remove") {
				const items = meta.action.payload;
				return removeItem({
					items,
					tabContentAreaId: tabContentArea.id
				});
			}
			if (meta?.action?.type === "duplicate") {
				const items = meta.action.payload;
				return duplicateItem({
					items,
					tabContentAreaId: tabContentArea.id
				});
			}
			if (meta?.action?.type === "reorder") {
				const { from, to } = meta.action.payload;
				return moveItem({
					toIndex: to,
					tabsMenuId: tabList.id,
					tabContentAreaId: tabContentArea.id,
					movedElementId: tabLinks[from].id,
					movedElementIndex: from
				});
			}
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, {
			showToggle: false,
			values: repeaterValues,
			setValues: setValue,
			showRemove: repeaterValues.length > 1,
			label,
			itemSettings: {
				getId: ({ item }) => item.id,
				initialValues: {
					id: "",
					title: "Tab"
				},
				Label: ItemLabel,
				Content: ItemContent,
				Icon: () => null
			}
		});
	};
	var ItemLabel = ({ value, index }) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			sx: { minHeight: 20 },
			direction: "row",
			alignItems: "center",
			gap: 1.5
		}, value.id ? /* @__PURE__ */ react.createElement(TabRepeaterLabel, {
			elementId: value.id,
			fallbackTitle: value.title
		}) : /* @__PURE__ */ react.createElement("span", null, value?.title), /* @__PURE__ */ react.createElement(ItemDefaultTab, { index }));
	};
	var TabRepeaterLabel = ({ elementId, fallbackTitle }) => {
		const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? fallbackTitle ?? "";
		return /* @__PURE__ */ react.createElement("span", null, label);
	};
	var ItemDefaultTab = ({ index }) => {
		const { value: defaultItem } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil);
		if (!(defaultItem === index)) return null;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
			size: "tiny",
			shape: "rounded",
			label: (0, _wordpress_i18n.__)("Default", "elementor")
		});
	};
	var ItemContent = ({ value, index }) => {
		if (!value.id) return null;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			p: 2,
			gap: 1.5
		}, /* @__PURE__ */ react.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ react.createElement(SettingsField, {
			bind: "default-active-tab",
			propDisplayName: (0, _wordpress_i18n.__)("Tabs", "elementor")
		}, /* @__PURE__ */ react.createElement(DefaultTabControl, { tabIndex: index })));
	};
	var DefaultTabControl = ({ tabIndex }) => {
		const { value, setValue } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil);
		const isDefault = value === tabIndex;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			alignItems: "center",
			justifyContent: "space-between",
			gap: 2
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Set as default tab", "elementor")), /* @__PURE__ */ react.createElement(ConditionalTooltip, {
			showTooltip: isDefault,
			placement: "right"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Switch, {
			size: "small",
			checked: isDefault,
			disabled: isDefault,
			onChange: ({ target }) => {
				setValue(target.checked ? tabIndex : null);
			},
			inputProps: { ...isDefault ? { style: {
				opacity: 0,
				cursor: "not-allowed"
			} } : {} }
		})));
	};
	var TabLabelControl = ({ elementId }) => {
		const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? "";
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Tab name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
			size: "tiny",
			value: label,
			onChange: ({ target }) => {
				(0, _elementor_editor_elements.updateElementEditorSettings)({
					elementId,
					settings: { title: target.value }
				});
			}
		}));
	};
	var ConditionalTooltip = ({ showTooltip, children }) => {
		if (!showTooltip) return children;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
			arrow: false,
			content: /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
				color: "secondary",
				icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, { fontSize: "tiny" }),
				size: "small",
				sx: { width: 288 }
			}, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("To change the default tab, simply set another tab as default.", "elementor")))
		}, /* @__PURE__ */ react.createElement("span", null, children));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/registry.ts
	var controlTypes = {
		"list-items": {
			component: ListItemsControl,
			layout: "full"
		},
		tabs: {
			component: TabsControl,
			layout: "full"
		},
		"accordion-items": {
			component: AccordionItemsControl,
			layout: "full"
		}
	};
	var registerElementControls = () => {
		Object.entries(controlTypes).forEach(([type, { component, layout }]) => {
			controlsRegistry.register(type, component, layout);
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts
	var config = { expired: false };
	var listeners = /* @__PURE__ */ new Set();
	function setLicenseConfig(newConfig) {
		config = {
			...config,
			...newConfig
		};
		listeners.forEach((listener) => listener());
	}
	function getLicenseConfig() {
		return config;
	}
	function subscribe(listener) {
		listeners.add(listener);
		return () => listeners.delete(listener);
	}
	function useLicenseConfig() {
		return (0, react.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/sync/get-atomic-dynamic-tags.ts
	var getAtomicDynamicTags = (shouldFilterByLicense = true) => {
		const { atomicDynamicTags } = (0, _elementor_editor_v1_adapters.getElementorConfig)();
		if (!atomicDynamicTags) return null;
		return {
			tags: shouldFilterByLicense ? filterByLicense(atomicDynamicTags.tags) : atomicDynamicTags.tags,
			groups: atomicDynamicTags.groups
		};
	};
	var filterByLicense = (tags) => {
		const { expired } = getLicenseConfig();
		if (expired) return Object.fromEntries(Object.entries(tags).filter(([, tag]) => !(tag?.meta?.origin === "elementor" && tag?.meta?.required_license)));
		return tags;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/utils.ts
	var DYNAMIC_PROP_TYPE_KEY = "dynamic";
	var dynamicPropTypeUtil = (0, _elementor_editor_props.createPropUtils)(DYNAMIC_PROP_TYPE_KEY, _elementor_schema.z.strictObject({
		name: _elementor_schema.z.string(),
		group: _elementor_schema.z.string(),
		settings: _elementor_schema.z.any().optional()
	}));
	var isDynamicTagSupported = (tagName) => {
		return !!(0, _elementor_editor_v1_adapters.getElementorConfig)()?.atomicDynamicTags?.tags?.[tagName];
	};
	var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY;
	var getDynamicPropType = (propType) => {
		const dynamicPropType = propType.kind === "union" && propType.prop_types[DYNAMIC_PROP_TYPE_KEY];
		return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
	};
	var isDynamicPropValue = (prop) => {
		return (0, _elementor_editor_props.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
	};
	var supportsDynamic = (propType) => {
		return !!getDynamicPropType(propType);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-tags.ts
	var usePropDynamicTags = () => {
		return usePropDynamicTagsInternal(true);
	};
	var useAllPropDynamicTags = () => {
		return usePropDynamicTagsInternal(false);
	};
	var usePropDynamicTagsInternal = (filterByLicense) => {
		let categories = [];
		const { propType } = (0, _elementor_editor_controls.useBoundProp)();
		if (propType) categories = getDynamicPropType(propType)?.settings.categories || [];
		return (0, react.useMemo)(() => getDynamicTagsByCategories(categories, filterByLicense), [categories.join(), filterByLicense]);
	};
	var getDynamicTagsByCategories = (categories, filterByLicense) => {
		const { tags, groups } = getAtomicDynamicTags(filterByLicense) || {};
		if (!categories.length || !tags || !groups) return [];
		const _categories = new Set(categories);
		const dynamicTags = [];
		const groupedFilteredTags = {};
		for (const tag of Object.values(tags)) {
			if (!tag.categories.some((category) => _categories.has(category))) continue;
			if (!groupedFilteredTags[tag.group]) groupedFilteredTags[tag.group] = [];
			groupedFilteredTags[tag.group].push(tag);
		}
		for (const group in groups) if (groupedFilteredTags[group]) dynamicTags.push(...groupedFilteredTags[group]);
		return dynamicTags;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts
	var useDynamicTag = (tagName) => {
		const dynamicTags = useAllPropDynamicTags();
		return (0, react.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/components/background-control-dynamic-tag.tsx
	var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "tiny" });
	var BackgroundControlDynamicTagLabel = ({ value }) => {
		const context = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.backgroundImageOverlayPropTypeUtil);
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			...context,
			value: value.value
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ react.createElement(Wrapper, { rawValue: value.value })));
	};
	var Wrapper = ({ rawValue }) => {
		const { propType } = (0, _elementor_editor_controls.useBoundProp)();
		const imageOverlayPropType = propType.prop_types["background-image-overlay"];
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			propType: imageOverlayPropType.shape.image,
			value: rawValue,
			setValue: () => void 0
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ react.createElement(Content, { rawValue: rawValue.image })));
	};
	var Content = ({ rawValue }) => {
		const src = rawValue.value.src;
		const dynamicTag = useDynamicTag(src.value.name || "");
		return /* @__PURE__ */ react.createElement(react.Fragment, null, dynamicTag?.label);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/hooks/use-persist-dynamic-value.ts
	var usePersistDynamicValue = (propKey) => {
		const { element } = useElement();
		return (0, _elementor_session.useSessionStorage)(`dynamic/non-dynamic-values-history/${element.id}/${propKey}`);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-conditional-control.tsx
	var DynamicConditionalControl = ({ children, propType, propsSchema, dynamicSettings }) => {
		const defaults = (0, react.useMemo)(() => {
			if (!propsSchema) return {};
			return Object.entries(propsSchema).reduce((result, [key, prop]) => {
				result[key] = prop?.default ?? null;
				return result;
			}, {});
		}, [propsSchema]);
		const convertedSettings = (0, react.useMemo)(() => {
			if (!dynamicSettings) return {};
			return Object.entries(dynamicSettings).reduce((result, [key, dynamicValue]) => {
				if (dynamicValue && typeof dynamicValue === "object" && "$$type" in dynamicValue) result[key] = dynamicValue;
				else result[key] = {
					$$type: "plain",
					value: dynamicValue
				};
				return result;
			}, {});
		}, [dynamicSettings]);
		const effectiveSettings = (0, react.useMemo)(() => {
			return {
				...defaults,
				...convertedSettings
			};
		}, [defaults, convertedSettings]);
		if (!propType?.dependencies?.terms.length) return /* @__PURE__ */ react.createElement(react.Fragment, null, children);
		return !(0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet ? null : /* @__PURE__ */ react.createElement(react.Fragment, null, children);
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/dynamic-control.tsx
	var DynamicControl = ({ bind, children }) => {
		const { value, setValue } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil);
		const { name = "", group = "", settings } = value ?? {};
		const dynamicTag = useDynamicTag(name);
		if (!dynamicTag) throw new Error(`Dynamic tag ${name} not found`);
		const dynamicPropType = dynamicTag.props_schema[bind];
		const defaultValue = dynamicPropType?.default;
		const dynamicValue = settings?.[bind] ?? defaultValue;
		const setDynamicValue = (newValues) => {
			setValue({
				name,
				group,
				settings: {
					...settings,
					...newValues
				}
			});
		};
		const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
		return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			propType,
			setValue: setDynamicValue,
			value: { [bind]: dynamicValue }
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(DynamicConditionalControl, {
			propType: dynamicPropType,
			propsSchema: dynamicTag.props_schema,
			dynamicSettings: settings
		}, children)));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection.tsx
	var SIZE$3 = "tiny";
	var PROMO_TEXT_WIDTH = 170;
	var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
	var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew-modal/";
	var DynamicSelection = ({ close: closePopover, expired = false }) => {
		const [searchValue, setSearchValue] = (0, react.useState)("");
		const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
		const theme = (0, _elementor_ui.useTheme)();
		const { value: anyValue } = (0, _elementor_editor_controls.useBoundProp)();
		const { bind, value: dynamicValue, setValue } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil);
		const [, updatePropValueHistory] = usePersistDynamicValue(bind);
		const isCurrentValueDynamic = !!dynamicValue;
		const options = useFilteredOptions(searchValue);
		const hasNoDynamicTags = !options.length && !searchValue.trim();
		(0, react.useEffect)(() => {
			if (hasNoDynamicTags) (0, _elementor_editor_controls.trackViewPromotion)({ target_name: "dynamic_tags" });
			else if (expired) (0, _elementor_editor_controls.trackViewPromotion)({ target_name: "dynamic_tags" });
		}, [hasNoDynamicTags, expired]);
		const handleSearch = (value) => {
			setSearchValue(value);
		};
		const handleSetDynamicTag = (value) => {
			if (!isCurrentValueDynamic) updatePropValueHistory(anyValue);
			const selectedOption = options.flatMap(([, items]) => items).find((item) => item.value === value);
			setValue({
				name: value,
				group: selectedOption?.group ?? "",
				settings: { label: selectedOption?.label }
			});
			closePopover();
		};
		const virtualizedItems = options.flatMap(([category, items]) => [{
			type: "category",
			value: category,
			label: dynamicGroups?.[category]?.title || category
		}, ...items.map((item) => ({
			type: "item",
			value: item.value,
			label: item.label
		}))]);
		const getPopOverContent = () => {
			if (hasNoDynamicTags) return /* @__PURE__ */ react.createElement(NoDynamicTags, null);
			if (expired) return /* @__PURE__ */ react.createElement(ExpiredDynamicTags, null);
			return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SearchField, {
				value: searchValue,
				onSearch: handleSearch,
				placeholder: (0, _wordpress_i18n.__)("Search dynamic tags…", "elementor")
			}), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverMenuList, {
				items: virtualizedItems,
				onSelect: handleSetDynamicTag,
				onClose: closePopover,
				selectedValue: dynamicValue?.name,
				itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
				noResultsComponent: /* @__PURE__ */ react.createElement(NoResults, {
					searchValue,
					onClear: () => setSearchValue("")
				})
			}));
		};
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, {
			title: (0, _wordpress_i18n.__)("Dynamic tags", "elementor"),
			onClose: closePopover,
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$3 })
		}), getPopOverContent());
	};
	var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap: 1,
		alignItems: "center",
		justifyContent: "center",
		height: "100%",
		p: 2.5,
		color: "text.secondary",
		sx: { pb: 3.5 }
	}, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "subtitle2"
	}, (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ react.createElement("br", null), "“", searchValue, "”."), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "caption",
		sx: {
			display: "flex",
			flexDirection: "column"
		}
	}, (0, _wordpress_i18n.__)("Try something else.", "elementor"), /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
		color: "text.secondary",
		variant: "caption",
		component: "button",
		onClick: onClear
	}, (0, _wordpress_i18n.__)("Clear & try again", "elementor"))));
	var NoDynamicTags = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap: 1,
		alignItems: "center",
		justifyContent: "center",
		height: "100%",
		p: 2.5,
		color: "text.secondary",
		sx: { pb: 3.5 }
	}, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "subtitle2"
	}, (0, _wordpress_i18n.__)("Streamline your workflow with dynamic tags", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "caption",
		width: PROMO_TEXT_WIDTH
	}, (0, _wordpress_i18n.__)("Upgrade now to display your content dynamically.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.CtaButton, {
		size: "small",
		href: PRO_DYNAMIC_TAGS_URL,
		onClick: () => (0, _elementor_editor_controls.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
	})));
	var ExpiredDynamicTags = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		gap: 1,
		alignItems: "center",
		justifyContent: "center",
		height: "100%",
		p: 2.5,
		color: "text.secondary",
		sx: { pb: 3.5 }
	}, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "subtitle2"
	}, (0, _wordpress_i18n.__)("Unlock your Dynamic tags again", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
		align: "center",
		variant: "caption",
		width: PROMO_TEXT_WIDTH
	}, (0, _wordpress_i18n.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.CtaButton, {
		size: "small",
		href: RENEW_DYNAMIC_TAGS_URL,
		onClick: () => (0, _elementor_editor_controls.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
		children: (0, _wordpress_i18n.__)("Renew Now", "elementor")
	})));
	var useFilteredOptions = (searchValue) => {
		return [...usePropDynamicTags().reduce((categories, { name, label, group }) => {
			if (!label.toLowerCase().includes(searchValue.trim().toLowerCase())) return categories;
			if (!categories.has(group)) categories.set(group, []);
			categories.get(group)?.push({
				label,
				group,
				value: name
			});
			return categories;
		}, /* @__PURE__ */ new Map())];
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection-control.tsx
	var SIZE$2 = "tiny";
	var tagsWithoutTabs = ["popup"];
	var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
		const { setValue: setAnyValue, propType } = (0, _elementor_editor_controls.useBoundProp)();
		const { bind, value } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil);
		const { expired: readonly } = useLicenseConfig();
		const originalPropType = createTopLevelObjectType({ schema: { [bind]: propType } });
		const [propValueFromHistory] = usePersistDynamicValue(bind);
		const selectionPopoverState = (0, _elementor_ui.usePopupState)({ variant: "popover" });
		const { name: tagName = "" } = value;
		const dynamicTag = useDynamicTag(tagName);
		if (!isDynamicTagSupported(tagName) && OriginalControl) return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
			propType: originalPropType,
			value: { [bind]: null },
			setValue: setAnyValue
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(OriginalControl, { ...props })));
		const removeDynamicTag = () => {
			setAnyValue(propValueFromHistory ?? null);
		};
		if (!dynamicTag) throw new Error(`Dynamic tag ${tagName} not found`);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.UnstableTag, {
			fullWidth: true,
			showActionsOnHover: true,
			label: dynamicTag.label,
			startIcon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$2 }),
			...(0, _elementor_ui.bindTrigger)(selectionPopoverState),
			actions: /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(DynamicSettingsPopover, {
				dynamicTag,
				disabled: readonly
			}), /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
				size: SIZE$2,
				onClick: removeDynamicTag,
				"aria-label": (0, _wordpress_i18n.__)("Remove dynamic value", "elementor")
			}, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, { fontSize: SIZE$2 })))
		}), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, {
			disablePortal: true,
			disableScrollLock: true,
			anchorOrigin: {
				vertical: "bottom",
				horizontal: "right"
			},
			transformOrigin: {
				vertical: "top",
				horizontal: "right"
			},
			PaperProps: { sx: { my: 1 } },
			...(0, _elementor_ui.bindPopover)(selectionPopoverState)
		}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ react.createElement(DynamicSelection, {
			close: selectionPopoverState.close,
			expired: readonly
		}))));
	};
	var DynamicSettingsPopover = ({ dynamicTag, disabled = false }) => {
		const popupState = (0, _elementor_ui.usePopupState)({ variant: "popover" });
		if (!!!dynamicTag.atomic_controls.length) return null;
		return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
			size: SIZE$2,
			disabled,
			...!disabled && (0, _elementor_ui.bindTrigger)(popupState),
			"aria-label": (0, _wordpress_i18n.__)("Dynamic settings", "elementor")
		}, /* @__PURE__ */ react.createElement(_elementor_icons.SettingsIcon, { fontSize: SIZE$2 })), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, {
			disablePortal: true,
			disableScrollLock: true,
			anchorOrigin: {
				vertical: "bottom",
				horizontal: "right"
			},
			transformOrigin: {
				vertical: "top",
				horizontal: "right"
			},
			PaperProps: { sx: { my: 1 } },
			...(0, _elementor_ui.bindPopover)(popupState)
		}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, {
			title: dynamicTag.label,
			onClose: popupState.close,
			icon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$2 })
		}), /* @__PURE__ */ react.createElement(DynamicSettings, {
			controls: dynamicTag.atomic_controls,
			tagName: dynamicTag.name
		}))));
	};
	var DynamicSettings = ({ controls, tagName }) => {
		const tabs = controls.filter(({ type }) => type === "section");
		const { getTabsProps, getTabProps, getTabPanelProps } = (0, _elementor_ui.useTabs)(0);
		if (!tabs.length) return null;
		if (tagsWithoutTabs.includes(tagName)) {
			const singleTab = tabs[0];
			return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(ControlsItemsStack, { items: singleTab.value.items }));
		}
		return /* @__PURE__ */ react.createElement(react.Fragment, null, tabs.length > 1 && /* @__PURE__ */ react.createElement(_elementor_ui.Tabs, {
			size: "small",
			variant: "fullWidth",
			...getTabsProps()
		}, tabs.map(({ value }, index) => /* @__PURE__ */ react.createElement(_elementor_ui.Tab, {
			key: index,
			label: value.label,
			sx: {
				px: 1,
				py: .5
			},
			...getTabProps(index)
		}))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), tabs.map(({ value }, index) => {
			return /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, {
				key: index,
				sx: {
					flexGrow: 1,
					py: 0,
					overflowY: "auto"
				},
				...getTabPanelProps(index)
			}, /* @__PURE__ */ react.createElement(ControlsItemsStack, { items: value.items }));
		}));
	};
	var LAYOUT_OVERRIDE_FIELDS = {
		separator: "two-columns",
		action: "full",
		off_canvas: "full",
		type: "two-columns"
	};
	var DYNAMIC_TAG_LAYOUT_OVERRIDES = { select: "full" };
	var getLayout = (control) => {
		const dynamicOverride = DYNAMIC_TAG_LAYOUT_OVERRIDES[control.type];
		if (dynamicOverride) return dynamicOverride;
		return LAYOUT_OVERRIDE_FIELDS[control.bind] ?? controlsRegistry.getLayout(control.type);
	};
	var Control = ({ control }) => {
		if (!controlsRegistry.get(control.type)) return null;
		const layout = getLayout(control);
		const controlProps = {
			...control.type === "select" ? {
				...control.props,
				MenuProps: {
					...control.props?.MenuProps ?? {},
					disablePortal: true
				}
			} : { ...control.props },
			ariaLabel: control.label
		};
		const isSwitchControl = control.type === "switch";
		const layoutStyleProps = layout === "two-columns" ? {
			display: "grid",
			gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
		} : {};
		return /* @__PURE__ */ react.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			container: true,
			gap: .75,
			sx: layoutStyleProps
		}, control.label ? /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 12
		}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, {
			item: true,
			xs: 12
		}, /* @__PURE__ */ react.createElement(Control$1, {
			type: control.type,
			props: controlProps
		}))));
	};
	function ControlsItemsStack({ items }) {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			p: 2,
			gap: 2,
			sx: { overflowY: "auto" }
		}, items.map((item) => item.type === "control" ? /* @__PURE__ */ react.createElement(Control, {
			key: item.value.bind,
			control: item.value
		}) : null));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/errors.ts
	var DynamicTagsManagerNotFoundError = (0, _elementor_utils.createError)({
		code: "dynamic_tags_manager_not_found",
		message: "Dynamic tags manager not found"
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/dynamic-transformer.ts
	var dynamicTransformer = (0, _elementor_editor_canvas.createTransformer)((value, { propType, renderContext }) => {
		if (!value?.name || !isDynamicTagSupported(value.name)) return propType?.default ?? null;
		const renderPostId = renderContext?.currentPostId;
		return getDynamicValue(value.name, simpleTransform(value?.settings ?? {}), renderPostId);
	});
	function simpleTransform(props) {
		const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
			return [settingKey, (0, _elementor_editor_props.isTransformable)(settingValue) ? settingValue.value : settingValue];
		});
		return Object.fromEntries(transformed);
	}
	function getDynamicValue(name, settings, renderPostId) {
		const { dynamicTags } = window.elementor ?? {};
		if (!dynamicTags) throw new DynamicTagsManagerNotFoundError();
		const getTagValue = () => {
			const tag = dynamicTags.createTag("v4-dynamic-tag", name, settings);
			if (!tag) return null;
			if (renderPostId) tag.editorRenderPostId = renderPostId;
			return dynamicTags.loadTagDataFromCache(tag) ?? null;
		};
		const tagValue = getTagValue();
		if (tagValue !== null) return tagValue;
		return new Promise((resolve) => {
			dynamicTags.refreshCacheFromServer(() => {
				resolve(getTagValue());
			});
		});
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-action.tsx
	var usePropDynamicAction = () => {
		const { propType } = (0, _elementor_editor_controls.useBoundProp)();
		return {
			visible: !!propType && supportsDynamic(propType),
			icon: _elementor_icons.DatabaseIcon,
			title: (0, _wordpress_i18n.__)("Dynamic tags", "elementor"),
			content: ({ close }) => /* @__PURE__ */ react.createElement(DynamicSelection, { close })
		};
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/dynamics/init.ts
	var { registerPopoverAction } = _elementor_menus.controlActionsMenu;
	var init$2 = /* @__PURE__ */ __name(() => {
		(0, _elementor_editor_controls.registerControlReplacement)({
			component: DynamicSelectionControl,
			condition: ({ value }) => isDynamicPropValue(value)
		});
		(0, _elementor_editor_controls.injectIntoRepeaterItemLabel)({
			id: "dynamic-background-image",
			condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
			component: BackgroundControlDynamicTagLabel
		});
		(0, _elementor_editor_controls.injectIntoRepeaterItemIcon)({
			id: "dynamic-background-image",
			condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
			component: BackgroundControlDynamicTagIcon
		});
		registerPopoverAction({
			id: "dynamic-tags",
			priority: 20,
			useProps: usePropDynamicAction
		});
		_elementor_editor_canvas.styleTransformersRegistry.register("dynamic", dynamicTransformer);
		_elementor_editor_canvas.settingsTransformersRegistry.register("dynamic", dynamicTransformer);
	}, "init");

//#endregion
//#region packages/packages/core/editor-editing-panel/src/utils/is-equal.ts
	function isEqual(a, b) {
		if (a === b) return true;
		if (a === null || b === null) return false;
		if (typeof a !== typeof b) return false;
		if (Array.isArray(a) && Array.isArray(b)) {
			if (a.length !== b.length) return false;
			for (let i = 0; i < a.length; i++) if (!isEqual(a[i], b[i])) return false;
			return true;
		}
		if (typeof a === "object" && typeof b === "object") {
			const objA = a;
			const objB = b;
			const keysA = Object.keys(objA);
			const keysB = Object.keys(objB);
			if (keysA.length !== keysB.length) return false;
			for (const key of keysA) {
				if (!(key in objB)) return false;
				if (!isEqual(objA[key], objB[key])) return false;
			}
			return true;
		}
		return false;
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/reset-style-props.tsx
	var { registerAction } = _elementor_menus.controlActionsMenu;
	function initResetStyleProps() {
		registerAction({
			id: "reset-style-value",
			priority: 10,
			useProps: useResetStyleValueProps
		});
	}
	function useResetStyleValueProps() {
		const isStyle = useIsStyle();
		const { value, resetValue, propType } = (0, _elementor_editor_controls.useBoundProp)();
		const hasValue = value !== null && value !== void 0;
		const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
		const isRequired = !!propType.settings?.required;
		const shouldHide = !!propType.settings?.hide_reset;
		const isPropTypeValue = value;
		const isVariable = isPropTypeValue?.$$type?.includes("variable");
		const variableExists = isVariable && (0, _elementor_editor_variables.hasVariable)(isPropTypeValue?.value);
		function calculateVisibility() {
			if (!isStyle || !hasValue || shouldHide || isVariable && !variableExists) return false;
			if (hasInitial) return !isEqual(value, propType.initial_value);
			return !isRequired;
		}
		return {
			visible: calculateVisibility(),
			title: (0, _wordpress_i18n.__)("Clear", "elementor"),
			icon: _elementor_icons.BrushBigIcon,
			onClick: () => resetValue()
		};
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
	var MAXIMUM_ITEMS = 2;
	var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
		const [items, setItems] = (0, react.useState)([]);
		(0, react.useEffect)(() => {
			(async () => {
				const validItems = (await Promise.all(inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve)))).map((item) => ({
					...item,
					displayLabel: _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, _wordpress_i18n.__)("Base", "elementor")
				})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
				setItems(validItems);
			})();
		}, [
			inheritanceChain,
			bind,
			resolve
		]);
		return items;
	};
	var DEFAULT_BREAKPOINT$1 = "desktop";
	var normalizeInheritanceItem = async (item, index, bind, resolve) => {
		const { variant: { meta: { state, breakpoint } }, style: { label, id } } = item;
		const displayLabel = getDisplayLabel({
			label,
			state
		});
		return {
			id: id ? id + (state ?? "") : index,
			provider: item.provider || "",
			breakpoint: breakpoint ?? DEFAULT_BREAKPOINT$1,
			displayLabel,
			value: await getTransformedValue(item, bind, resolve)
		};
	};
	function getDisplayLabel({ label, state }) {
		if (!state) return label;
		if ((0, _elementor_editor_styles.isClassState)(state)) return `${label}.${state}`;
		if ((0, _elementor_editor_styles.isPseudoState)(state)) return `${label}:${state}`;
		throw new _elementor_editor_canvas.UnknownStyleStateError({ context: { state } });
	}
	var getTransformedValue = async (item, bind, resolve) => {
		try {
			const result = await resolve({ props: { [bind]: item.value } });
			const value = result?.[bind] ?? result;
			if ((0, react.isValidElement)(value)) return value;
			if (typeof value === "object") return JSON.stringify(value);
			return String(value);
		} catch {
			return "";
		}
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/breakpoint-icon.tsx
	var SIZE$1 = "tiny";
	var DEFAULT_BREAKPOINT = "desktop";
	var breakpointIconMap = {
		widescreen: _elementor_icons.WidescreenIcon,
		desktop: _elementor_icons.DesktopIcon,
		laptop: _elementor_icons.LaptopIcon,
		tablet_extra: _elementor_icons.TabletLandscapeIcon,
		tablet: _elementor_icons.TabletPortraitIcon,
		mobile_extra: _elementor_icons.MobileLandscapeIcon,
		mobile: _elementor_icons.MobilePortraitIcon
	};
	var BreakpointIcon = ({ breakpoint }) => {
		const breakpoints = (0, _elementor_editor_responsive.useBreakpoints)();
		const currentBreakpoint = breakpoint || DEFAULT_BREAKPOINT;
		const IconComponent = breakpointIconMap[currentBreakpoint];
		if (!IconComponent) return null;
		const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: breakpointLabel,
			placement: "top"
		}, /* @__PURE__ */ react.createElement(IconComponent, {
			fontSize: SIZE$1,
			sx: { mt: "2px" }
		}));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/label-chip.tsx
	var SIZE = "tiny";
	var LabelChip = ({ displayLabel, provider }) => {
		const chipIcon = provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: (0, _wordpress_i18n.__)("Inherited from base styles", "elementor"),
			placement: "top"
		}, /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleIcon, { fontSize: SIZE })) : void 0;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
			label: displayLabel,
			size: SIZE,
			color: getStylesProviderColorName(provider),
			variant: "standard",
			state: "enabled",
			icon: chipIcon,
			sx: (theme) => ({
				lineHeight: 1,
				flexWrap: "nowrap",
				alignItems: "center",
				borderRadius: `${theme.shape.borderRadius * .75}px`,
				flexDirection: "row-reverse",
				".MuiChip-label": {
					overflow: "hidden",
					textOverflow: "ellipsis",
					whiteSpace: "nowrap"
				}
			})
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/value-component.tsx
	var ValueComponent = ({ index, value }) => {
		return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: value,
			placement: "top"
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
			variant: "caption",
			color: "text.tertiary",
			sx: {
				mt: "1px",
				textDecoration: index === 0 ? "none" : "line-through",
				overflow: "hidden",
				display: "-webkit-box",
				WebkitLineClamp: 1,
				WebkitBoxOrient: "vertical",
				pl: 2.5,
				minWidth: 0,
				maxWidth: "100%"
			}
		}, value));
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/action-icons.tsx
	var ActionIcons = () => /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
		display: "flex",
		gap: .5,
		alignItems: "center"
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-infotip.tsx
	var SECTION_PADDING_INLINE = 32;
	var INFOTIP_MAX_WIDTH = 496;
	var StylesInheritanceInfotip = ({ inheritanceChain, propType, path, label, children, isDisabled }) => {
		const [showInfotip, setShowInfotip] = (0, react.useState)(false);
		const triggerRef = (0, react.useRef)(null);
		const toggleInfotip = () => {
			if (isDisabled) return;
			setShowInfotip((prev) => !prev);
		};
		const closeInfotip = () => {
			if (isDisabled) return;
			setShowInfotip(false);
		};
		const key = path.join(".");
		const sectionWidth = (0, _elementor_editor_ui.useSectionWidth)();
		const items = useNormalizedInheritanceChainItems(inheritanceChain, key, (0, react.useMemo)(() => {
			return (0, _elementor_editor_canvas.createPropsResolver)({
				transformers: _elementor_editor_canvas.stylesInheritanceTransformersRegistry,
				schema: { [key]: propType }
			});
		}, [key, propType]));
		const infotipContent = /* @__PURE__ */ react.createElement(_elementor_ui.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ react.createElement(_elementor_ui.Card, {
			elevation: 0,
			sx: {
				width: `${sectionWidth - SECTION_PADDING_INLINE}px`,
				maxWidth: INFOTIP_MAX_WIDTH,
				maxHeight: 268,
				overflowX: "hidden",
				display: "flex",
				flexDirection: "column"
			}
		}, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
			position: "sticky",
			top: 0,
			zIndex: 1,
			backgroundColor: "background.paper"
		} }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, {
			title: (0, _wordpress_i18n.__)("Style origin", "elementor"),
			onClose: closeInfotip
		})), /* @__PURE__ */ react.createElement(_elementor_ui.CardContent, { sx: {
			display: "flex",
			flexDirection: "column",
			p: 0,
			flex: 1,
			overflow: "auto",
			"&:last-child": { pb: 0 }
		} }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			gap: 1.5,
			sx: {
				pl: 2,
				pr: 1,
				pt: 1.5,
				pb: 1.5
			},
			role: "list"
		}, items.map((item, index) => {
			return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
				key: item.id,
				display: "flex",
				gap: .5,
				role: "listitem",
				"aria-label": (0, _wordpress_i18n.__)("Inheritance item: %s", "elementor").replace("%s", item.displayLabel)
			}, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
				display: "flex",
				gap: .5,
				sx: {
					flexWrap: "wrap",
					width: "100%",
					alignItems: "flex-start"
				}
			}, /* @__PURE__ */ react.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ react.createElement(LabelChip, {
				displayLabel: item.displayLabel,
				provider: item.provider
			}), /* @__PURE__ */ react.createElement(ValueComponent, {
				index,
				value: item.value
			})), /* @__PURE__ */ react.createElement(ActionIcons, null));
		})))));
		if (isDisabled) return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { display: "inline-flex" } }, children);
		return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
			ref: triggerRef,
			sx: { display: "inline-flex" }
		}, /* @__PURE__ */ react.createElement(TooltipOrInfotip, {
			showInfotip,
			onClose: closeInfotip,
			infotipContent,
			isDisabled
		}, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
			onClick: toggleInfotip,
			"aria-label": label,
			sx: { my: "-1px" },
			disabled: isDisabled
		}, children)));
	};
	function TooltipOrInfotip({ children, showInfotip, onClose, infotipContent, isDisabled }) {
		if (isDisabled) return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { display: "inline-flex" } }, children);
		if (showInfotip) return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Backdrop, {
			open: showInfotip,
			onClick: onClose,
			sx: {
				backgroundColor: "transparent",
				zIndex: (theme) => theme.zIndex.modal - 1
			}
		}), /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
			placement: "top-end",
			content: infotipContent,
			open: showInfotip,
			onClose,
			disableHoverListener: true
		}, children));
		return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
			title: (0, _wordpress_i18n.__)("Style origin", "elementor"),
			placement: "top"
		}, children);
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-indicator.tsx
	var StylesInheritanceIndicator = ({ customContext }) => {
		const context = (0, _elementor_editor_controls.useBoundProp)();
		const { path, propType } = customContext || context;
		const inheritanceChain = useStylesInheritanceChain(path);
		if (!path || !inheritanceChain.length) return null;
		return /* @__PURE__ */ react.createElement(Indicator, {
			inheritanceChain,
			path,
			propType
		});
	};
	var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
		const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
		const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null;
		const hasValue = !(0, _elementor_editor_props.isEmpty)(currentItem?.value);
		const [actualStyle] = inheritanceChain;
		if (actualStyle.provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return null;
		const isFinalValue = currentItem === actualStyle;
		const label = getLabel({
			isFinalValue,
			hasValue
		});
		const styleIndicatorProps = {
			getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
			isOverridden: hasValue && !isFinalValue ? true : void 0
		};
		return /* @__PURE__ */ react.createElement(StylesInheritanceInfotip, {
			inheritanceChain,
			path,
			propType,
			label,
			isDisabled
		}, /* @__PURE__ */ react.createElement(StyleIndicator, { ...styleIndicatorProps }));
	};
	var getLabel = ({ isFinalValue, hasValue }) => {
		if (isFinalValue) return (0, _wordpress_i18n.__)("This is the final value", "elementor");
		if (hasValue) return (0, _wordpress_i18n.__)("This value is overridden by another style", "elementor");
		return (0, _wordpress_i18n.__)("This has value from another style", "elementor");
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/consts.ts
	var excludePropTypeTransformers = /* @__PURE__ */ new Set([
		"background-color-overlay",
		"background-image-overlay",
		"background-gradient-overlay",
		"gradient-color-stop",
		"color-stop",
		"background-image-position-offset",
		"background-image-size-scale",
		"image-src",
		"image",
		"background-overlay"
	]);

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/array-transformer.tsx
	var arrayTransformer = (0, _elementor_editor_canvas.createTransformer)((values) => {
		if (!values || values.length === 0) return null;
		if (values.every((item) => typeof item === "string" || typeof item === "number")) return values.join(" ");
		return /* @__PURE__ */ react.createElement(react.Fragment, null, values.map((item, index) => /* @__PURE__ */ react.createElement(react.Fragment, { key: index }, index > 0 && " ", item)));
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
	var backgroundColorOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		direction: "row",
		gap: 1,
		alignItems: "center"
	}, /* @__PURE__ */ react.createElement(ItemLabelColor, { value })));
	var ItemLabelColor = ({ value: { color } }) => {
		return /* @__PURE__ */ react.createElement("span", null, color);
	};
	var StyledUnstableColorIndicator = (0, _elementor_ui.styled)(_elementor_ui.UnstableColorIndicator)(({ theme }) => ({
		width: "1em",
		height: "1em",
		borderRadius: `${theme.shape.borderRadius / 2}px`,
		outline: `1px solid ${theme.palette.action.disabled}`,
		flexShrink: 0
	}));

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
	var backgroundGradientOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		direction: "row",
		gap: 1,
		alignItems: "center"
	}, /* @__PURE__ */ react.createElement(ItemIconGradient, { value }), /* @__PURE__ */ react.createElement(ItemLabelGradient, { value })));
	var ItemIconGradient = ({ value }) => {
		const gradient = getGradientValue(value);
		return /* @__PURE__ */ react.createElement(StyledUnstableColorIndicator, {
			size: "inherit",
			component: "span",
			value: gradient
		});
	};
	var ItemLabelGradient = ({ value }) => {
		if (value.type === "linear") return /* @__PURE__ */ react.createElement("span", null, (0, _wordpress_i18n.__)("Linear gradient", "elementor"));
		return /* @__PURE__ */ react.createElement("span", null, (0, _wordpress_i18n.__)("Radial gradient", "elementor"));
	};
	var getGradientValue = (gradient) => {
		const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
		if (gradient.type === "linear") return `linear-gradient(${gradient.angle}deg, ${stops})`;
		return `radial-gradient(circle at ${gradient.positions}, ${stops})`;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
	var backgroundImageOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
		direction: "row",
		gap: 1,
		alignItems: "center"
	}, /* @__PURE__ */ react.createElement(ItemIconImage, { value }), /* @__PURE__ */ react.createElement(ItemLabelImage, { value })));
	var ItemIconImage = ({ value }) => {
		const { imageUrl } = useImage(value);
		return /* @__PURE__ */ react.createElement(_elementor_ui.CardMedia, {
			image: imageUrl,
			sx: (theme) => ({
				height: "1em",
				width: "1em",
				borderRadius: `${theme.shape.borderRadius / 2}px`,
				outline: `1px solid ${theme.palette.action.disabled}`,
				flexShrink: 0
			})
		});
	};
	var ItemLabelImage = ({ value }) => {
		const { imageTitle } = useImage(value);
		return /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ react.createElement("span", null, imageTitle));
	};
	var useImage = (image) => {
		let imageTitle;
		let imageUrl = null;
		const imageSrc = image?.image.src;
		const { data: attachment } = (0, _elementor_wp_media.useWpMediaAttachment)(imageSrc.id || null);
		if (imageSrc.id) {
			const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename);
			imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null;
			imageUrl = attachment?.url || null;
		} else if (imageSrc.url) {
			imageUrl = imageSrc.url;
			imageTitle = imageUrl?.substring(imageUrl.lastIndexOf("/") + 1) || null;
		}
		return {
			imageTitle,
			imageUrl
		};
	};
	var getFileExtensionFromFilename = (filename) => {
		if (!filename) return "";
		return `.${filename.substring(filename.lastIndexOf(".") + 1)}`;
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/box-shadow-transformer.tsx
	var boxShadowTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => {
		if (!value) return null;
		const { color, hOffset, vOffset, blur, spread, position } = value;
		const colorValue = color || "#000000";
		const sizes = [
			hOffset || "0px",
			vOffset || "0px",
			blur || "10px",
			spread || "0px"
		].join(" ");
		const positionValue = position || "outset";
		return /* @__PURE__ */ react.createElement(react.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/color-transformer.tsx
	function isValidCSSColor(value) {
		if (!value.trim()) return false;
		return CSS.supports("color", value.trim());
	}
	var StyledColorIndicator = (0, _elementor_ui.styled)(_elementor_ui.UnstableColorIndicator)(({ theme }) => ({
		width: "1em",
		height: "1em",
		borderRadius: `${theme.shape.borderRadius / 2}px`,
		outline: `1px solid ${theme.palette.action.disabled}`,
		flexShrink: 0
	}));
	var colorTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => {
		if (!isValidCSSColor(value)) return value;
		return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
			direction: "row",
			gap: 1,
			alignItems: "center"
		}, /* @__PURE__ */ react.createElement(StyledColorIndicator, {
			size: "inherit",
			component: "span",
			value
		}), /* @__PURE__ */ react.createElement("span", null, value));
	});

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
	var createRepeaterToItemsTransformer = (originalTransformer) => {
		return (0, _elementor_editor_canvas.createTransformer)((value, options) => {
			const stringResult = originalTransformer(value, options);
			if (!stringResult || typeof stringResult !== "string") return stringResult;
			return stringResult;
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/init-styles-inheritance-transformers.ts
	function initStylesInheritanceTransformers() {
		const originalStyleTransformers = _elementor_editor_canvas.styleTransformersRegistry.all();
		Object.entries(originalStyleTransformers).forEach(([propType, transformer]) => {
			if (excludePropTypeTransformers.has(propType)) return;
			_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register(propType, transformer);
		});
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.registerFallback((0, _elementor_editor_canvas.createTransformer)((value) => {
			return value;
		}));
		registerCustomTransformers(originalStyleTransformers);
	}
	function registerCustomTransformers(originalStyleTransformers) {
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("color", colorTransformer);
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-color-overlay", backgroundColorOverlayTransformer);
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-gradient-overlay", backgroundGradientOverlayTransformer);
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-image-overlay", backgroundImageOverlayTransformer);
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("shadow", boxShadowTransformer);
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("filter", createRepeaterToItemsTransformer(originalStyleTransformers.filter));
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("backdrop-filter", createRepeaterToItemsTransformer(originalStyleTransformers["backdrop-filter"]));
		_elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("transition", createRepeaterToItemsTransformer(originalStyleTransformers.transition));
		[
			"background-overlay",
			"box-shadow",
			"transform-functions"
		].forEach((propType) => _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register(propType, arrayTransformer));
	}

//#endregion
//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/init.ts
	var init$1 = /* @__PURE__ */ __name(() => {
		initStylesInheritanceTransformers();
		registerFieldIndicator({
			fieldType: FIELD_TYPE.STYLES,
			id: "styles-inheritance",
			priority: 1,
			indicator: StylesInheritanceIndicator
		});
	}, "init");

//#endregion
//#region packages/packages/core/editor-editing-panel/src/init.ts
	function init() {
		(0, _elementor_editor_panels.registerPanel)(panel);
		blockV1Panel();
		(0, _elementor_editor.injectIntoLogic)({
			id: "editing-panel-hooks",
			component: EditingPanelHooks
		});
		init$2();
		init$1();
		registerElementControls();
		initResetStyleProps();
		init$3();
	}
	var blockV1Panel = () => {
		(0, _elementor_editor_v1_adapters.blockCommand)({
			command: "panel/editor/open",
			condition: isAtomicWidgetSelected
		});
	};

//#endregion
//#region packages/packages/core/editor-editing-panel/src/index.ts
	var src_exports = /* @__PURE__ */ __exportAll({
		BaseControl: () => Control$1,
		ClassesPropProvider: () => ClassesPropProvider,
		ControlLabel: () => ControlLabel,
		ControlTypeContainer: () => ControlTypeContainer,
		CreatableAutocomplete: () => CreatableAutocomplete,
		CustomCssIndicator: () => CustomCssIndicator,
		DEFAULT_PSEUDO_STATES: () => DEFAULT_PSEUDO_STATES,
		EditingPanelTabs: () => EditingPanelTabs,
		ElementProvider: () => ElementProvider,
		FIELD_TYPE: () => FIELD_TYPE,
		HISTORY_DEBOUNCE_WAIT: () => 800,
		PseudoStateMenuItems: () => PseudoStateMenuItems,
		STYLE_SECTIONS: () => STYLE_SECTIONS,
		STYLE_SECTION_NAMES: () => STYLE_SECTION_NAMES,
		SectionContent: () => SectionContent,
		SectionsList: () => SectionsList,
		SettingsControl: () => SettingsControl,
		SettingsField: () => SettingsField,
		StyleIndicator: () => StyleIndicator,
		StyleInheritanceProvider: () => StyleInheritanceProvider,
		StyleProvider: () => StyleProvider,
		StyleSections: () => StyleSections,
		StyleTabSection: () => StyleTabSection,
		StyleTabSlot: () => StyleTabSlot,
		StylesProviderCannotUpdatePropsError: () => StylesProviderCannotUpdatePropsError,
		controlsRegistry: () => controlsRegistry,
		createTopLevelObjectType: () => createTopLevelObjectType,
		doApplyClasses: () => doApplyClasses,
		doGetAppliedClasses: () => doGetAppliedClasses,
		doUnapplyClass: () => doUnapplyClass,
		extractDependencyEffect: () => extractDependencyEffect,
		extractOrderedDependencies: () => extractOrderedDependencies,
		getElementSettingsWithDefaults: () => getElementSettingsWithDefaults,
		getFieldIndicators: () => getFieldIndicators,
		getSubtitle: () => getSubtitle,
		getTitle: () => getTitle,
		getUpdatedValues: () => getUpdatedValues,
		init: () => init,
		injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
		injectIntoCssClassConvert: () => injectIntoCssClassConvert,
		injectIntoGridFields: () => injectIntoGridFields,
		injectIntoPanelHeaderTop: () => injectIntoPanelHeaderTop,
		injectIntoStyleTab: () => injectIntoStyleTab,
		isDynamicPropValue: () => isDynamicPropValue,
		registerEditingPanelReplacement: () => registerEditingPanelReplacement,
		registerElementPanelDefaults: () => registerElementPanelDefaults,
		registerFieldIndicator: () => registerFieldIndicator,
		registerStyleProviderToColors: () => registerStyleProviderToColors,
		setLicenseConfig: () => setLicenseConfig,
		useClassesProp: () => useClassesProp,
		useCustomCss: () => useCustomCss,
		useElement: () => useElement,
		usePanelActions: () => usePanelActions,
		usePanelStatus: () => usePanelStatus,
		usePseudoStates: () => usePseudoStates,
		useStateByElement: () => useStateByElement,
		useStyle: () => useStyle,
		useStylesRerender: () => useStylesRerender
	});

//#endregion
//#region \0elementor-package-library-entry
	(window.elementorV2 = window.elementorV2 || {}).editorEditingPanel = src_exports;

//#endregion
})(React, elementorV2.ui, elementorV2.editorElements, elementorV2.editorProps, elementorV2.locations, elementorV2.session, elementorV2.editorStylesRepository, elementorV2.utils, elementorV2.editorControls, elementorV2.icons, elementorV2.editorUi, wp.i18n, elementorV2.editorStyles, elementorV2.editorV1Adapters, elementorV2.editorDocuments, elementorV2.editorResponsive, elementorV2.editorPanels, elementorV2.menus, elementorV2.editorInteractions, elementorV2.editorVariables, elementorV2.editorCanvas, elementorV2.editor, elementorV2.schema, elementorV2.wpMedia);
window.elementorV2.editorEditingPanel?.init?.();
//# sourceMappingURL=editor-editing-panel.js.map
```