@elementor/editor-editing-panel 1.27.0 → 1.29.0

package/dist/index.mjs

@@ -10,14 +10,15 @@ import * as React7 from "react";
 import { getElementSetting, updateElementSettings as updateElementSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
-  ELEMENTS_STYLES_PROVIDER_KEY as ELEMENTS_STYLES_PROVIDER_KEY2,
+  isElementsStylesProvider as isElementsStylesProvider2,
   stylesRepository as stylesRepository4,
   useCreateActionsByProvider,
-  useProviders
+  useProviders,
+  validateStyleLabel as validateStyleLabel2
 } from "@elementor/editor-styles-repository";
 import { MapPinIcon } from "@elementor/icons";
 import { createLocation } from "@elementor/locations";
-import { Chip as Chip2, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { Chip as Chip2, FormLabel, Stack as Stack3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/contexts/classes-prop-context.tsx
@@ -92,26 +93,21 @@ function useStyle() {
 }
 function getProviderByStyleId(styleId) {
   const styleProvider = stylesRepository.getProviders().find((provider) => {
-    return provider.actions.get().find((style) => style.id === styleId);
+    return provider.actions.all().find((style) => style.id === styleId);
   });
   return styleProvider ?? null;
 }
 
 // src/components/multi-combobox.tsx
 import * as React4 from "react";
-import { useId, useState } from "react";
-import {
-  Autocomplete,
-  Box,
-  createFilterOptions,
-  styled,
-  TextField
-} from "@elementor/ui";
+import { useState } from "react";
+import { Autocomplete, createFilterOptions, TextField } from "@elementor/ui";
 function MultiCombobox({
   actions = [],
   selected,
   options: options13,
   onSelect,
+  placeholder,
   ...props
 }) {
   const filter = useFilterOptions();
@@ -129,11 +125,11 @@ function MultiCombobox({
       disabled: loading,
       value: selected,
       options: options13,
-      renderGroup: (params) => /* @__PURE__ */ React4.createElement(Group, { ...params }),
       renderInput: (params) => /* @__PURE__ */ React4.createElement(
         TextField,
         {
           ...params,
+          placeholder,
           sx: (theme) => ({
             ".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart": {
               paddingLeft: theme.spacing(0.25),
@@ -176,28 +172,10 @@ function MultiCombobox({
         ];
       },
       groupBy: (option) => option.group ?? "",
-      renderOption: (optionProps, { label }) => /* @__PURE__ */ React4.createElement("li", { ...optionProps, style: { display: "block", textOverflow: "ellipsis" } }, label)
+      renderOption: (optionProps, { label, group }) => /* @__PURE__ */ React4.createElement("li", { ...optionProps, style: { display: "block", textOverflow: "ellipsis" }, "data-group": group }, label)
     }
   );
 }
-var Group = (params) => {
-  const id = `combobox-group-${useId().replace(/:/g, "_")}`;
-  return /* @__PURE__ */ React4.createElement(StyledGroup, { role: "group", "aria-labelledby": id }, /* @__PURE__ */ React4.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ React4.createElement(StyledGroupItems, { role: "listbox" }, params.children));
-};
-var StyledGroup = styled("li")`
-	&:not( :last-of-type ) {
-		border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-	}
-`;
-var StyledGroupHeader = styled(Box)(({ theme }) => ({
-  position: "sticky",
-  top: "-8px",
-  padding: theme.spacing(1, 2),
-  color: theme.palette.text.tertiary
-}));
-var StyledGroupItems = styled("ul")`
-	padding: 0;
-`;
 function useFilterOptions() {
   return useState(() => createFilterOptions())[0];
 }
@@ -230,7 +208,7 @@ function isAction(option) {
 // src/components/css-classes/css-class-item.tsx
 import * as React6 from "react";
 import { useState as useState2 } from "react";
-import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository3, validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
@@ -245,7 +223,7 @@ import { __ as __2 } from "@wordpress/i18n";
 
 // src/components/css-classes/css-class-menu.tsx
 import * as React5 from "react";
-import { ELEMENTS_STYLES_PROVIDER_KEY, stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { isElementsStylesProvider, stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { MenuListItem } from "@elementor/editor-ui";
 import { bindMenu, Divider, Menu, MenuSubheader, Stack } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
@@ -273,8 +251,8 @@ var useUnapplyClass = (classId) => {
 };
 
 // src/components/style-indicator.tsx
-import { styled as styled2 } from "@elementor/ui";
-var StyleIndicator = styled2("div", {
+import { styled } from "@elementor/ui";
+var StyleIndicator = styled("div", {
   shouldForwardProp: (prop) => prop !== "variant"
 })`
 	width: 5px;
@@ -298,7 +276,7 @@ var StyleIndicator = styled2("div", {
 var STATES = ["hover", "focus", "active"];
 function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl }) {
   const styledStates = useStyledStates(styleId);
-  const indicatorVariant = provider === ELEMENTS_STYLES_PROVIDER_KEY ? "local" : "global";
+  const indicatorVariant = !provider || isElementsStylesProvider(provider) ? "local" : "global";
   const handleKeyDown = (e) => {
     e.stopPropagation();
   };
@@ -316,7 +294,8 @@ function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl })
         horizontal: "left",
         vertical: -4
       },
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      disableAutoFocusItem: true
     },
     getMenuItemsByProvider({ provider, styleId, handleRename, closeMenu: popupState.close }),
     /* @__PURE__ */ React5.createElement(MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("States", "elementor")),
@@ -359,7 +338,7 @@ function getMenuItemsByProvider({
   handleRename,
   closeMenu
 }) {
-  if (!styleId) {
+  if (!styleId || !provider) {
     return [];
   }
   const providerInstance = stylesRepository2.getProviderByKey(provider);
@@ -449,8 +428,8 @@ function RenameClassMenuItem({
 var CHIP_SIZE = "tiny";
 function CssClassItem({
   id,
-  label,
   provider,
+  label,
   isActive,
   color: colorProp,
   icon,
@@ -474,7 +453,7 @@ function CssClassItem({
     validation: validateLabel
   });
   const color = error ? "error" : colorProp;
-  const providerActions = stylesRepository3.getProviderByKey(provider)?.actions;
+  const providerActions = provider ? stylesRepository3.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update);
   const isShowingState = isActive && meta.state;
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
@@ -549,13 +528,11 @@ function CssClassItem({
   ));
 }
 var validateLabel = (newLabel) => {
-  if (!stylesRepository3.isLabelValid(newLabel)) {
-    return __2("Invalid format", "elementor");
-  }
-  if (stylesRepository3.isLabelExist(newLabel)) {
-    return __2("Name exists", "elementor");
+  const result = validateStyleLabel(newLabel);
+  if (result.isValid) {
+    return null;
   }
-  return null;
+  return result.error;
 };
 
 // src/components/css-classes/css-class-selector.tsx
@@ -567,7 +544,7 @@ var EMPTY_OPTION = {
   fixed: true,
   color: "accent",
   icon: /* @__PURE__ */ React7.createElement(MapPinIcon, null),
-  provider: ELEMENTS_STYLES_PROVIDER_KEY2
+  provider: null
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
 function CssClassSelector() {
@@ -578,11 +555,13 @@ function CssClassSelector() {
   const handleApply = useHandleApply(appliedIds, setAppliedIds);
   const applied = useAppliedOptions(options13, appliedIds);
   const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
-  return /* @__PURE__ */ React7.createElement(Stack3, { gap: 1, p: 2 }, /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(Typography2, { component: "label", variant: "caption", htmlFor: ID }, __3("Classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
+  const showPlaceholder = applied.every(({ fixed }) => fixed);
+  return /* @__PURE__ */ React7.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(FormLabel, { htmlFor: ID, size: "small" }, __3("Classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
     MultiCombobox,
     {
       id: ID,
       size: "tiny",
+      placeholder: showPlaceholder ? __3("Type to search/add global classes", "elementor") : void 0,
       options: options13,
       selected: applied,
       onSelect: handleApply,
@@ -618,6 +597,9 @@ function CssClassSelector() {
   ));
 }
 var updateClassByProvider = (provider, data) => {
+  if (!provider) {
+    return;
+  }
   const providerInstance = stylesRepository4.getProviderByKey(provider);
   if (!providerInstance) {
     return;
@@ -628,8 +610,8 @@ function useOptions() {
   const { element } = useElement();
   const isProviderEditable = (provider) => !!provider.actions.updateProps;
   return useProviders().filter(isProviderEditable).flatMap((provider) => {
-    const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY2;
-    const styleDefs = provider.actions.get({ elementId: element.id });
+    const isElements = isElementsStylesProvider2(provider.getKey());
+    const styleDefs = provider.actions.all({ elementId: element.id });
     if (isElements && styleDefs.length === 0) {
       return [EMPTY_OPTION];
     }
@@ -640,7 +622,7 @@ function useOptions() {
         fixed: isElements,
         color: isElements ? "accent" : "global",
         icon: isElements ? /* @__PURE__ */ React7.createElement(MapPinIcon, null) : null,
-        provider: provider.key,
+        provider: provider.getKey(),
         // translators: %s is the plural label of the provider (e.g "Existing classes").
         group: __3("Existing %s", "elementor").replace("%s", provider.labels?.plural ?? "")
       };
@@ -657,7 +639,7 @@ function useCreateActions({
       label: (value) => __3('Create "%s"', "elementor").replace("%s", value),
       // translators: %s is the singular label of css class provider (e.g "CSS Class").
       group: __3("Create a new %s", "elementor").replace("%s", provider.labels?.singular ?? ""),
-      condition: (_, inputValue) => isLabelValid(inputValue) && !hasReachedLimit(provider),
+      condition: (_, inputValue) => validateStyleLabel2(inputValue).isValid && !hasReachedLimit(provider),
       apply: (label) => {
         const createdId = create(label);
         if (!createdId) {
@@ -670,18 +652,12 @@ function useCreateActions({
   });
 }
 function hasReachedLimit(provider) {
-  if (provider.limit === void 0) {
-    return false;
-  }
-  return provider.actions.get().length >= provider.limit;
-}
-function isLabelValid(newLabel) {
-  return stylesRepository4.isLabelValid(newLabel) && !stylesRepository4.isLabelExist(newLabel);
+  return provider.actions.all().length >= provider.limit;
 }
 function useAppliedOptions(options13, appliedIds) {
   const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
-    (option) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY2
+    (option) => option.provider && isElementsStylesProvider2(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
     applied.unshift(EMPTY_OPTION);
@@ -750,9 +726,9 @@ import { createMenu } from "@elementor/menus";
 
 // src/popover-action.tsx
 import * as React8 from "react";
-import { useId as useId2 } from "react";
+import { useId } from "react";
 import { XIcon } from "@elementor/icons";
-import { bindPopover, bindToggle, IconButton, Popover, Stack as Stack4, Tooltip, Typography as Typography3, usePopupState as usePopupState2 } from "@elementor/ui";
+import { bindPopover, bindToggle, IconButton, Popover, Stack as Stack4, Tooltip, Typography as Typography2, usePopupState as usePopupState2 } from "@elementor/ui";
 var SIZE = "tiny";
 function PopoverAction({
   title,
@@ -760,7 +736,7 @@ function PopoverAction({
   icon: Icon,
   popoverContent: PopoverContent2
 }) {
-  const id = useId2();
+  const id = useId();
   const popupState = usePopupState2({
     variant: "popover",
     popupId: `elementor-popover-action-${id}`
@@ -779,7 +755,7 @@ function PopoverAction({
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React8.createElement(Stack4, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React8.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React8.createElement(Typography3, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: SIZE }))),
+    /* @__PURE__ */ React8.createElement(Stack4, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React8.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React8.createElement(Typography2, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: SIZE }))),
     /* @__PURE__ */ React8.createElement(PopoverContent2, { closePopover: popupState.close })
   ));
 }
@@ -793,9 +769,9 @@ var controlActionsMenu = createMenu({
 
 // src/components/editing-panel-error-fallback.tsx
 import * as React9 from "react";
-import { Alert, Box as Box2 } from "@elementor/ui";
+import { Alert, Box } from "@elementor/ui";
 function EditorPanelErrorFallback() {
-  return /* @__PURE__ */ React9.createElement(Box2, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, "Something went wrong")));
+  return /* @__PURE__ */ React9.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, "Something went wrong")));
 }
 
 // src/components/editing-panel-tabs.tsx
@@ -850,7 +826,7 @@ var Control = ({ props, type }) => {
 
 // src/controls-registry/control-type-container.tsx
 import * as React11 from "react";
-import { Box as Box3, styled as styled3 } from "@elementor/ui";
+import { Box as Box2, styled as styled2 } from "@elementor/ui";
 var ControlTypeContainer = ({
   controlType,
   children
@@ -858,7 +834,7 @@ var ControlTypeContainer = ({
   const layout = getLayoutByType(controlType);
   return /* @__PURE__ */ React11.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = styled3(Box3, {
+var StyledContainer = styled2(Box2, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -908,13 +884,13 @@ var SettingsField = ({ bind, children }) => {
 
 // src/components/section.tsx
 import * as React13 from "react";
-import { useId as useId3, useState as useState3 } from "react";
+import { useId as useId2, useState as useState3 } from "react";
 import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
 
 // src/components/collapse-icon.tsx
 import { ChevronDownIcon } from "@elementor/icons";
-import { styled as styled4 } from "@elementor/ui";
-var CollapseIcon = styled4(ChevronDownIcon, {
+import { styled as styled3 } from "@elementor/ui";
+var CollapseIcon = styled3(ChevronDownIcon, {
   shouldForwardProp: (prop) => prop !== "open"
 })(({ theme, open }) => ({
   transform: open ? "rotate(180deg)" : "rotate(0deg)",
@@ -926,7 +902,7 @@ var CollapseIcon = styled4(ChevronDownIcon, {
 // src/components/section.tsx
 function Section({ title, children, defaultExpanded = false }) {
   const [isOpen, setIsOpen] = useState3(!!defaultExpanded);
-  const id = useId3();
+  const id = useId2();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
@@ -982,8 +958,7 @@ var Control2 = ({ control }) => {
 
 // src/components/style-tab.tsx
 import * as React65 from "react";
-import { useState as useState7 } from "react";
-import { getElementStyles, useElementSetting as useElementSetting5 } from "@elementor/editor-elements";
+import { useState as useState8 } from "react";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
@@ -1006,6 +981,9 @@ var useStylesRerender = () => {
   useEffect(() => provider?.subscribe(reRender), [provider]);
 };
 
+// src/styles-inheritance/create-snapshots-manager.ts
+import { filterEmptyValues } from "@elementor/editor-props";
+
 // src/styles-inheritance/utils.ts
 var DEFAULT_STATE = "normal";
 var DEFAULT_BREAKPOINT = "desktop";
@@ -1096,12 +1074,16 @@ function buildInitialSnapshotFromStyles(styles) {
       variant: { props }
     } = styleData;
     Object.entries(props).forEach(([key, value]) => {
+      const filteredValue = filterEmptyValues(value);
+      if (filteredValue === null) {
+        return;
+      }
       if (!snapshot[key]) {
         snapshot[key] = [];
       }
       const snapshotPropValue = {
         ...styleData,
-        value
+        value: filteredValue
       };
       snapshot[key].push(snapshotPropValue);
     });
@@ -1133,7 +1115,7 @@ function createStylesInheritance(styleDefs, breakpointsRoot) {
 function buildStyleVariantsByMetaMapping(styleDefs) {
   const breakpointStateSlots = {};
   styleDefs.forEach((styleDef) => {
-    const provider = getProviderByStyleId(styleDef.id)?.key ?? null;
+    const provider = getProviderByStyleId(styleDef.id)?.getKey() ?? null;
     styleDef.variants.forEach((variant) => {
       const { meta } = variant;
       const { state, breakpoint } = meta;
@@ -1198,6 +1180,30 @@ var useBaseStyles = () => {
   return Object.values(widgetCache?.base_styles ?? {});
 };
 
+// src/hooks/use-active-style-def-id.ts
+import { useState as useState4 } from "react";
+import { getElementStyles, useElementSetting as useElementSetting5 } from "@elementor/editor-elements";
+function useActiveStyleDefId(classProp) {
+  const [activeStyledDefId, setActiveStyledDefId] = useState4(null);
+  const appliedClassesIds = useAppliedClassesIds2(classProp)?.value || [];
+  const fallback = useFirstAppliedClass(appliedClassesIds);
+  const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
+  return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
+}
+function useFirstAppliedClass(appliedClassesIds) {
+  const { element } = useElement();
+  const stylesDefs = getElementStyles(element.id) ?? {};
+  return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
+}
+function useAppliedClassesIds2(classProp) {
+  const { element } = useElement();
+  return useElementSetting5(element.id, classProp);
+}
+function useActiveAndAppliedClassId(id, appliedClassesIds) {
+  const isClassApplied = !!id && appliedClassesIds.includes(id);
+  return isClassApplied ? id : null;
+}
+
 // src/components/style-sections/background-section/background-section.tsx
 import * as React19 from "react";
 import { BackgroundControl } from "@elementor/editor-controls";
@@ -1215,7 +1221,7 @@ import {
   getElementLabel
 } from "@elementor/editor-elements";
 import { getVariantByMeta } from "@elementor/editor-styles";
-import { LOCAL_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
+import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
 function useStylesFields(propNames) {
@@ -1256,9 +1262,9 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
   if (!provider || !styleId) {
     return null;
   }
-  const style = provider.actions.getById?.(styleId, { elementId });
+  const style = provider.actions.get(styleId, { elementId });
   if (!style) {
-    throw new StyleNotFoundUnderProviderError({ context: { styleId, providerKey: provider.key } });
+    throw new StyleNotFoundUnderProviderError({ context: { styleId, providerKey: provider.getKey() } });
   }
   const variant = getVariantByMeta(style, meta);
   return Object.fromEntries(
@@ -1272,7 +1278,7 @@ function useUndoableCreateElementStyle() {
         do: (payload) => {
           return createElementStyle({
             ...payload,
-            label: LOCAL_STYLES_RESERVED_LABEL
+            label: ELEMENTS_STYLES_RESERVED_LABEL
           });
         },
         undo: ({ elementId }, styleId) => {
@@ -1282,7 +1288,7 @@ function useUndoableCreateElementStyle() {
           return createElementStyle({
             ...payload,
             styleId,
-            label: LOCAL_STYLES_RESERVED_LABEL
+            label: ELEMENTS_STYLES_RESERVED_LABEL
           });
         }
       },
@@ -1300,10 +1306,10 @@ function useUndoableUpdateStyle() {
         do: ({ elementId, styleId, provider, meta, props }) => {
           if (!provider.actions.updateProps) {
             throw new StylesProviderCannotUpdatePropsError({
-              context: { providerKey: provider.key }
+              context: { providerKey: provider.getKey() }
             });
           }
-          const style = provider.actions.getById(styleId, { elementId });
+          const style = provider.actions.get(styleId, { elementId });
           const prevProps = getCurrentProps(style, meta);
           provider.actions.updateProps(
             {
@@ -1350,7 +1356,7 @@ function useStylesField(propName) {
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 import * as React17 from "react";
 import { useBoundProp } from "@elementor/editor-controls";
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY as ELEMENTS_STYLES_PROVIDER_KEY3 } from "@elementor/editor-styles-repository";
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { __ as __5 } from "@wordpress/i18n";
 var StylesInheritanceIndicator = () => {
   const { value, path } = useBoundProp();
@@ -1370,7 +1376,7 @@ var StylesInheritanceIndicator = () => {
       StyleIndicator,
       {
         "aria-label": __5("This is the final value", "elementor"),
-        variant: currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY3 ? "local" : "global"
+        variant: isElementsStylesProvider3(currentStyleProvider?.getKey()) ? "local" : "global"
       }
     );
   }
@@ -1387,11 +1393,12 @@ var StylesInheritanceIndicator = () => {
 };
 
 // src/controls-registry/styles-field.tsx
-var StylesField = ({ bind, children }) => {
+var StylesField = ({ bind, placeholder, children }) => {
   const [value, setValue] = useStylesField(bind);
   const stylesSchema = getStylesSchema();
   const propType = createTopLevelOjectType({ schema: stylesSchema });
   const values = { [bind]: value };
+  const placeholderValues = { [bind]: placeholder };
   const setValues = (newValue) => {
     setValue(newValue[bind]);
   };
@@ -1405,7 +1412,16 @@ var StylesField = ({ bind, children }) => {
         }
       ]
     },
-    /* @__PURE__ */ React18.createElement(PropProvider2, { propType, value: values, setValue: setValues }, /* @__PURE__ */ React18.createElement(PropKeyProvider2, { bind }, children))
+    /* @__PURE__ */ React18.createElement(
+      PropProvider2,
+      {
+        propType,
+        value: values,
+        setValue: setValues,
+        placeholder: placeholderValues
+      },
+      /* @__PURE__ */ React18.createElement(PropKeyProvider2, { bind }, children)
+    )
   );
 };
 
@@ -1453,7 +1469,8 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
       direction: "row",
       sx: {
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        marginInlineEnd: -0.75
       }
     },
     /* @__PURE__ */ React23.createElement(ControlLabel, null, label),
@@ -1885,35 +1902,37 @@ import * as React35 from "react";
 import { ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
 import { Stack as Stack10 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
+var displayFieldOptions = [
+  {
+    value: "block",
+    renderContent: () => __14("Block", "elementor"),
+    label: __14("Block", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "flex",
+    renderContent: () => __14("Flex", "elementor"),
+    label: __14("Flex", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "inline-block",
+    renderContent: () => __14("In-blk", "elementor"),
+    label: __14("Inline-block", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "inline-flex",
+    renderContent: () => __14("In-flx", "elementor"),
+    label: __14("Inline-flex", "elementor"),
+    showTooltip: true
+  }
+];
 var DisplayField = () => {
-  const options13 = [
-    {
-      value: "block",
-      renderContent: () => __14("Block", "elementor"),
-      label: __14("Block", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "flex",
-      renderContent: () => __14("Flex", "elementor"),
-      label: __14("Flex", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "inline-block",
-      renderContent: () => __14("In-blk", "elementor"),
-      label: __14("Inline-block", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "inline-flex",
-      renderContent: () => __14("In-flx", "elementor"),
-      label: __14("Inline-flex", "elementor"),
-      showTooltip: true
-    }
-  ];
-  return /* @__PURE__ */ React35.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React35.createElement(ToggleControl4, { options: options13, fullWidth: true })));
+  const placeholder = useDisplayPlaceholderValue();
+  return /* @__PURE__ */ React35.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React35.createElement(ToggleControl4, { options: displayFieldOptions, fullWidth: true })));
 };
+var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.value ?? void 0;
 
 // src/components/style-sections/layout-section/flex-direction-field.tsx
 import * as React36 from "react";
@@ -1960,7 +1979,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React37 from "react";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { ControlToggleButtonGroup, NumberControl } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
 import { DirectionProvider as DirectionProvider5, Grid as Grid6, ThemeProvider as ThemeProvider5 } from "@elementor/ui";
@@ -1996,7 +2015,7 @@ var items = [
 ];
 var FlexOrderField = () => {
   const { isSiteRtl } = useDirection(), [order, setOrder] = useStylesField("order");
-  const [groupControlValue, setGroupControlValue] = useState4(getGroupControlValue(order?.value || null));
+  const [groupControlValue, setGroupControlValue] = useState5(getGroupControlValue(order?.value || null));
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -2034,7 +2053,7 @@ var getGroupControlValue = (order) => {
 
 // src/components/style-sections/layout-section/flex-size-field.tsx
 import * as React38 from "react";
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState6 } from "react";
 import {
   ControlToggleButtonGroup as ControlToggleButtonGroup2,
   NumberControl as NumberControl2,
@@ -2071,7 +2090,7 @@ var FlexSizeField = () => {
   const grow = fields?.["flex-grow"]?.value || null;
   const shrink = fields?.["flex-shrink"]?.value || null;
   const basis = fields?.["flex-basis"]?.value || null;
-  const currentGroup = useMemo2(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = useState5(currentGroup);
+  const currentGroup = useMemo2(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = useState6(currentGroup);
   const onChangeGroup = (group = null) => {
     setActiveGroup(group);
     if (!group || group === "custom") {
@@ -2232,16 +2251,25 @@ var WrapField = () => {
 // src/components/style-sections/layout-section/layout-section.tsx
 var LayoutSection = () => {
   const [display] = useStylesField("display");
+  const displayPlaceholder = useDisplayPlaceholderValue();
+  const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const { element } = useElement();
   const parent = useParentElement(element.id);
   const parentStyle = useComputedStyle(parent?.id || null);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), ("flex" === display?.value || "inline-flex" === display?.value) && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
 };
 var FlexFields = () => {
   const [flexWrap] = useStylesField("flex-wrap");
   return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FlexDirectionField, null), /* @__PURE__ */ React42.createElement(JustifyContentField, null), /* @__PURE__ */ React42.createElement(AlignItemsField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(GapControlField, null), /* @__PURE__ */ React42.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React42.createElement(AlignContentField, null));
 };
 var FlexChildFields = () => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(ControlFormLabel3, null, __21("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, null), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
+var shouldDisplayFlexFields = (display, local) => {
+  const value = display?.value ?? local?.value;
+  if (!value) {
+    return false;
+  }
+  return "flex" === value || "inline-flex" === value;
+};
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React46 from "react";
@@ -2413,11 +2441,11 @@ import * as React64 from "react";
 
 // src/components/collapsible-content.tsx
 import * as React50 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Button, Collapse as Collapse3, Stack as Stack15 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
 var CollapsibleContent = ({ children, defaultOpen = false }) => {
-  const [open, setOpen] = useState6(defaultOpen);
+  const [open, setOpen] = useState7(defaultOpen);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
@@ -2764,7 +2792,7 @@ var TypographySection = () => {
 var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
-  const [activeStyleState, setActiveStyleState] = useState7(null);
+  const [activeStyleState, setActiveStyleState] = useState8(null);
   const breakpoint = useActiveBreakpoint();
   return /* @__PURE__ */ React65.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React65.createElement(
     StyleProvider,
@@ -2780,17 +2808,6 @@ var StyleTab = () => {
     /* @__PURE__ */ React65.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React65.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React65.createElement(CssClassSelector, null), /* @__PURE__ */ React65.createElement(Divider4, null), /* @__PURE__ */ React65.createElement(SectionsList, null, /* @__PURE__ */ React65.createElement(Section, { title: __43("Layout", "elementor") }, /* @__PURE__ */ React65.createElement(LayoutSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Spacing", "elementor") }, /* @__PURE__ */ React65.createElement(SpacingSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Size", "elementor") }, /* @__PURE__ */ React65.createElement(SizeSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Position", "elementor") }, /* @__PURE__ */ React65.createElement(PositionSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Typography", "elementor") }, /* @__PURE__ */ React65.createElement(TypographySection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Background", "elementor") }, /* @__PURE__ */ React65.createElement(BackgroundSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Border", "elementor") }, /* @__PURE__ */ React65.createElement(BorderSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Effects", "elementor") }, /* @__PURE__ */ React65.createElement(EffectsSection, null)))))
   ));
 };
-function useActiveStyleDefId(currentClassesProp) {
-  const [activeStyledDefId, setActiveStyledDefId] = useState7(null);
-  const fallback = useFirstElementStyleDef(currentClassesProp);
-  return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
-}
-function useFirstElementStyleDef(currentClassesProp) {
-  const { element } = useElement();
-  const classesIds = useElementSetting5(element.id, currentClassesProp)?.value || [];
-  const stylesDefs = getElementStyles(element.id) ?? {};
-  return Object.values(stylesDefs).find((styleDef) => classesIds.includes(styleDef.id));
-}
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
@@ -2876,13 +2893,13 @@ import { settingsTransformersRegistry, styleTransformersRegistry } from "@elemen
 
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React71 from "react";
-import { useId as useId4 } from "react";
+import { useId as useId3 } from "react";
 import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
-  Box as Box5,
+  Box as Box4,
   Divider as Divider7,
   Grid as Grid26,
   IconButton as IconButton3,
@@ -2892,7 +2909,7 @@ import {
   Tab as Tab2,
   TabPanel as TabPanel2,
   Tabs as Tabs2,
-  Typography as Typography5,
+  Typography as Typography4,
   UnstableTag as Tag,
   usePopupState as usePopupState3,
   useTabs as useTabs2
@@ -3020,11 +3037,11 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React70 from "react";
-import { Fragment as Fragment9, useState as useState8 } from "react";
+import { Fragment as Fragment9, useState as useState9 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
-  Box as Box4,
+  Box as Box3,
   Divider as Divider6,
   InputAdornment,
   Link,
@@ -3033,12 +3050,12 @@ import {
   MenuSubheader as MenuSubheader2,
   Stack as Stack18,
   TextField as TextField2,
-  Typography as Typography4
+  Typography as Typography3
 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var DynamicSelection = ({ onSelect }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const { value: anyValue } = useBoundProp4();
   const { bind, value: dynamicValue, setValue } = useBoundProp4(dynamicPropTypeUtil);
@@ -3056,7 +3073,7 @@ var DynamicSelection = ({ onSelect }) => {
     setValue({ name: value, settings: { label } });
     onSelect?.();
   };
-  return /* @__PURE__ */ React70.createElement(Stack18, null, hasNoDynamicTags ? /* @__PURE__ */ React70.createElement(NoDynamicTags, null) : /* @__PURE__ */ React70.createElement(Fragment9, null, /* @__PURE__ */ React70.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React70.createElement(Stack18, null, hasNoDynamicTags ? /* @__PURE__ */ React70.createElement(NoDynamicTags, null) : /* @__PURE__ */ React70.createElement(Fragment9, null, /* @__PURE__ */ React70.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React70.createElement(
     TextField2,
     {
       fullWidth: true,
@@ -3068,7 +3085,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React70.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React70.createElement(SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
+  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
@@ -3101,10 +3118,10 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React70.createElem
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React70.createElement(DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "subtitle2" }, __46("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "caption" }, __46("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __46("Clear & try again", "elementor")))
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "subtitle2" }, __46("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "caption" }, __46("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __46("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(
+var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(
   Stack18,
   {
     gap: 1,
@@ -3116,8 +3133,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box4, { sx: { ov
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React70.createElement(DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "subtitle2" }, __46("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "caption" }, __46("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "subtitle2" }, __46("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "caption" }, __46("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -3142,7 +3159,7 @@ var DynamicSelectionControl = () => {
   const { bind, value } = useBoundProp5(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
   const { name: tagName = "" } = value;
-  const selectionPopoverId = useId4();
+  const selectionPopoverId = useId3();
   const selectionPopoverState = usePopupState3({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
@@ -3151,7 +3168,7 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React71.createElement(Box5, null, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React71.createElement(Box4, null, /* @__PURE__ */ React71.createElement(
     Tag,
     {
       fullWidth: true,
@@ -3177,11 +3194,11 @@ var DynamicSelectionControl = () => {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       ...bindPopover2(selectionPopoverState)
     },
-    /* @__PURE__ */ React71.createElement(Stack19, null, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography5, { variant: "subtitle2" }, __47("Dynamic tags", "elementor")), /* @__PURE__ */ React71.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
+    /* @__PURE__ */ React71.createElement(Stack19, null, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, __47("Dynamic tags", "elementor")), /* @__PURE__ */ React71.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = useId4();
+  const popupId = useId3();
   const settingsPopupState = usePopupState3({ variant: "popover", popupId });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
@@ -3202,7 +3219,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...bindPopover2(settingsPopupState)
     },
-    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -3327,10 +3344,8 @@ var blockV1Panel = () => {
     condition: isAtomicWidgetSelected
   });
 };
-
-// src/index.ts
-init2();
 export {
+  init2 as init,
   injectIntoClassSelectorActions,
   replaceControl,
   useBoundProp7 as useBoundProp,