@elementor/editor-editing-panel 4.2.0-847 → 4.2.0-849

package/dist/index.js

@@ -227,7 +227,7 @@ var onConvert = (opts) => {
 // src/components/css-classes/css-class-selector.tsx
 var React11 = __toESM(require("react"));
 var import_react10 = require("react");
-var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
 var import_locations2 = require("@elementor/locations");
@@ -611,7 +611,7 @@ var StyledGroupItems = (0, import_ui2.styled)("ul")`
 var React10 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
-var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_session3 = require("@elementor/session");
@@ -635,7 +635,7 @@ function CssClassProvider({ children, ...contextValue }) {
 
 // src/components/css-classes/css-class-menu.tsx
 var React9 = __toESM(require("react"));
-var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui5 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -659,7 +659,7 @@ var StyleIndicator = (0, import_ui3.styled)("div", {
 
 // src/components/css-classes/duplicate-class-menu-item.tsx
 var React7 = __toESM(require("react"));
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_session2 = require("@elementor/session");
 var import_i18n2 = require("@wordpress/i18n");
@@ -667,7 +667,7 @@ var import_i18n2 = require("@wordpress/i18n");
 // src/components/css-classes/use-apply-and-unapply-class.ts
 var import_react8 = require("react");
 var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 
@@ -675,6 +675,7 @@ var import_i18n = require("@wordpress/i18n");
 var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 function doGetAppliedClasses(elementId, classesPropType = "classes") {
   return (0, import_editor_elements2.getElementSetting)(elementId, classesPropType)?.value || [];
 }
@@ -685,6 +686,17 @@ function doApplyClasses(elementId, classIds, classesPropType = "classes") {
     withHistory: false
   });
   (0, import_editor_documents.setDocumentModifiedStatus)(true);
+  ensureClassesAreLoaded(classIds);
+}
+function ensureClassesAreLoaded(classIds) {
+  const providers = import_editor_styles_repository4.stylesRepository.getProviders();
+  classIds.forEach((classId) => {
+    import_editor_styles_repository4.stylesRepository.getProviderByKey(classId)?.actions.get(classId);
+    const owningProvider = providers.find(
+      (provider) => provider.actions.all().some((style) => style.id === classId)
+    );
+    owningProvider?.actions.get(classId);
+  });
 }
 function doUnapplyClass(elementId, classId, classesPropType = "classes") {
   const appliedClasses = (0, import_editor_elements2.getElementSetting)(elementId, classesPropType)?.value || [];
@@ -753,7 +765,7 @@ function useUnapplyClass() {
 }
 function useCreateAndApplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
-  const [provider, createAction] = (0, import_editor_styles_repository4.useGetStylesRepositoryCreateAction)() ?? [null, null];
+  const [provider, createAction] = (0, import_editor_styles_repository5.useGetStylesRepositoryCreateAction)() ?? [null, null];
   const deleteAction = provider?.actions.delete;
   const applyClass = useApply();
   const unapplyClass = useUnapply();
@@ -859,13 +871,13 @@ function getUniqueDuplicateLabel(originalLabel, existingLabels) {
 }
 function DuplicateClassMenuItem({ closeMenu }) {
   const { id: classId, provider } = useCssClass();
-  const { userCan } = (0, import_editor_styles_repository5.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository6.useUserStylesCapability)();
   const applyClass = useApplyClass();
   const [, setPendingEditId] = (0, import_session2.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app");
   if (!provider || !classId) {
     return null;
   }
-  const providerInstance = import_editor_styles_repository5.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository6.stylesRepository.getProviderByKey(provider);
   const createAction = providerInstance?.actions.create;
   const getAction = providerInstance?.actions.get;
   if (!createAction || !getAction) {
@@ -903,12 +915,12 @@ var import_ui4 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/css-classes/use-can-convert-local-class-to-global.ts
-var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
 var useCanConvertLocalClassToGlobal = () => {
   const { element } = useElement();
   const { provider, id, meta } = useStyle();
   const styleDef = provider?.actions.get(id, { elementId: element.id, ...meta });
-  const isLocalStylesProvider = provider && (0, import_editor_styles_repository6.isElementsStylesProvider)(provider?.getKey());
+  const isLocalStylesProvider = provider && (0, import_editor_styles_repository7.isElementsStylesProvider)(provider?.getKey());
   const variants = styleDef?.variants || [];
   const canConvert = !!(isLocalStylesProvider && variants.length);
   return {
@@ -944,7 +956,7 @@ function usePseudoStates() {
 }
 function CssClassMenu({ popupState, anchorEl, fixed }) {
   const { provider } = useCssClass();
-  const isLocalStyle2 = provider ? (0, import_editor_styles_repository7.isElementsStylesProvider)(provider) : true;
+  const isLocalStyle2 = provider ? (0, import_editor_styles_repository8.isElementsStylesProvider)(provider) : true;
   const pseudoStates = usePseudoStates();
   const handleKeyDown = (e) => {
     e.stopPropagation();
@@ -1021,7 +1033,7 @@ function useElementStates() {
 }
 function useModifiedStates(styleId) {
   const { meta } = useStyle();
-  const styleDef = import_editor_styles_repository7.stylesRepository.all().find((style) => style.id === styleId);
+  const styleDef = import_editor_styles_repository8.stylesRepository.all().find((style) => style.id === styleId);
   return Object.fromEntries(
     styleDef?.variants.filter((variant) => meta.breakpoint === variant.meta.breakpoint).map((variant) => [variant.meta.state ?? "normal", true]) ?? []
   );
@@ -1034,7 +1046,7 @@ function getMenuItemsByProvider({
   if (!provider) {
     return [];
   }
-  const providerInstance = import_editor_styles_repository7.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository8.stylesRepository.getProviderByKey(provider);
   const providerActions = providerInstance?.actions;
   const canUpdate = providerActions?.update;
   const canDuplicate = providerActions?.create && providerActions?.get;
@@ -1063,7 +1075,7 @@ 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, import_editor_styles_repository7.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
   const modifiedStates = useModifiedStates(styleId);
   const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
   const isStyled = modifiedStates[state ?? "normal"] ?? false;
@@ -1128,7 +1140,7 @@ function UnapplyClassMenuItem({ closeMenu, ...props }) {
 }
 function RenameClassMenuItem({ closeMenu }) {
   const { handleRename, provider } = useCssClass();
-  const { userCan } = (0, import_editor_styles_repository7.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
   if (!provider) {
     return null;
   }
@@ -1166,7 +1178,7 @@ function CssClassItem(props) {
   const popupState = (0, import_ui6.usePopupState)({ variant: "popover" });
   const [chipRef, setChipRef] = (0, import_react9.useState)(null);
   const { onDelete, ...chipGroupProps } = chipProps;
-  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository9.useUserStylesCapability)();
   const [convertedFromLocalId, , clearConvertedFromLocalId] = (0, import_session3.useSessionStorage)(
     PENDING_CLASS_RENAME_SESSION_KEY,
     "app"
@@ -1184,7 +1196,7 @@ function CssClassItem(props) {
     onError: setError
   });
   const color = error ? "error" : colorProp;
-  const providerActions = provider ? import_editor_styles_repository8.stylesRepository.getProviderByKey(provider)?.actions : null;
+  const providerActions = provider ? import_editor_styles_repository9.stylesRepository.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   const stateLabel = (0, import_react9.useMemo)(() => {
@@ -1263,7 +1275,7 @@ function CssClassItem(props) {
   ), /* @__PURE__ */ React10.createElement(CssClassProvider, { ...classProps, handleRename: openEditMode }, /* @__PURE__ */ React10.createElement(CssClassMenu, { popupState, anchorEl: chipRef, fixed })));
 }
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository8.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository9.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -1292,7 +1304,7 @@ function CssClassSelector() {
   const appliedOptions = useAppliedOptions(options13);
   const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
-  const { userCan } = (0, import_editor_styles_repository9.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository10.useUserStylesCapability)();
   const canEdit = active.provider ? userCan(active.provider).updateProps : true;
   return /* @__PURE__ */ React11.createElement(import_ui7.Stack, { p: 2 }, /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React11.createElement(import_ui7.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n6.__)("Classes", "elementor")), /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React11.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React11.createElement(
     import_editor_ui4.WarningInfotip,
@@ -1374,7 +1386,7 @@ var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
   }
-  const providerInstance = import_editor_styles_repository9.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository10.stylesRepository.getProviderByKey(provider);
   if (!providerInstance) {
     return;
   }
@@ -1383,8 +1395,8 @@ var updateClassByProvider = (provider, data) => {
 function useOptions() {
   const { element } = useElement();
   const isProviderEditable = (provider) => !!provider.actions.updateProps;
-  return (0, import_editor_styles_repository9.useProviders)().filter(isProviderEditable).flatMap((provider) => {
-    const isElements = (0, import_editor_styles_repository9.isElementsStylesProvider)(provider.getKey());
+  return (0, import_editor_styles_repository10.useProviders)().filter(isProviderEditable).flatMap((provider) => {
+    const isElements = (0, import_editor_styles_repository10.isElementsStylesProvider)(provider.getKey());
     const styleDefs = provider.actions.all({ elementId: element.id });
     if (isElements && styleDefs.length === 0) {
       return [EMPTY_OPTION];
@@ -1431,7 +1443,7 @@ function useCreateAction() {
         ).replace("%s", provider.limit.toString())
       };
     }
-    return (0, import_editor_styles_repository9.validateStyleLabel)(newClassLabel, event);
+    return (0, import_editor_styles_repository10.validateStyleLabel)(newClassLabel, event);
   };
   const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
   return { create, validate, entityName };
@@ -1444,7 +1456,7 @@ function useAppliedOptions(options13) {
   const appliedIds = usePanelElementSetting(currentClassesProp)?.value ?? [];
   const appliedOptions = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = appliedOptions.some(
-    (option) => option.provider && (0, import_editor_styles_repository9.isElementsStylesProvider)(option.provider)
+    (option) => option.provider && (0, import_editor_styles_repository10.isElementsStylesProvider)(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
     appliedOptions.unshift(EMPTY_OPTION);
@@ -1488,7 +1500,7 @@ var import_react13 = require("react");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props3 = require("@elementor/editor-props");
 var import_editor_styles3 = require("@elementor/editor-styles");
-var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_utils2 = require("@elementor/utils");
 
@@ -1496,8 +1508,8 @@ var import_utils2 = require("@elementor/utils");
 var import_react12 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
 
@@ -1548,7 +1560,7 @@ function useUndoableActions({
   const classesProp = useClassesProp();
   return (0, import_react12.useMemo)(() => {
     const meta = { breakpoint, state };
-    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository11.ELEMENTS_STYLES_RESERVED_LABEL };
+    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository12.ELEMENTS_STYLES_RESERVED_LABEL };
     return (0, import_editor_v1_adapters2.undoable)(
       {
         do: (payload) => {
@@ -1632,7 +1644,7 @@ var localStyleHistoryTitles = {
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
-var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, import_editor_styles_repository10.isElementsStylesProvider)(provider.getKey());
+var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, import_editor_styles_repository11.isElementsStylesProvider)(provider.getKey());
 var getTitle = ({ provider, styleId, elementId }) => {
   const isLocal = isLocalStyle(provider, styleId);
   if (isLocal) {
@@ -1687,7 +1699,7 @@ function useUndoableActions2({
   const classesProp = useClassesProp();
   return (0, import_react13.useMemo)(() => {
     const meta = { breakpoint, state };
-    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository12.ELEMENTS_STYLES_RESERVED_LABEL };
+    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository13.ELEMENTS_STYLES_RESERVED_LABEL };
     return (0, import_editor_v1_adapters3.undoable)(
       {
         do: (payload) => {
@@ -2544,7 +2556,7 @@ function isControl(control) {
 // src/components/style-tab.tsx
 var React85 = __toESM(require("react"));
 var import_react37 = require("react");
-var import_editor_props14 = require("@elementor/editor-props");
+var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
 var import_session8 = require("@elementor/session");
@@ -2558,7 +2570,7 @@ var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles5 = require("@elementor/editor-styles");
-var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
 
 // src/styles-inheritance/create-styles-inheritance.ts
 var import_editor_props7 = require("@elementor/editor-props");
@@ -2832,7 +2844,7 @@ var useAppliedStyles = () => {
   useStylesRerender();
   const classesProp = usePanelElementSetting(currentClassesProp);
   const appliedStyles = import_editor_props8.classesPropTypeUtil.extract(classesProp) ?? [];
-  return import_editor_styles_repository13.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
+  return import_editor_styles_repository14.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
   const { elementType } = useElement();
@@ -4123,47 +4135,99 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React50.createElement(StylesFi
 var React51 = __toESM(require("react"));
 var import_react27 = require("react");
 var import_editor_controls26 = require("@elementor/editor-controls");
+var import_editor_props14 = require("@elementor/editor-props");
 var import_ui30 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 var FR = "fr";
 var CUSTOM2 = "custom";
 var UNITS = [FR, CUSTOM2];
+var EMPTY = { kind: "empty" };
 var REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
-var cssToTrackValue = (css) => {
+var parseCss = (css) => {
   if (!css) {
-    return null;
+    return EMPTY;
   }
   const match = css.match(REPEAT_FR_PATTERN);
   if (match) {
-    return { size: parseInt(match[1], 10), unit: FR };
+    const count = parseInt(match[1], 10);
+    return count >= 1 ? { kind: "fr", count } : EMPTY;
   }
-  return { size: css, unit: CUSTOM2 };
+  return { kind: "custom", raw: css };
 };
-var trackValueToCss = (trackValue) => {
-  if (!trackValue || trackValue.size === "" || trackValue.size === null) {
-    return null;
+var fromSizeInput = (v) => {
+  if (v.size === "" || Number.isNaN(v.size)) {
+    return EMPTY;
   }
-  if (trackValue.unit === FR) {
-    return `repeat(${trackValue.size}, 1fr)`;
+  if (v.unit === FR) {
+    const n = Number(v.size);
+    return Number.isFinite(n) && n >= 1 ? { kind: "fr", count: Math.trunc(n) } : EMPTY;
   }
-  return String(trackValue.size);
+  return { kind: "custom", raw: String(v.size) };
 };
-var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label }));
+var toCss = (v) => {
+  switch (v.kind) {
+    case "empty":
+      return null;
+    case "fr":
+      return `repeat(${v.count}, 1fr)`;
+    case "custom":
+      return v.raw;
+  }
+};
+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: CUSTOM2 };
+  }
+};
+var toPlaceholder = (v) => {
+  switch (v.kind) {
+    case "empty":
+      return void 0;
+    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 CUSTOM2;
+  }
+  return fallback;
+};
+var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label })));
 var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
+  const { placeholder: inheritedPlaceholder } = (0, import_editor_controls26.useBoundProp)();
   const anchorRef = (0, import_react27.useRef)(null);
-  const trackValue = cssToTrackValue(value?.value ?? null);
-  const handleChange = (newValue) => {
-    const css = trackValueToCss(newValue);
-    setValue(css ? { $$type: "string", value: css } : null);
+  const local = parseCss(value?.value ?? null);
+  const inherited = parseCss(import_editor_props14.stringPropTypeUtil.extract(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;
+    }
+    const css = toCss(next);
+    setValue(css === null ? null : { $$type: "string", value: css });
   };
   return /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React51.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React51.createElement(
     import_editor_controls26.SizeComponent,
     {
       units: UNITS,
-      value: trackValue ?? { size: NaN, unit: FR },
+      value: displayValue,
+      placeholder,
       defaultUnit: FR,
       setValue: handleChange,
       onBlur: () => {
@@ -4542,7 +4606,7 @@ var import_editor_ui6 = require("@elementor/editor-ui");
 
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
 var React61 = __toESM(require("react"));
-var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
 var import_ui36 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 var StylesInheritanceSectionIndicators = ({ fields }) => {
@@ -4564,7 +4628,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
-      "data-variant": (0, import_editor_styles_repository14.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
+      "data-variant": (0, import_editor_styles_repository15.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
       role: "listitem",
       "aria-label": hasValueLabel
     }
@@ -5278,7 +5342,7 @@ function ClassesHeader({ children }) {
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props14.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props15.CLASSES_PROP_KEY
   );
   if (!prop) {
     return null;
@@ -5429,7 +5493,7 @@ var init = () => {
 var React89 = __toESM(require("react"));
 var import_editor_controls58 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
-var import_editor_props16 = require("@elementor/editor-props");
+var import_editor_props17 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 var import_ui43 = require("@elementor/ui");
 var import_i18n64 = require("@wordpress/i18n");
@@ -5450,12 +5514,12 @@ var getElementByType = (elementId, type) => {
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
 var import_editor_controls57 = require("@elementor/editor-controls");
 var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_props15 = require("@elementor/editor-props");
+var import_editor_props16 = require("@elementor/editor-props");
 var import_i18n63 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions = () => {
-  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls57.useBoundProp)(import_editor_props15.numberPropTypeUtil);
+  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls57.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const defaultActiveTab = value ?? 0;
   const duplicateItem = ({
     items: items3,
@@ -5716,7 +5780,7 @@ var ItemLabel = ({ value, index }) => {
   return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value: defaultItem } = (0, import_editor_controls58.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -5730,7 +5794,7 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React89.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Set as default tab", "elementor")), /* @__PURE__ */ React89.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React89.createElement(
     import_ui43.Switch,
@@ -5810,7 +5874,7 @@ var import_menus2 = require("@elementor/menus");
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var React90 = __toESM(require("react"));
 var import_editor_controls60 = require("@elementor/editor-controls");
-var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_props19 = require("@elementor/editor-props");
 var import_icons27 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
@@ -5866,11 +5930,11 @@ var filterByLicense = (tags) => {
 };
 
 // src/dynamics/utils.ts
-var import_editor_props17 = require("@elementor/editor-props");
+var import_editor_props18 = require("@elementor/editor-props");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_schema = require("@elementor/schema");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
-var dynamicPropTypeUtil = (0, import_editor_props17.createPropUtils)(
+var dynamicPropTypeUtil = (0, import_editor_props18.createPropUtils)(
   DYNAMIC_PROP_TYPE_KEY,
   import_schema.z.strictObject({
     name: import_schema.z.string(),
@@ -5887,7 +5951,7 @@ var getDynamicPropType = (propType) => {
   return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
 };
 var isDynamicPropValue = (prop) => {
-  return (0, import_editor_props17.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+  return (0, import_editor_props18.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
 };
 var supportsDynamic = (propType) => {
   return !!getDynamicPropType(propType);
@@ -5948,7 +6012,7 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(import_icons27.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = (0, import_editor_controls60.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
+  const context = (0, import_editor_controls60.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React90.createElement(import_editor_controls60.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React90.createElement(import_editor_controls60.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React90.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
@@ -5985,7 +6049,7 @@ var import_editor_controls61 = require("@elementor/editor-controls");
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React91 = __toESM(require("react"));
 var import_react44 = require("react");
-var import_editor_props19 = require("@elementor/editor-props");
+var import_editor_props20 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
   propType,
@@ -6027,7 +6091,7 @@ var DynamicConditionalControl = ({
   if (!propType?.dependencies?.terms.length) {
     return /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
   }
-  const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
+  const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
   return isHidden ? null : /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
 };
 
@@ -6405,7 +6469,7 @@ function ControlsItemsStack({ items: items3 }) {
 
 // src/dynamics/dynamic-transformer.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_props20 = require("@elementor/editor-props");
+var import_editor_props21 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
 var import_utils9 = require("@elementor/utils");
@@ -6423,7 +6487,7 @@ var dynamicTransformer = (0, import_editor_canvas2.createTransformer)((value, {
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = (0, import_editor_props20.isTransformable)(settingValue) ? settingValue.value : settingValue;
+    const value = (0, import_editor_props21.isTransformable)(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);
@@ -6583,8 +6647,8 @@ function useResetStyleValueProps() {
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 var React101 = __toESM(require("react"));
 var import_editor_controls67 = require("@elementor/editor-controls");
-var import_editor_props21 = require("@elementor/editor-props");
-var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
+var import_editor_props22 = require("@elementor/editor-props");
+var import_editor_styles_repository18 = require("@elementor/editor-styles-repository");
 var import_i18n72 = require("@wordpress/i18n");
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
@@ -6599,7 +6663,7 @@ var import_i18n71 = require("@wordpress/i18n");
 var import_react46 = require("react");
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_styles8 = require("@elementor/editor-styles");
-var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
 var import_i18n69 = require("@wordpress/i18n");
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
@@ -6611,7 +6675,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
       );
       const validItems = normalizedItems.map((item) => ({
         ...item,
-        displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
+        displayLabel: import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
       })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
       setItems(validItems);
     })();
@@ -6696,13 +6760,13 @@ var BreakpointIcon = ({ breakpoint }) => {
 
 // src/styles-inheritance/components/infotip/label-chip.tsx
 var React97 = __toESM(require("react"));
-var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
 var import_icons33 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var LabelChip = ({ displayLabel, provider }) => {
-  const isBaseStyle = provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const isBaseStyle = provider === import_editor_styles_repository17.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
   const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui47.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons33.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
   return /* @__PURE__ */ React97.createElement(
     import_ui47.Chip,
@@ -6935,9 +6999,9 @@ var StylesInheritanceIndicator = ({
 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, import_editor_props21.isEmpty)(currentItem?.value);
+  const hasValue = !(0, import_editor_props22.isEmpty)(currentItem?.value);
   const [actualStyle] = inheritanceChain;
-  if (actualStyle.provider === import_editor_styles_repository17.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+  if (actualStyle.provider === import_editor_styles_repository18.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
     return null;
   }
   const isFinalValue = currentItem === actualStyle;