@elementor/editor-controls 3.33.0-248 → 3.33.0-249

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.33.0-248",
+  "version": "3.33.0-249",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.33.0-248",
-    "@elementor/editor-elements": "3.33.0-248",
-    "@elementor/editor-props": "3.33.0-248",
-    "@elementor/editor-responsive": "3.33.0-248",
-    "@elementor/editor-ui": "3.33.0-248",
-    "@elementor/editor-v1-adapters": "3.33.0-248",
-    "@elementor/env": "3.33.0-248",
-    "@elementor/http-client": "3.33.0-248",
+    "@elementor/editor-current-user": "3.33.0-249",
+    "@elementor/editor-elements": "3.33.0-249",
+    "@elementor/editor-props": "3.33.0-249",
+    "@elementor/editor-responsive": "3.33.0-249",
+    "@elementor/editor-ui": "3.33.0-249",
+    "@elementor/editor-v1-adapters": "3.33.0-249",
+    "@elementor/env": "3.33.0-249",
+    "@elementor/http-client": "3.33.0-249",
     "@elementor/icons": "1.55.0",
-    "@elementor/locations": "3.33.0-248",
-    "@elementor/mixpanel": "3.33.0-248",
-    "@elementor/query": "3.33.0-248",
-    "@elementor/session": "3.33.0-248",
+    "@elementor/locations": "3.33.0-249",
+    "@elementor/mixpanel": "3.33.0-249",
+    "@elementor/query": "3.33.0-249",
+    "@elementor/session": "3.33.0-249",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.33.0-248",
-    "@elementor/wp-media": "3.33.0-248",
+    "@elementor/utils": "3.33.0-249",
+    "@elementor/wp-media": "3.33.0-249",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/control-repeater/index.ts

@@ -1,5 +1,4 @@
 export { TooltipAddItemAction } from './actions/tooltip-add-item-action';
-export { Header } from './header/header';
 export { ItemsContainer } from './items/items-container';
 export { Item } from './items/item';
 export { ControlRepeater } from './control-repeater';

package/src/components/control-repeater/items/edit-item-popover.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { bindPopover, Box, Popover } from '@elementor/ui';
+import { bindPopover, Box } from '@elementor/ui';
 
 import { PropKeyProvider } from '../../../bound-prop-context';
+import { RepeaterPopover } from '../../repeater/repeater-popover';
 import { EMPTY_OPEN_ITEM, useRepeaterContext } from '../context/repeater-context';
 
 export const EditItemPopover = ( { children }: { children: React.ReactNode } ) => {
@@ -18,20 +19,10 @@ export const EditItemPopover = ( { children }: { children: React.ReactNode } ) =
 	};
 
 	return (
-		<Popover
-			disablePortal
-			slotProps={ {
-				paper: {
-					sx: { mt: 0.5, width: rowRef.offsetWidth },
-				},
-			} }
-			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-			{ ...bindPopover( popoverState ) }
-			onClose={ onClose }
-		>
+		<RepeaterPopover width={ rowRef.offsetWidth } { ...bindPopover( popoverState ) } onClose={ onClose }>
 			<PropKeyProvider bind={ String( openItemIndex ) }>
 				<Box>{ children }</Box>
 			</PropKeyProvider>
-		</Popover>
+		</RepeaterPopover>
 	);
 };

package/src/components/control-repeater/items/item.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { bindTrigger, UnstableTag } from '@elementor/ui';
+import { bindTrigger } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { RepeaterTag } from '../../repeater/repeater-tag';
 import { useRepeaterContext } from '../context/repeater-context';
 import { RepeaterItemActionsSlot, RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
 import { type ItemProps, type RepeatablePropValue } from '../types';
 
 export const Item = < T extends RepeatablePropValue >( { Label, Icon, actions }: ItemProps< T > ) => {
-	const { items, popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
+	const { popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
 	const triggerProps = bindTrigger( popoverState );
-	const key = items[ index ].key ?? -1;
 
 	const onClick = ( ev: React.MouseEvent ) => {
 		triggerProps.onClick( ev );
@@ -26,35 +26,27 @@ export const Item = < T extends RepeatablePropValue >( { Label, Icon, actions }:
 	};
 
 	return (
-		<>
-			<UnstableTag
-				key={ key }
-				disabled={ false }
-				label={
-					<RepeaterItemLabelSlot value={ value }>
-						<Label value={ value as T } />
-					</RepeaterItemLabelSlot>
-				}
-				showActionsOnHover
-				fullWidth
-				ref={ setRef }
-				variant="outlined"
-				aria-label={ __( 'Open item', 'elementor' ) }
-				sx={ { minHeight: ( theme ) => theme.spacing( 3.5 ) } }
-				{ ...triggerProps }
-				onClick={ onClick }
-				startIcon={
-					<RepeaterItemIconSlot value={ value }>
-						<Icon value={ value as T } />
-					</RepeaterItemIconSlot>
-				}
-				actions={
-					<>
-						<RepeaterItemActionsSlot index={ index ?? -1 } />
-						{ actions }
-					</>
-				}
-			/>
-		</>
+		<RepeaterTag
+			ref={ setRef }
+			label={
+				<RepeaterItemLabelSlot value={ value }>
+					<Label value={ value as T } />
+				</RepeaterItemLabelSlot>
+			}
+			aria-label={ __( 'Open item', 'elementor' ) }
+			{ ...triggerProps }
+			onClick={ onClick }
+			startIcon={
+				<RepeaterItemIconSlot value={ value }>
+					<Icon value={ value as T } />
+				</RepeaterItemIconSlot>
+			}
+			actions={
+				<>
+					<RepeaterItemActionsSlot index={ index ?? -1 } />
+					{ actions }
+				</>
+			}
+		/>
 	);
 };

package/src/components/control-repeater/items/items-container.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { SortableItem, SortableProvider } from '../../sortable';
+import { SortableItem, SortableProvider } from '../../repeater/sortable';
 import { ItemContext } from '../context/item-context';
 import { useRepeaterContext } from '../context/repeater-context';
 import { type Item, type RepeatablePropValue } from '../types';

package/src/components/{control-repeater/header/header.tsx → repeater/repeater-header.tsx}

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { forwardRef } from 'react';
 import { Box, Stack, Typography } from '@elementor/ui';
 
-import { ControlAdornments } from '../../../control-adornments/control-adornments';
+import { ControlAdornments } from '../../control-adornments/control-adornments';
 
-export const Header = React.forwardRef(
+export const RepeaterHeader = forwardRef(
 	(
 		{
 			label,

package/src/components/repeater/repeater-popover.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Popover, type PopoverProps } from '@elementor/ui';
+
+export const RepeaterPopover = ( { children, width, ...props }: PopoverProps & { width?: number } ) => {
+	return (
+		<Popover
+			disablePortal
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+			slotProps={ {
+				paper: {
+					sx: { mt: 0.5, width },
+				},
+			} }
+			{ ...props }
+		>
+			{ children }
+		</Popover>
+	);
+};

package/src/components/repeater/repeater-tag.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { UnstableTag, type UnstableTagProps } from '@elementor/ui';
+
+export const RepeaterTag = forwardRef< HTMLDivElement, UnstableTagProps >( ( props, ref ) => {
+	return (
+		<UnstableTag
+			ref={ ref }
+			fullWidth
+			showActionsOnHover
+			variant="outlined"
+			sx={ { minHeight: ( theme ) => theme.spacing( 3.5 ) } }
+			{ ...props }
+		/>
+	);
+} );

package/src/components/{repeater.tsx → repeater/repeater.tsx}

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { type CreateOptions, type PropKey, type PropTypeUtil } from '@elementor/editor-props';
+import { type CreateOptions, type PropKey } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
 	Box,
 	IconButton,
-	Popover,
-	Stack,
 	Tooltip,
-	Typography,
-	UnstableTag,
 	type UnstableTagProps,
 	usePopupState,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type SetValueMeta } from '../bound-prop-context';
-import { ControlAdornments } from '../control-adornments/control-adornments';
-import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from './control-repeater/locations';
-import { SectionContent } from './section-content';
+import { type SetValueMeta } from '../../bound-prop-context';
+import { ControlAdornments } from '../../control-adornments/control-adornments';
+import { useSyncExternalState } from '../../hooks/use-sync-external-state';
+import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../control-repeater/locations';
+import { SectionContent } from '../section-content';
+import { RepeaterHeader } from './repeater-header';
+import { RepeaterPopover } from './repeater-popover';
+import { RepeaterTag } from './repeater-tag';
 import { SortableItem, SortableProvider } from './sortable';
 
 const SIZE = 'tiny';
@@ -32,13 +31,10 @@ export type RepeaterItem< T > = {
 	disabled?: boolean;
 } & T;
 
-export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
-
 type RepeaterItemContentProps< T > = {
 	anchorEl: AnchorEl;
 	bind: PropKey;
 	value: T;
-	collectionPropUtil?: CollectionPropUtil< T >;
 	index: number;
 };
 
@@ -88,7 +84,6 @@ type RepeaterProps< T > = {
 	showDuplicate?: boolean;
 	showToggle?: boolean;
 	isSortable?: boolean;
-	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -104,7 +99,6 @@ export const Repeater = < T, >( {
 	showDuplicate = true,
 	showToggle = true,
 	isSortable = true,
-	collectionPropUtil,
 }: RepeaterProps< RepeaterItem< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -206,17 +200,7 @@ export const Repeater = < T, >( {
 
 	return (
 		<SectionContent gap={ 2 }>
-			<Stack
-				direction="row"
-				justifyContent="start"
-				alignItems="center"
-				gap={ 1 }
-				sx={ { marginInlineEnd: -0.75 } }
-			>
-				<Typography component="label" variant="caption" color="text.secondary">
-					{ label }
-				</Typography>
-				<ControlAdornments />
+			<RepeaterHeader label={ label } adornment={ ControlAdornments }>
 				<IconButton
 					size={ SIZE }
 					sx={ { ml: 'auto' } }
@@ -226,7 +210,7 @@ export const Repeater = < T, >( {
 				>
 					<PlusIcon fontSize={ SIZE } />
 				</IconButton>
-			</Stack>
+			</RepeaterHeader>
 			{ 0 < uniqueKeys.length && (
 				<SortableProvider value={ uniqueKeys } onChange={ onChangeOrder }>
 					{ uniqueKeys.map( ( key, index ) => {
@@ -258,7 +242,6 @@ export const Repeater = < T, >( {
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
 									showDuplicate={ showDuplicate }
 									showToggle={ showToggle }
-									collectionPropUtil={ collectionPropUtil }
 								>
 									{ ( props ) => (
 										<itemSettings.Content
@@ -285,13 +268,12 @@ type RepeaterItemProps< T > = {
 	removeItem: () => void;
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
-	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' | 'collectionPropUtil' > ) => React.ReactNode;
+	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' > ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
 	showDuplicate: boolean;
 	showToggle: boolean;
 	disabled?: boolean;
-	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
 const RepeaterItem = < T, >( {
@@ -307,9 +289,7 @@ const RepeaterItem = < T, >( {
 	showDuplicate,
 	showToggle,
 	disabled,
-	collectionPropUtil,
 }: RepeaterItemProps< T > ) => {
-	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
@@ -318,13 +298,10 @@ const RepeaterItem = < T, >( {
 
 	return (
 		<>
-			<UnstableTag
+			<RepeaterTag
 				disabled={ disabled }
 				label={ label }
-				showActionsOnHover
-				fullWidth
 				ref={ setRef }
-				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
 				{ ...bindTrigger( popoverState ) }
 				startIcon={ startIcon }
@@ -352,20 +329,9 @@ const RepeaterItem = < T, >( {
 					</>
 				}
 			/>
-			<Popover
-				disablePortal
-				slotProps={ {
-					paper: {
-						ref: setAnchorEl,
-						sx: { mt: 0.5, width: ref?.getBoundingClientRect().width },
-					},
-				} }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-				{ ...popoverProps }
-				anchorEl={ ref }
-			>
-				<Box>{ children( { anchorEl, collectionPropUtil } ) }</Box>
-			</Popover>
+			<RepeaterPopover width={ ref?.getBoundingClientRect().width } { ...popoverProps } anchorEl={ ref }>
+				<Box>{ children( { anchorEl: ref } ) }</Box>
+			</RepeaterPopover>
 		</>
 	);
 };

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -11,7 +11,7 @@ import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
-import { ControlRepeater, Header, ItemsContainer, TooltipAddItemAction } from '../../../components/control-repeater';
+import { ControlRepeater, ItemsContainer, TooltipAddItemAction } from '../../../components/control-repeater';
 import { DisableItemAction } from '../../../components/control-repeater/actions/disable-item-action';
 import { DuplicateItemAction } from '../../../components/control-repeater/actions/duplicate-item-action';
 import { RemoveItemAction } from '../../../components/control-repeater/actions/remove-item-action';
@@ -20,6 +20,7 @@ import { EditItemPopover } from '../../../components/control-repeater/items/edit
 import { Item } from '../../../components/control-repeater/items/item';
 import { type CollectionPropUtil, type RepeatablePropValue } from '../../../components/control-repeater/types';
 import { PopoverContent } from '../../../components/popover-content';
+import { RepeaterHeader } from '../../../components/repeater/repeater-header';
 import { createControl } from '../../../create-control';
 import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
@@ -85,9 +86,9 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 				initial={ getInitialBackgroundOverlay() as RepeatablePropValue }
 				propTypeUtil={ backgroundOverlayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
 			>
-				<Header label={ __( 'Overlay', 'elementor' ) }>
+				<RepeaterHeader label={ __( 'Overlay', 'elementor' ) }>
 					<TooltipAddItemAction newItemIndex={ 0 } />
-				</Header>
+				</RepeaterHeader>
 				<ItemsContainer>
 					<Item
 						Icon={ ItemIcon }

package/src/controls/box-shadow-repeater-control.tsx

@@ -5,7 +5,7 @@ import { FormLabel, Grid, styled, type SxProps, type Theme, UnstableColorIndicat
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlRepeater, Header, Item, ItemsContainer, TooltipAddItemAction } from '../components/control-repeater';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../components/control-repeater';
 import { DisableItemAction } from '../components/control-repeater/actions/disable-item-action';
 import { DuplicateItemAction } from '../components/control-repeater/actions/duplicate-item-action';
 import { RemoveItemAction } from '../components/control-repeater/actions/remove-item-action';
@@ -13,6 +13,7 @@ import { useRepeaterContext } from '../components/control-repeater/context/repea
 import { EditItemPopover } from '../components/control-repeater/items/edit-item-popover';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
+import { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SelectControl } from './select-control';
@@ -24,9 +25,9 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
 			<ControlRepeater initial={ initialShadow } propTypeUtil={ boxShadowPropTypeUtil }>
-				<Header label={ __( 'Box shadow', 'elementor' ) }>
+				<RepeaterHeader label={ __( 'Box shadow', 'elementor' ) }>
 					<TooltipAddItemAction newItemIndex={ 0 } disabled={ disabled } ariaLabel={ 'Box shadow' } />
-				</Header>
+				</RepeaterHeader>
 				<ItemsContainer>
 					<Item
 						Icon={ ItemIcon }

package/src/controls/filter-control/filter-repeater-control.tsx

@@ -8,12 +8,13 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { PropProvider, useBoundProp } from '../../bound-prop-context';
-import { ControlRepeater, Header, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
 import { DisableItemAction } from '../../components/control-repeater/actions/disable-item-action';
 import { DuplicateItemAction } from '../../components/control-repeater/actions/duplicate-item-action';
 import { RemoveItemAction } from '../../components/control-repeater/actions/remove-item-action';
 import { EditItemPopover } from '../../components/control-repeater/items/edit-item-popover';
 import type { RepeatablePropValue } from '../../components/control-repeater/types';
+import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { createControl } from '../../create-control';
 import { FilterConfigProvider, useFilterConfig } from './context/filter-config-context';
 import { FilterContent } from './filter-content';
@@ -68,12 +69,12 @@ const Repeater = ( { propTypeUtil, label, filterPropName }: RepeaterProps ) => {
 
 	return (
 		<ControlRepeater initial={ getInitialValue() as RepeatablePropValue } propTypeUtil={ propTypeUtil }>
-			<Header label={ label }>
+			<RepeaterHeader label={ label }>
 				<TooltipAddItemAction
 					newItemIndex={ 0 }
 					ariaLabel={ filterPropName === 'backdrop-filter' ? 'backdrop filter' : 'filter' }
 				/>
-			</Header>
+			</RepeaterHeader>
 			<ItemsContainer>
 				<Item
 					Label={ FilterLabel }

package/src/controls/repeatable-control.tsx

@@ -4,17 +4,17 @@ import { createArrayPropUtils, type SizePropValue } from '@elementor/editor-prop
 import { Box } from '@elementor/ui';
 
 import { PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlRepeater, Header, Item, TooltipAddItemAction } from '../components/control-repeater';
+import { ControlRepeater, Item, TooltipAddItemAction } from '../components/control-repeater';
 import { DisableItemAction } from '../components/control-repeater/actions/disable-item-action';
 import { DuplicateItemAction } from '../components/control-repeater/actions/duplicate-item-action';
 import { RemoveItemAction } from '../components/control-repeater/actions/remove-item-action';
 import { type TooltipAddItemActionProps } from '../components/control-repeater/actions/tooltip-add-item-action';
 import { EditItemPopover } from '../components/control-repeater/items/edit-item-popover';
 import { ItemsContainer } from '../components/control-repeater/items/items-container';
-import { type RepeatablePropValue } from '../components/control-repeater/types';
+import { type CollectionPropUtil, type RepeatablePropValue } from '../components/control-repeater/types';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { type CollectionPropUtil } from '../components/repeater';
+import { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
 import {
 	type ChildControlConfig,
@@ -79,13 +79,13 @@ export const RepeatableControl = createControl(
 						initial={ childPropTypeUtil.create( initialValues || null ) }
 						propTypeUtil={ childArrayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
 					>
-						<Header label={ repeaterLabel }>
+						<RepeaterHeader label={ repeaterLabel }>
 							<TooltipAddItemAction
 								{ ...addItemTooltipProps }
 								newItemIndex={ 0 }
 								ariaLabel={ repeaterLabel }
 							/>
-						</Header>
+						</RepeaterHeader>
 						<ItemsContainer isSortable={ false }>
 							<Item
 								Icon={ ItemIcon }

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -6,10 +6,11 @@ import { bindTrigger, Box, IconButton, type PopupState, Tooltip, Typography, use
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
-import { ControlRepeater, Header, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
 import { DisableItemAction } from '../../components/control-repeater/actions/disable-item-action';
 import { RemoveItemAction } from '../../components/control-repeater/actions/remove-item-action';
 import { EditItemPopover } from '../../components/control-repeater/items/edit-item-popover';
+import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
@@ -73,7 +74,7 @@ const Repeater = ( {
 				initial={ getInitialValue() ?? initialTransformValue }
 				propTypeUtil={ transformFunctionsPropTypeUtil }
 			>
-				<Header
+				<RepeaterHeader
 					label={ __( 'Transform', 'elementor' ) }
 					adornment={ () => <ControlAdornments customContext={ { path: [ 'transform' ], propType } } /> }
 					ref={ headerRef }
@@ -85,7 +86,7 @@ const Repeater = ( {
 						enableTooltip={ shouldDisableAddItem }
 						ariaLabel={ 'transform' }
 					/>
-				</Header>
+				</RepeaterHeader>
 				<ItemsContainer>
 					<Item
 						Icon={ TransformIcon }

package/src/index.ts

@@ -41,7 +41,12 @@ export { InlineEditor } from './components/inline-editor';
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 export { ClearIconButton } from './components/icon-buttons/clear-icon-button';
-export { Repeater, type SetRepeaterValuesMeta, type ItemActionPayload, type RepeaterItem } from './components/repeater';
+export {
+	Repeater,
+	type SetRepeaterValuesMeta,
+	type ItemActionPayload,
+	type RepeaterItem,
+} from './components/repeater/repeater';
 export { FloatingActionsBar } from './components/floating-bar';
 
 // types