@elementor/editor-controls 3.33.0-113 → 3.33.0-115

package/dist/index.d.mts

@@ -324,6 +324,14 @@ type CssEditorProps = {
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 
+type ClearIconButtonProps = {
+    onClick?: () => void;
+    tooltipText: React$1.ReactNode;
+    disabled?: boolean;
+    size?: 'tiny' | 'small' | 'medium' | 'large';
+};
+declare const ClearIconButton: ({ tooltipText, onClick, disabled, size }: ClearIconButtonProps) => React$1.JSX.Element;
+
 type AnchorEl = HTMLElement | null;
 type Item<T> = {
     disabled?: boolean;
@@ -491,4 +499,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -324,6 +324,14 @@ type CssEditorProps = {
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 
+type ClearIconButtonProps = {
+    onClick?: () => void;
+    tooltipText: React$1.ReactNode;
+    disabled?: boolean;
+    size?: 'tiny' | 'small' | 'medium' | 'large';
+};
+declare const ClearIconButton: ({ tooltipText, onClick, disabled, size }: ClearIconButtonProps) => React$1.JSX.Element;
+
 type AnchorEl = HTMLElement | null;
 type Item<T> = {
     disabled?: boolean;
@@ -491,4 +499,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   AspectRatioControl: () => AspectRatioControl,
   BackgroundControl: () => BackgroundControl,
   BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
+  ClearIconButton: () => ClearIconButton,
   ColorControl: () => ColorControl,
   ControlActionsProvider: () => ControlActionsProvider,
   ControlAdornments: () => ControlAdornments,
@@ -5359,14 +5360,25 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/components/css-code-editor/css-editor.tsx
-var React92 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_ui80 = require("@elementor/ui");
+var import_ui81 = require("@elementor/ui");
 var import_react47 = require("@monaco-editor/react");
+var import_i18n49 = require("@wordpress/i18n");
 
-// src/components/css-code-editor/css-editor.styles.ts
+// src/components/icon-buttons/clear-icon-button.tsx
+var React91 = __toESM(require("react"));
+var import_icons32 = require("@elementor/icons");
 var import_ui79 = require("@elementor/ui");
-var EditorWrapper = (0, import_ui79.styled)(import_ui79.Box)`
+var CustomIconButton = (0, import_ui79.styled)(import_ui79.IconButton)(({ theme }) => ({
+  width: theme.spacing(2.5),
+  height: theme.spacing(2.5)
+}));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React91.createElement(import_ui79.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React91.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React91.createElement(import_icons32.BrushBigIcon, { fontSize: size })));
+
+// src/components/css-code-editor/css-editor.styles.ts
+var import_ui80 = require("@elementor/ui");
+var EditorWrapper = (0, import_ui80.styled)(import_ui80.Box)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5376,6 +5388,7 @@ var EditorWrapper = (0, import_ui79.styled)(import_ui79.Box)`
 	.monaco-editor .suggest-widget {
 		width: 220px !important;
 		max-width: 220px !important;
+		z-index: 1001;
 	}
 
 	.visual-content-dimmed {
@@ -5384,7 +5397,7 @@ var EditorWrapper = (0, import_ui79.styled)(import_ui79.Box)`
 		pointer-events: none;
 	}
 `;
-var ResizeHandle = (0, import_ui79.styled)(import_ui79.Button)`
+var ResizeHandle = (0, import_ui80.styled)(import_ui80.Button)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5484,9 +5497,9 @@ function clearMarkersFromVisualContent(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-var React91 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React91.useCallback(
+  const handleResizeMove = React92.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5499,11 +5512,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [containerRef, onResize, onHeightChange]
   );
-  const handleResizeEnd = React91.useCallback(() => {
+  const handleResizeEnd = React92.useCallback(() => {
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
   }, [handleResizeMove]);
-  const handleResizeStart = React91.useCallback(
+  const handleResizeStart = React92.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5512,13 +5525,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [handleResizeMove, handleResizeEnd]
   );
-  React91.useEffect(() => {
+  React92.useEffect(() => {
     return () => {
       document.removeEventListener("mousemove", handleResizeMove);
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     ResizeHandle,
     {
       onMouseDown: handleResizeStart,
@@ -5595,12 +5608,15 @@ var getActual = (value) => {
   }
   return lines.slice(1, -1).map((line) => line.replace(/^ {2}/, "")).join("\n");
 };
-var createEditorDidMountHandler = (editorRef, monacoRef) => {
+var createEditorDidMountHandler = (editorRef, monacoRef, onUserContentChange) => {
   return (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
     preventChangeOnVisualContent(editor);
     setCustomSyntaxRules(editor, monaco);
+    const initialCode = editor.getModel()?.getValue() ?? "";
+    const initialUserContent = getActual(initialCode);
+    onUserContentChange(initialUserContent);
     monaco.editor.onDidChangeMarkers(() => {
       setTimeout(() => clearMarkersFromVisualContent(editor, monaco), 0);
     });
@@ -5608,16 +5624,20 @@ var createEditorDidMountHandler = (editorRef, monacoRef) => {
   };
 };
 var CssEditor = ({ value, onChange }) => {
-  const theme = (0, import_ui80.useTheme)();
-  const containerRef = React92.useRef(null);
-  const editorRef = React92.useRef(null);
-  const monacoRef = React92.useRef(null);
-  const debounceTimer = React92.useRef(null);
+  const theme = (0, import_ui81.useTheme)();
+  const containerRef = React93.useRef(null);
+  const editorRef = React93.useRef(null);
+  const monacoRef = React93.useRef(null);
+  const debounceTimer = React93.useRef(null);
   const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
-  const handleResize = React92.useCallback(() => {
+  const [hasContent, setHasContent] = React93.useState(value.trim() !== "");
+  const handleUserContentChange = React93.useCallback((newValue) => {
+    setHasContent(newValue.trim() !== "");
+  }, []);
+  const handleResize = React93.useCallback(() => {
     editorRef.current?.layout();
   }, []);
-  const handleHeightChange = React92.useCallback((height) => {
+  const handleHeightChange = React93.useCallback((height) => {
     if (containerRef.current) {
       containerRef.current.style.height = `${height}px`;
     }
@@ -5628,6 +5648,7 @@ var CssEditor = ({ value, onChange }) => {
     }
     const code = editorRef.current?.getModel()?.getValue() ?? "";
     const userContent = getActual(code);
+    setHasContent(userContent.trim() !== "");
     setCustomSyntaxRules(editorRef?.current, monacoRef.current);
     const currentTimer = debounceTimer.current;
     if (currentTimer) {
@@ -5642,8 +5663,9 @@ var CssEditor = ({ value, onChange }) => {
     }, 500);
     debounceTimer.current = newTimer;
   };
-  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef);
-  React92.useEffect(() => {
+  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, handleUserContentChange);
+  const handleReset = () => editorRef.current?.getModel()?.setValue(setVisualContent(""));
+  React93.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
       const timer = timerRef.current;
@@ -5652,49 +5674,64 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React92.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React92.createElement(
-    import_react47.Editor,
+  return /* @__PURE__ */ React93.createElement(
+    FloatingActionsBar,
     {
-      key: activeBreakpoint,
-      height: "100%",
-      language: "css",
-      theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-      value: setVisualContent(value),
-      onMount: handleEditorDidMount,
-      onChange: handleEditorChange,
-      options: {
-        lineNumbers: "on",
-        folding: true,
-        minimap: { enabled: false },
-        fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
-        fontSize: 12,
-        renderLineHighlight: "none",
-        hideCursorInOverviewRuler: true,
-        fixedOverflowWidgets: true,
-        suggestFontSize: 10,
-        suggestLineHeight: 14,
-        stickyScroll: {
-          enabled: false
-        },
-        lineDecorationsWidth: 2
+      actions: hasContent ? [
+        /* @__PURE__ */ React93.createElement(
+          ClearIconButton,
+          {
+            key: "clear",
+            tooltipText: (0, import_i18n49.__)("Clear", "elementor"),
+            onClick: handleReset
+          }
+        )
+      ] : []
+    },
+    /* @__PURE__ */ React93.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React93.createElement(
+      import_react47.Editor,
+      {
+        key: activeBreakpoint,
+        height: "100%",
+        language: "css",
+        theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+        value: setVisualContent(value),
+        onMount: handleEditorDidMount,
+        onChange: handleEditorChange,
+        options: {
+          lineNumbers: "on",
+          folding: true,
+          minimap: { enabled: false },
+          fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
+          fontSize: 12,
+          renderLineHighlight: "none",
+          hideCursorInOverviewRuler: true,
+          fixedOverflowWidgets: true,
+          suggestFontSize: 10,
+          suggestLineHeight: 14,
+          stickyScroll: {
+            enabled: false
+          },
+          lineDecorationsWidth: 2
+        }
       }
-    }
-  ), /* @__PURE__ */ React92.createElement(
-    ResizeHandleComponent,
-    {
-      onResize: handleResize,
-      containerRef,
-      onHeightChange: handleHeightChange
-    }
-  ));
+    ), /* @__PURE__ */ React93.createElement(
+      ResizeHandleComponent,
+      {
+        onResize: handleResize,
+        containerRef,
+        onHeightChange: handleHeightChange
+      }
+    ))
+  );
 };
 
 // src/components/repeater.tsx
-var React93 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 var import_react48 = require("react");
-var import_icons32 = require("@elementor/icons");
-var import_ui81 = require("@elementor/ui");
-var import_i18n49 = require("@wordpress/i18n");
+var import_icons33 = require("@elementor/icons");
+var import_ui82 = require("@elementor/ui");
+var import_i18n50 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -5784,8 +5821,8 @@ var Repeater3 = ({
       { action: { type: "reorder", payload: { ...meta } } }
     );
   };
-  return /* @__PURE__ */ React93.createElement(SectionContent, null, /* @__PURE__ */ React93.createElement(
-    import_ui81.Stack,
+  return /* @__PURE__ */ React94.createElement(SectionContent, null, /* @__PURE__ */ React94.createElement(
+    import_ui82.Stack,
     {
       direction: "row",
       justifyContent: "start",
@@ -5793,31 +5830,31 @@ var Repeater3 = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React93.createElement(import_ui81.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React93.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React93.createElement(
-      import_ui81.IconButton,
+    /* @__PURE__ */ React94.createElement(import_ui82.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React94.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React94.createElement(
+      import_ui82.IconButton,
       {
         size: SIZE9,
         sx: { ml: "auto" },
         disabled,
         onClick: addRepeaterItem,
-        "aria-label": (0, import_i18n49.__)("Add item", "elementor")
+        "aria-label": (0, import_i18n50.__)("Add item", "elementor")
       },
-      /* @__PURE__ */ React93.createElement(import_icons32.PlusIcon, { fontSize: SIZE9 })
+      /* @__PURE__ */ React94.createElement(import_icons33.PlusIcon, { fontSize: SIZE9 })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React93.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React94.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React93.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React93.createElement(
+    return /* @__PURE__ */ React94.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React94.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React93.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React93.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React94.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React94.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React94.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React94.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -5827,7 +5864,7 @@ var Repeater3 = ({
         showToggle,
         collectionPropUtil
       },
-      (props) => /* @__PURE__ */ React93.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React94.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -5848,11 +5885,11 @@ var RepeaterItem = ({
 }) => {
   const [anchorEl, setAnchorEl] = (0, import_react48.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n49.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n49.__)("Show", "elementor") : (0, import_i18n49.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n49.__)("Remove", "elementor");
-  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(
-    import_ui81.UnstableTag,
+  const duplicateLabel = (0, import_i18n50.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n50.__)("Show", "elementor") : (0, import_i18n50.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n50.__)("Remove", "elementor");
+  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
+    import_ui82.UnstableTag,
     {
       disabled,
       label,
@@ -5860,13 +5897,13 @@ var RepeaterItem = ({
       fullWidth: true,
       ref: setRef,
       variant: "outlined",
-      "aria-label": (0, import_i18n49.__)("Open item", "elementor"),
-      ...(0, import_ui81.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n50.__)("Open item", "elementor"),
+      ...(0, import_ui82.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React93.createElement(React93.Fragment, null, showDuplicate && /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React93.createElement(import_icons32.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React93.createElement(import_icons32.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React93.createElement(import_icons32.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React93.createElement(import_icons32.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, showDuplicate && /* @__PURE__ */ React94.createElement(import_ui82.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(import_ui82.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React94.createElement(import_icons33.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React94.createElement(import_ui82.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(import_ui82.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React94.createElement(import_icons33.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React94.createElement(import_icons33.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React94.createElement(import_ui82.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(import_ui82.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React94.createElement(import_icons33.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React93.createElement(
-    import_ui81.Popover,
+  ), /* @__PURE__ */ React94.createElement(
+    import_ui82.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -5879,13 +5916,13 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React93.createElement(import_ui81.Box, null, children({ anchorEl, collectionPropUtil }))
+    /* @__PURE__ */ React94.createElement(import_ui82.Box, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = (0, import_react48.useState)(null);
-  const popoverState = (0, import_ui81.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui81.bindPopover)(popoverState);
+  const popoverState = (0, import_ui82.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui82.bindPopover)(popoverState);
   (0, import_react48.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
@@ -5904,6 +5941,7 @@ var usePopover = (openOnMount, onOpen) => {
   AspectRatioControl,
   BackgroundControl,
   BoxShadowRepeaterControl,
+  ClearIconButton,
   ColorControl,
   ControlActionsProvider,
   ControlAdornments,