diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts
index 8fb6c145f9..ab9b65c442 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts
@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayoutElement } from './picker-layout.element';
+import { UmbPickerLayout } from './picker-layout';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import type { ManifestSection } from '@umbraco-cms/models';
 
 @customElement('umb-picker-layout-section')
-export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutElement)) {
+export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -95,8 +95,6 @@ export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbOb
 	}
 }
 
-export default UmbPickerLayoutSectionElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-layout-section': UmbPickerLayoutSectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts
index 3a53fd9d34..4d66a04d7d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerLayoutSectionElement } from './picker-layout-section.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerLayoutSectionElement from './picker-layout-section.element';
 
 describe('UmbPickerLayoutSectionElement', () => {
 	let element: UmbPickerLayoutSectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts
index a5238a7044..97aa1760a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts
@@ -2,13 +2,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbUserGroupStore } from '../../../core/stores/user/user-group.store';
-import { UmbPickerLayoutElement } from './picker-layout.element';
+import { UmbPickerLayout } from './picker-layout';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import type { UserGroupDetails } from '@umbraco-cms/models';
 
 @customElement('umb-picker-layout-user-group')
-export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutElement)) {
+export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -105,8 +105,6 @@ export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(Umb
 	}
 }
 
-export default UmbPickerLayoutUserGroupElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-layout-user-group': UmbPickerLayoutUserGroupElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts
index 7e5b8847fe..88a738e1fa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerLayoutUserGroupElement } from './picker-layout-user-group.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerLayoutUserGroupElement from './picker-layout-user-group.element';
 
 describe('UmbPickerLayoutUserGroupElement', () => {
 	let element: UmbPickerLayoutUserGroupElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts
index 15698d1844..54dc338265 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts
@@ -2,13 +2,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbUserStore } from '../../../core/stores/user/user.store';
-import { UmbPickerLayoutElement } from './picker-layout.element';
+import { UmbPickerLayout } from './picker-layout';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
 @customElement('umb-picker-layout-user')
-export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutElement)) {
+export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -107,8 +107,6 @@ export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObser
 	}
 }
 
-export default UmbPickerLayoutUserElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-layout-user': UmbPickerLayoutUserElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts
index 8bf8c278a0..b4ecccaf94 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerLayoutUserElement } from './picker-layout-user.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerLayoutUserElement from './picker-layout-user.element';
 
 describe('UmbPickerUserElement', () => {
 	let element: UmbPickerLayoutUserElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts
similarity index 63%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts
index bdf40a6932..af5e04c86f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts
@@ -1,14 +1,9 @@
-import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { UmbModalLayoutElement } from '../../../core/services/modal/layouts/modal-layout.element';
-import { UmbUserStore } from '../../../core/stores/user/user.store';
-import { UmbPickerData } from './picker.element';
-import type { UserDetails } from '@umbraco-cms/models';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
-export class UmbPickerLayoutElement extends UmbModalLayoutElement<UmbPickerData> {
+import { UmbPickerData } from './picker';
+
+export class UmbPickerLayout extends UmbModalLayoutElement<UmbPickerData> {
 	@state()
 	private _selection: Array<string> = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts
index 5e7bb5190c..342dc0ba8f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerElement } from './picker.element';
+import { UmbPicker } from './picker';
 import type { ManifestSection } from '@umbraco-cms/models';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 
 @customElement('umb-picker-section')
-export class UmbPickerSectionElement extends UmbPickerElement {
+export class UmbPickerSectionElement extends UmbPicker {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -83,8 +83,6 @@ export class UmbPickerSectionElement extends UmbPickerElement {
 	}
 }
 
-export default UmbPickerSectionElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-section': UmbPickerSectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts
index 99df9c111c..643b920f55 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerSectionElement } from './picker-section.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerSectionElement from './picker-section.element';
 
 describe('UmbPickerSectionElement', () => {
 	let element: UmbPickerSectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts
index e7e471bb84..bebcb07bc5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts
@@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbUserGroupStore } from '../../../core/stores/user/user-group.store';
-import { UmbPickerElement } from './picker.element';
+import { UmbPicker } from './picker';
 import type { UserGroupEntity } from '@umbraco-cms/models';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
 @customElement('umb-picker-user-group')
-export class UmbPickerUserGroupElement extends UmbObserverMixin(UmbPickerElement) {
+export class UmbPickerUserGroupElement extends UmbObserverMixin(UmbPicker) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -93,8 +93,6 @@ export class UmbPickerUserGroupElement extends UmbObserverMixin(UmbPickerElement
 	}
 }
 
-export default UmbPickerUserGroupElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-user-group': UmbPickerUserGroupElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts
index 3f41587f2b..7e9b1632ae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerUserGroupElement } from './picker-user-group.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerUserGroupElement from './picker-user-group.element';
 
 describe('UmbPickerLayoutUserGroupElement', () => {
 	let element: UmbPickerUserGroupElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts
index 5641c0ffdb..da0b4164d6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts
@@ -3,11 +3,11 @@ import { css, html, nothing, PropertyValueMap } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import type { UserEntity } from '../../../core/models';
 import { UmbUserStore } from '../../../core/stores/user/user.store';
-import { UmbPickerElement } from './picker.element';
+import { UmbPicker } from './picker';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
 @customElement('umb-picker-user')
-export class UmbPickerUserElement extends UmbObserverMixin(UmbPickerElement) {
+export class UmbPickerUserElement extends UmbObserverMixin(UmbPicker) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -87,8 +87,6 @@ export class UmbPickerUserElement extends UmbObserverMixin(UmbPickerElement) {
 	}
 }
 
-export default UmbPickerUserElement;
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-picker-user': UmbPickerUserElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts
index adb80142f7..d730f4fe18 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPickerUserElement } from './picker-user.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-import UmbPickerUserElement from './picker-user.element';
 
 describe('UmbPickerUserElement', () => {
 	let element: UmbPickerUserElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.test.ts
index 315429e076..2f94898b86 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.test.ts
@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import UmbPickerElement from './picker.element';
+import { UmbPicker } from './picker';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
 
 describe('UmbPickerElement', () => {
-	let element: UmbPickerElement;
+	let element: UmbPicker;
 	beforeEach(async () => {
 		element = await fixture(html`<umb-picker></umb-picker>`);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbPickerElement);
+		expect(element).to.be.instanceOf(UmbPicker);
 	});
 
 	it('passes the a11y audit', async () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts
similarity index 96%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts
index 22881d1315..3db3adf976 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts
@@ -14,7 +14,7 @@ export interface UmbPickerData {
 	selection: Array<string>;
 }
 
-export class UmbPickerElement extends UmbContextConsumerMixin(LitElement) {
+export class UmbPicker extends UmbContextConsumerMixin(LitElement) {
 	@property({ type: Array })
 	public value: Array<string> = [];