@elementor/editor-components 3.35.0-480 → 3.35.0-481

package/dist/index.mjs

@@ -357,9 +357,11 @@ var componentOverrideTransformer = createTransformer3((override) => {
 import * as React10 from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { getV1DocumentsManager as getV1DocumentsManager3 } from "@elementor/editor-documents";
+import { PanelHeader as PanelHeader2 } from "@elementor/editor-panels";
+import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon, ComponentsFilledIcon } from "@elementor/icons";
 import { __getState as getState11 } from "@elementor/store";
-import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Stack as Stack6, Tooltip as Tooltip4, Typography as Typography6 } from "@elementor/ui";
+import { Box as Box7, Divider as Divider2, IconButton as IconButton4, Tooltip as Tooltip4, Typography as Typography6 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/hooks/use-navigate-back.ts
@@ -1301,7 +1303,7 @@ function PropertiesEmptyState({ introductionRef }) {
 
 // src/components/component-properties-panel/properties-group.tsx
 import * as React6 from "react";
-import { EditableField, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
+import { EditableField, EllipsisWithTooltip, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
@@ -1666,14 +1668,18 @@ function PropertiesGroup({
         Box4,
         {
           sx: {
-            flex: 1,
             height: 28,
             display: "flex",
             alignItems: "center",
             border: 2,
             borderColor: "text.secondary",
             borderRadius: 1,
-            pl: 0.5
+            pl: 0.5,
+            flexGrow: 1,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            width: "100%"
           }
         },
         /* @__PURE__ */ React6.createElement(
@@ -1688,12 +1694,13 @@ function PropertiesGroup({
           }
         )
       ) : /* @__PURE__ */ React6.createElement(
-        Typography5,
+        EllipsisWithTooltip,
         {
+          title: group.label,
+          as: Typography5,
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        },
-        group.label
+        }
       ), /* @__PURE__ */ React6.createElement(
         IconButton2,
         {
@@ -2070,24 +2077,22 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React10.createElement(Box7, null, /* @__PURE__ */ React10.createElement(
-    Stack6,
+  return /* @__PURE__ */ React10.createElement(Box7, null, /* @__PURE__ */ React10.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(Tooltip4, { title: __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
+    EllipsisWithTooltip2,
     {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
-    },
-    /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Tooltip4, { title: __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(Stack6, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(Typography6, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(
-      ComponentsBadge,
-      {
-        overridablePropsCount,
-        ref: anchorRef,
-        onClick: handleOpenPropertiesPanel
-      }
-    )
-  ), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
+      title: componentName,
+      as: Typography6,
+      variant: "caption",
+      sx: { fontWeight: 500, flexGrow: 1 }
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    ComponentsBadge,
+    {
+      overridablePropsCount,
+      ref: anchorRef,
+      onClick: handleOpenPropertiesPanel
+    }
+  )), /* @__PURE__ */ React10.createElement(Divider2, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
     {
       anchorRef,
@@ -2134,7 +2139,7 @@ function isProUser() {
 // src/components/components-tab/component-search.tsx
 import * as React12 from "react";
 import { SearchIcon } from "@elementor/icons";
-import { Box as Box8, InputAdornment, Stack as Stack7, TextField as TextField2 } from "@elementor/ui";
+import { Box as Box8, InputAdornment, Stack as Stack6, TextField as TextField2 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 
 // src/components/components-tab/search-provider.tsx
@@ -2163,7 +2168,7 @@ var useSearch = () => {
 // src/components/components-tab/component-search.tsx
 var ComponentSearch = () => {
   const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React12.createElement(Stack7, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(Box8, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React12.createElement(Box8, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React12.createElement(
     TextField2,
     {
       role: "search",
@@ -2184,7 +2189,7 @@ import * as React17 from "react";
 import { useState as useState7 } from "react";
 import { getAngieSdk } from "@elementor/editor-mcp";
 import { AIIcon, ComponentsIcon as ComponentsIcon2 } from "@elementor/icons";
-import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack10, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box11, Button as Button4, Divider as Divider3, Link as Link3, List as List3, Stack as Stack9, Typography as Typography9 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 
 // src/hooks/use-components-permissions.ts
@@ -2284,7 +2289,7 @@ import * as React15 from "react";
 import { useRef as useRef4, useState as useState6 } from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
-import { EditableField as EditableField2, EllipsisWithTooltip, MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
+import { EditableField as EditableField2, EllipsisWithTooltip as EllipsisWithTooltip3, MenuListItem as MenuListItem3, useEditable as useEditable2, WarningInfotip } from "@elementor/editor-ui";
 import { ComponentsIcon, DotsVerticalIcon as DotsVerticalIcon2 } from "@elementor/icons";
 import {
   bindMenu as bindMenu2,
@@ -2294,7 +2299,7 @@ import {
   ListItemButton,
   ListItemIcon,
   Menu as Menu2,
-  Stack as Stack8,
+  Stack as Stack7,
   styled as styled3,
   Typography as Typography8,
   usePopupState as usePopupState3
@@ -2607,7 +2612,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
   const handleDeleteDialogClose = () => {
     setIsDeleteDialogOpen(false);
   };
-  return /* @__PURE__ */ React15.createElement(Stack8, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(Stack7, null, /* @__PURE__ */ React15.createElement(
     WarningInfotip,
     {
       open: Boolean(error),
@@ -2655,7 +2660,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
             ...getEditableProps()
           }
         ) : /* @__PURE__ */ React15.createElement(
-          EllipsisWithTooltip,
+          EllipsisWithTooltip3,
           {
             title: component.name,
             as: Typography8,
@@ -2752,12 +2757,12 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
 
 // src/components/components-tab/loading-components.tsx
 import * as React16 from "react";
-import { Box as Box10, ListItemButton as ListItemButton2, Skeleton, Stack as Stack9 } from "@elementor/ui";
+import { Box as Box10, ListItemButton as ListItemButton2, Skeleton, Stack as Stack8 } from "@elementor/ui";
 var ROWS_COUNT = 6;
 var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
 var LoadingComponents = () => {
   return /* @__PURE__ */ React16.createElement(
-    Stack9,
+    Stack8,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -2837,7 +2842,7 @@ var EmptyState = () => {
     }
   };
   return /* @__PURE__ */ React17.createElement(
-    Stack10,
+    Stack9,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -2846,7 +2851,7 @@ var EmptyState = () => {
       gap: 2,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __20("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? __20("Create once, use everywhere.", "elementor") : __20(
+    /* @__PURE__ */ React17.createElement(Stack9, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(ComponentsIcon2, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, __20("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(Typography9, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, __20("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? __20("Create once, use everywhere.", "elementor") : __20(
       "With your current role, you cannot create components. Contact an administrator to create one.",
       "elementor"
     )), /* @__PURE__ */ React17.createElement(
@@ -2860,7 +2865,7 @@ var EmptyState = () => {
       },
       __20("Learn more about components", "elementor")
     )),
-    canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Divider3, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(Stack10, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
+    canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Divider3, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(Stack9, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
       Typography9,
       {
         align: "center",
@@ -2888,7 +2893,7 @@ var EmptyState = () => {
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
   return /* @__PURE__ */ React17.createElement(
-    Stack10,
+    Stack9,
     {
       color: "text.secondary",
       pt: 5,
@@ -2983,7 +2988,7 @@ import { notify as notify3 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
-import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack11, TextField as TextField3, Typography as Typography11 } from "@elementor/ui";
+import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack10, TextField as TextField3, Typography as Typography11 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
@@ -3344,8 +3349,8 @@ var Form2 = ({
     create: __23("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React20.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
-    Stack11,
+  return /* @__PURE__ */ React20.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(Stack10, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
+    Stack10,
     {
       direction: "row",
       alignItems: "center",
@@ -3367,7 +3372,7 @@ var Form2 = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React20.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React20.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React20.createElement(Stack10, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React20.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
@@ -3674,7 +3679,7 @@ function getComponentDOMElements(id2) {
 import * as React23 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box13, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography12 } from "@elementor/ui";
+import { Box as Box13, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack11, Typography as Typography12 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
@@ -3683,7 +3688,7 @@ var openEditModeDialog = (lockedBy) => {
 };
 var EditModeDialog = ({ lockedBy }) => {
   const content = __25("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(Box13, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(Typography12, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(DialogContent, null, /* @__PURE__ */ React23.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(Typography12, { variant: "body2" }, __25(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(Box13, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(Typography12, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(DialogContent, null, /* @__PURE__ */ React23.createElement(Stack11, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(Typography12, { variant: "body2" }, __25(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
   )), /* @__PURE__ */ React23.createElement(DialogActions, null, /* @__PURE__ */ React23.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __25("Close", "elementor"))))));
@@ -3694,10 +3699,10 @@ import * as React29 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
-import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
-import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
+import { PanelBody as PanelBody2, PanelHeader as PanelHeader3, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
+import { EllipsisWithTooltip as EllipsisWithTooltip4 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip5 } from "@elementor/ui";
+import { Divider as Divider4, IconButton as IconButton6, Stack as Stack16, Tooltip as Tooltip5 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
@@ -3712,7 +3717,7 @@ function useComponentInstanceSettings() {
 // src/components/instance-editing-panel/empty-state.tsx
 import * as React24 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
-import { Button as Button7, Stack as Stack13, Typography as Typography13 } from "@elementor/ui";
+import { Button as Button7, Stack as Stack12, Typography as Typography13 } from "@elementor/ui";
 import { __ as __26 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
@@ -3724,7 +3729,7 @@ var EmptyState2 = ({ onEditComponent }) => {
     "elementor"
   );
   return /* @__PURE__ */ React24.createElement(
-    Stack13,
+    Stack12,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -3745,7 +3750,7 @@ import * as React28 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Box as Box14, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
+import { Box as Box14, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack15 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 import * as React27 from "react";
@@ -3760,7 +3765,7 @@ import {
   useElement as useElement2
 } from "@elementor/editor-editing-panel";
 import { getContainer as getContainer3, getElementType as getElementType3 } from "@elementor/editor-elements";
-import { Stack as Stack15 } from "@elementor/ui";
+import { Stack as Stack14 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
 import { getElementType as getElementType2 } from "@elementor/editor-elements";
@@ -3894,9 +3899,9 @@ function getPropType({ widgetType, propKey }) {
 // src/components/control-label.tsx
 import * as React26 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { Stack as Stack14 } from "@elementor/ui";
+import { Stack as Stack13 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React26.createElement(Stack13, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -3995,7 +4000,7 @@ function OverrideControl({ overridableProp, overrides }) {
           return false;
         }
       },
-      /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(Stack14, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -4100,7 +4105,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React28.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React28.createElement(Stack15, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
       ListItemText,
       {
         secondary: title,
@@ -4109,7 +4114,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       }
     )),
     /* @__PURE__ */ React28.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React28.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
+  ), /* @__PURE__ */ React28.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(Stack15, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -4136,7 +4141,7 @@ function InstanceEditingPanel() {
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(Stack17, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(EllipsisWithTooltip2, { title: component.name, as: PanelHeaderTitle2, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(Tooltip5, { title: panelTitle }, /* @__PURE__ */ React29.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(PanelBody2, null, /* @__PURE__ */ React29.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(Stack16, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(EllipsisWithTooltip4, { title: component.name, as: PanelHeaderTitle2, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(Tooltip5, { title: panelTitle }, /* @__PURE__ */ React29.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(PanelBody2, null, /* @__PURE__ */ React29.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(Stack16, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
     OverridePropsGroup,
     {
       group,